tTo understand the life cycle of a flex component, a counter example I made is a good start point. Say we have a customized component "ImageThumbnail":
Then in our main application, we would like to create an instance of this component with a customized image URL, and add it into a Tile ("tlTop"). First I wrote like this:
I got an error like this:
When I was tracing the code, I found that the "thumb.imageHolder" is null even after I use new method to initialize the ImageThumbnail explicitly. However, after I wrote the code like this:
It works!
This is because of the special mechanism of the life cycle of Flex components. Following traditional programming logic, because the "Image" component is a child of "ImageThumbnail", thus after we explicitly initialize "ImageThumbnail", the "Image" should be also initialized. However, this is not what Flex works!
In Flex, the first time addChild() or addChildAt() is called, the component's initialize() method also gets called - FlexEvent.preinitialize is dispatched, the rest of the code in initialize() method is run, FlexEvent.initialize is dispatched, then createChildren() is called (in which the UITextField is created for use as the button's label ... and so on. If your component has children which are UIComponents, then the process will be recursive.
Method .addChild() is where it all starts to come together.
To understand more about the component life cycle, a good article can be found here, and this one is also highly recommended.
| <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="122" height="92" borderThickness="1" borderStyle="solid"> <mx:Image id="imageHolder" x="0" y="0" width="120" height="90" /> </mx:Canvas> |
Then in our main application, we would like to create an instance of this component with a customized image URL, and add it into a Tile ("tlTop"). First I wrote like this:
| private var thumb :ImageThumbnail=new ImageThumbnail(); thumb.imageHolder.source="data/icon.jpg"; tlTop.addChild(thumb); |
I got an error like this:
| TypeError: Error #1009: Cannot access a property or method of a null object reference. |
When I was tracing the code, I found that the "thumb.imageHolder" is null even after I use new method to initialize the ImageThumbnail explicitly. However, after I wrote the code like this:
| tlTop.addChild(thumb); thumb.imageHolder.source="data/icon.jpg"; |
It works!
This is because of the special mechanism of the life cycle of Flex components. Following traditional programming logic, because the "Image" component is a child of "ImageThumbnail", thus after we explicitly initialize "ImageThumbnail", the "Image" should be also initialized. However, this is not what Flex works!
In Flex, the first time addChild() or addChildAt() is called, the component's initialize() method also gets called - FlexEvent.preinitialize is dispatched, the rest of the code in initialize() method is run, FlexEvent.initialize is dispatched, then createChildren() is called (in which the UITextField is created for use as the button's label ... and so on. If your component has children which are UIComponents, then the process will be recursive.
Method .addChild() is where it all starts to come together.
To understand more about the component life cycle, a good article can be found here, and this one is also highly recommended.
Leave a comment