Flex3组件生命周期

1. ‘preInitialize’ dispatched 2. createChildren(); called 3. ‘initialize’ dispatched 4. first validation pass occurs 5. ‘creationComplete’ dispatched – component is fully commited, measured, and updated.
Output:
CONSTRUCTOR CREATECHILDREN COMMITPROPERTIES MEASURE UPDATEDISPLAYLIST
Don’t add components to the stage until you need them.
Initialization
Initialization
childAdded(child);
Must know about attachment
‣ The component lifecycle is stalled after configuration until attachment occurs.
Consider this component:
3 Important Rules
1. Containers must contain only UIComponents 2. UIComponents must go inside other UIComponents. 3. UIComponents can contain anything (Sprites, Shapes, MovieClips, Video, etc).
Don’t create or add children in the constructor
‣ It’s best to delay the cost of createChildren calls for added children until it’s necessary
Configuration
Phases of the Lifecycle
‣ 3 Main Phases:
‣ BIRTH: • construction, configuration,attachment, initialization ‣ LIFE: • invalidation, validation, interaction ‣ DEATH: • detachment, garbage collection
Deferment
‣ Deferment is the central concept to understand in the component Life-cycle ‣ Use private variables and boolean flags to defer setting any render-related properties until the proper validation method
Birth
Construction
What is a constructor?
‣ A function called to instantiate (create in memory) a new instance of a class
How is a constructor invoked?
Output:
CONSTRUCTOR
‣Without attachment, the rest of the lifecycle doesn’t happen.
But what about this application?
<mx:Application ...> <mx:Script> <![CDATA[ override protected function createChildren() : void { super.createChildren(); var a : A = new A(); this.addChild( a ); } ]]> </mx:Script> </mx:Application>
Attachment
What is attachment?
‣ Adding a component to the display list (addChild, addChildAt, MXML declaration)
Methods
addingChild(child);
$addChildAt(child, index);
bad example
public function set text(value:String):void { myLabel.text = value; }
good example
private var _text:String = ""; private var textChanged:Boolean = false; public function set text(value:String):void {
Configuration
‣ The process of assigning values to properties on objects ‣ In MXML, properties are assigned in this phase, before components are attached or initialized
Actionscript:
var theLabel : Label = new Label();
MXML:
<mx:Label id="theLabel"/>
Байду номын сангаас
What does an ActionScript3 constructor look like?
public function ComponentName() { super(); //blah blah blah } ‣ No required arguments (if it will be used in MXML); zero, or all optional ‣ Only one per class (no overloading!) ‣ No return type ‣ Must be public ‣ Call super()…or the compiler will do it for you.
(It traces all of its methods.)
And this application:
<mx:Application ...> <mx:Script> <![CDATA[ override protected function createChildren() : void { super.createChildren(); var a : A = new A(); } ]]> </mx:Script> </mx:Application>
createChildren()
‣ MXML uses the createChildren() method to add children to containers ‣ Override this method to add children using AS • Follow MXML’s creation strategy: create, configure, attach
public class A extends UIComponent { public function A() { trace( "CONSTRUCTOR" ); super(); } override protected function createChildren() : void { trace( "CREATECHILDREN" ); super.createChildren(); } override protected function measure() : void { trace( "MEASURE" ); super.measure(); } override protected function updateDisplayList(width:Number, height:Number) : void { trace( "UPDATEDISPLAYLIST" ); super.updateDisplayList(width,height); } override protected function commitProperties():void { trace( "COMMITPROPERTIES" ); mitProperties(); }
‣ 3 main method pairs to be aware of:
• invalidateProperties() -> commitProperties() • invalidateSize() -> measure() • invalidateDisplayList() -> updateDisplayList()
override protected function createChildren():void { ... textField = new UITextField(); textField.enabled = enabled; textField.ignorePadding = true; textField.addEventListener("textFieldStyleChange", textField_textFieldStyleChangeHandler); ... ... addChild(DisplayObject(textField)); }