Issue with HitArea in Canvas hitArea

I happen to generate a graph in Flex, I needed node element to store data, and have some graphics inside that, without second thought I extended Canvas component for GraphNode.

In flex when you use Canvas to draw some thing behind origin or point (0,0)  hitArea of that Canvas happens to behave strangely. I could figure out this problem by giving background colors to this Canvas. You can resolve it in 2 ways,

1. Use a UIComponent for inside a Canvas and set hitArea of that Canvas to it’s child UIComponent

2. Use Container instead of Canvas. If you don’t want given component to respond to updateDisplayList you can safely extend from Container (mx.core.Container)

PS: To have all your graphics behind (0,0) visible, you should have clipContent set to false.

Filtering Array For Objects with Unique values in ActionScript

I happened to go through many instances where I had to filter a flat list on given attribute for unique values. For example I have flat list of employees who is working in different territory with there achievements, problem is show the graph based on territory. In flex you can use GroupedColletion to achieve this, but if you doing it in flash you are left with no options other than Array.filter. Here is how I did it.

var flatData:Array = [

{ Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Estimate:40000 , Actual:38865 },

{ Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Estimate:30000 , Actual:29885 },

{ Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Schmoe" , Estimate:30000 , Actual:29134 },

{ Region:"Southwest", Territory:"Northern California" , Territory_Rep:"Lauren Ipsum" , Estimate:40000 , Actual:38805 },

{ Region:"Southwest", Territory:"Northern California" , Territory_Rep:"T.R. Smith" , Estimate:40000 , Actual:55498 },

{ Region:"Southwest", Territory:"Southern California" , Territory_Rep:"Jane Grove" , Estimate:45000 , Actual:44913 },

{ Region:"Southwest", Territory:"Southern California" , Territory_Rep:"Alice Treu" , Estimate:45000 , Actual:44985 },

{ Region:"Southwest", Territory:"Nevada" , Territory_Rep:"Bethany Pittman", Estimate:45000 , Actual:52888 }

];

 

// sort first to make sure filter logic doesn’t fail

flatData.sortOn("Territory");

// function to return true for false for filtering

function is_unique_ter(item:*, index:int, arr:Array) {

    if (index<arr.length–1) {

        return item.Territory!=arr[index+1].Territory;

    } else {

        return true;

    }

 

}

 

//assign filtered data to different array

var filteredflatData:Array=flatData.filter(is_unique_ter);

 

// trace out contents of filteredflatData

for (var i:Object in filteredflatData) {

    var s="";

    for (var j:String in filteredflatData[i]) {

        s+=( filteredflatData[i][j])+",";

    }

    trace(s);

}

it should give trace output like this:

30000,Southwest,Arizona,29885,Dana Binn,
30000,Southwest,Central California,29134,Joe Schmoe,
45000,Southwest,Nevada,52888,Bethany Pittman,
40000,Southwest,Northern California,55498,T.R. Smith,
45000,Southwest,Southern California,44913,Jane Grove,

Introduction to Flex

What is Flex?
Flex is the way to make Rich Internet Applications quickly and easily. It’s a framework for creating RIAs that run with widely deployed Flash Player. At its heart it uses two languages namely MXML, a markup language based on Extensive Markup Language (XML) and ActionScript an EMCAScript based native scripting language of Flash platform.

Why Flex?
Quick, Easy, Well Supported: Flex gives you interactivity in a robust development environment. The Flash Platform gives you more reach and more tools than any other technology out there. It really is the next generation of web applications and Flex has made it easy to jump in and take advantage.

Flex is nothing but Flash: Just like Flash movies Flex is deployed as SWF files to be played in Flash run-time environments like Flash Player in browser, Adobe Integrated Runtime (AIR) and Flash Lite (mobile Flash player).

Overview Actionscript

ActionScript is a programming language for Flash Player run-time environment. It was developed targeting designers to help them program interactivity. Today ActionScript enables efficient programming of flash applications ranging from Intros to complex, data-driven interactive applications.

ActionScript 1 started with Flash 5, which used “prototype” extensively to program interactive components for flash movies. ActionScript 2 was introduced with Flash MX 2004, which for the first time got Object Oriented concepts and implementations. Even though programmers using OOP methodologies final compiled binary was still using the ActionScript 1 format, hence the performance of flash applications were not that good by then.

Here came ActionScript 3, will lots on improvements over earlier version, AVM (ActionScript Virtual Machine) was written from the scratch, standardized components creation and usage methods. Closing up lot many security loop holes, still maintaining the backward support.

Introduction to Flex

In coming days look forward for my tutorials on “Introduction to Flex”, this should help you in getting hold of Flex framework and Flex builder 3.

1. What is Flex?
2. Introduction Flex Builder 3
3. MXML, ActionScript
4. Containers
5. Navigators
6. Controls
7. Data Binding
8. Using Different Views
9. Using CSS
10. Events
11. Using XML
12. Using External Data
13. Deployment