March, 2010

flex — 4 Comments
10
Mar 10

Flex component lifecycle and event flow explained

Learned something new from Ted today
Read original post by Ted here

Flex is an event driven programming model and everything happens due to an event. Looking at the MXML code can confuse most of the developers unless they haven’t looked at the internal class of flex components. If we were to compare Flex, HTML and FLASH in terms of component instantiation.

  • HTML instantiates top to bottom
  • Flash executes across frames starting at Frame zero.
  • Flex on the other had is a bit different.

When I started  learning Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn’t understand how event chain started and what happened inside a component to make it finally render on screen. Initially I used to run into numerous runtime  null point exception since i used to think i could access a property of  an object  thinking it would have been created.

Anyhow the key is understanding the event basics and seeing the initialization and event flow, Lets look at a sample application that i have written to explain this. The structure of the application cann be understood by the following diagram.

With this Demo app there is no visual clue that you will get  as an output to understand the event flow and instantiation step. its the TRACE statements that are important to explain  how the event  flow and instantiation happens. Below is the code for the same.

Continue reading →

flex — No Comments
3
Mar 10

Always Call Super in Item Renderer’s Override Methods

Today I came across a bug where I was using an item renderer in a data grid and the row didn’t highlight when you mouse over it and wouldn’t get selected when you clicked on it (ie, moused over or clicked on the column, not the entire row). The item renderer consisted of 2 Label component.

At first, it was tough to see what the problem could have been. The item renderer is very simple, I have used more complicated item renderers elsewhere that don’t have this problem.

That’s when I noticed that my data setter override didn’t look quite right:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        override public function set data(value:Object):void{

            _data = value;
            if(value){
                if(parseInt(value["growth"])>0)
                    this.setStyle("color",LOW_STATE);
                else if(parseInt(value["growth"])== 0)
                    this.setStyle("color",NORMAL_STATE);
                if(parseInt(value["growth"])<0)
                    this.setStyle("color",HIGH_STATE);
                   
                this.text = value["growth"]+"%";
                }
       }

I was this close to trying to hack in something using the mouseover and mouseclick handlers, when I realized I just needed to do this little change : “super.data = value”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        override public function set data(value:Object):void{
            // the missing line that made all the difference
                super.data = value;

            _data = value;
            if(value){
                if(parseInt(value["growth"])>0)
                    this.setStyle("color",LOW_STATE);
                else if(parseInt(value["growth"])== 0)
                    this.setStyle("color",NORMAL_STATE);
                if(parseInt(value["growth"])<0)
                    this.setStyle("color",HIGH_STATE);
                   
                this.text = value["growth"]+"%";
                }
       }

Apparently something in the super class’s data setter does something vitally important, and you really shouldn’t skip that. If you do, BAD stuff will happen.

flex — 1 Comment
2
Mar 10

useHandCursor = Pain in the arse!

I was creating a UIcomponent called the “FilterIndicator” which looks like a button but has a button inside itself to remove the button all-together from the stage. FilterIndicator by default will have a toggle behavior differenciated by the background color: if the filter is active the bgColor is green but if the filter is applied it becomes red. the whole component extends Canvas.

The task was to show a hand cursor whenever the user moves his mouse over this component. So far it had turned out to be a pain in the ass till i found the solution.

Well the problem with useHandcursor started when i tried to show cursor on the canvas. firstly this was not working when i did try this out with various combination i found out that MouseChildren = “false” property actually controls the behavior of useHandcursor.

solution :
useHandCursor=”true” buttonMode=”true” mouseChildren=”false”

IMPORTANT: mouseChildren=”false” might cause the mouseclick of the subsequent below components to not fire at all.