Diving Deep with the Flex Component Life Cycle
-
Upload
effectiveui -
Category
Technology
-
view
2.031 -
download
0
description
Transcript of Diving Deep with the Flex Component Life Cycle
![Page 1: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/1.jpg)
Diving Deep with the Flex Component Lifecycle
Joshua JamisonEffectiveUI
www.effectiveui.comJanuary 30, 2009
![Page 2: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/2.jpg)
Who am I?
‣ Joshua Jamison• Software Architect @ EffectiveUI
![Page 3: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/3.jpg)
Who are you (hopefully)?
‣Beginner to intermediate level developers‣Anyone who doesn’t currently understand
the lifecycle‣Anyone who wants a good review of the
basics
![Page 4: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/4.jpg)
What’s this about, anyway?
‣Flex component lifecycle‣Flex frame cycle (“elastic racetrack”)
![Page 5: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/5.jpg)
Flex Component Lifecycle
‣What is it?• The way the framework interacts with
every Flex component• A set of methods the framework calls to
instantiate, control, and destroy components
• Methods that make the most of the elastic racetrack
![Page 6: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/6.jpg)
Elastic Racetrack: introduction
‣Flex component lifecycle is built on this frame model‣More on this later
image courtesy of Ted Patrick
![Page 7: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/7.jpg)
A frame in AS3
image courtesy of Sean Christmann
![Page 8: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/8.jpg)
Phases of the Lifecycle
‣3 Main Phases:‣ BIRTH:
• construction, con"guration, attachment, initialization
‣ LIFE: • invalidation, validation, interaction
‣DEATH: • detachment, garbage collection
![Page 9: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/9.jpg)
BirthCongratulations: You’re about to have a component.
![Page 10: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/10.jpg)
Construction
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 11: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/11.jpg)
What is a constructor?
‣A function called to instantiate (create in memory) a new instance of a class
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 12: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/12.jpg)
How is a constructor invoked?
Actionscript:
<mx:Label id="theLabel"/>MXML:
var theLabel : Label = new Label();
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 13: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/13.jpg)
What does a constructor have access to?
‣Properties on the class‣Methods on the class‣Children have not yet been created!
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 14: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/14.jpg)
What does an ActionScript3 constructor look like?
‣ 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‣ Calls super() to invoke superclass constructor; if
you don’t, the compiler will!
public function ComponentName(){super();//blah blah blah
}
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 15: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/15.jpg)
What does an MXML constructor look like?
‣No need to de"ne one. In fact, if you try to put one in an <mx:Script> block, you’ll get an error. ‣Why? Remember: MXML = Actionscript. A
constructor is created by the compiler in the Actionscript generated from the MXML.‣Specify “-keep” in the Flex Builder
compiler arguments and look at the generated code to verify this.
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 16: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/16.jpg)
What should a constructor do?
‣Not much. Since the component’s children have not yet been created, there’s not much that can be done.‣There are speci"c methods (such as
createChildren) that should be used for most of the things you’d be tempted to put in a constructor.‣A good place to add event listeners to the
object.Birth
constructioncon!gurationattachmentinitialization
LifeDeath
![Page 17: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/17.jpg)
Don’t create or attach children in the constructor
‣ It’s best to delay the cost of createChildren calls for added children until it’s necessary
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 18: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/18.jpg)
Con"guration
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 19: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/19.jpg)
Con"guration
‣The process of assigning values to properties on objects‣ In MXML, properties are assigned in this
phase, before components are attached or initialized<local:SampleChild property1="value!"/>
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 20: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/20.jpg)
Hooray: Sample code!
SampleChild constructorSampleChild.property1 setterAdding child SampleChild4
<mx:Application ...> ...<local:SampleChild property1="value!"/>
</mx:Application>
Output:
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 21: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/21.jpg)
Con"guration and Containers
‣Containers must not expect their children have to be instantiated when properties are set.<mx:Application ...> <local:SampleContainer property1="value!"> <local:SampleChild property1="value!"/> </local:SampleContainer></mx:Application>
SampleContainer constructorSampleContainer.property1 setterSampleChild constructorSampleChild.property1 setter
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 22: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/22.jpg)
Con"guration Optimization
‣To avoid performance bottlenecks, make your setters fast and defer any real work until validation‣We’ll talk more about deferment in the
validation / invalidation section
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 23: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/23.jpg)
Attachment
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 24: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/24.jpg)
What is attachment?
‣Adding a component to the display list (addChild, addChildAt, MXML declaration)
‣The component lifecycle is stalled after con"guration until attachment occurs.
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 25: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/25.jpg)
Consider this component: 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" ); super.commitProperties(); }
(It traces all of its methods.)
![Page 26: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/26.jpg)
And this application:
‣Without attachment, the rest of the lifecycle doesn’t happen.
<mx:Application ...> <mx:Script> <![CDATA[ override protected function createChildren() : void { super.createChildren(); var a : A = new A(); } ]]> </mx:Script></mx:Application>
CONSTRUCTOROutput:
![Page 27: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/27.jpg)
But what about this application?
‣Moral of the story: don’t add components to the stage until you need them.
<mx:Application ...> <mx:Script> <![CDATA[ override protected function createChildren() : void { super.createChildren(); var a : A = new A();
this.addChild( a ); } ]]> </mx:Script></mx:Application> Output: CONSTRUCTOR
CREATECHILDRENCOMMITPROPERTIESMEASUREUPDATEDISPLAYLIST
![Page 28: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/28.jpg)
Initialization
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 29: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/29.jpg)
Initialization
‣2 phases, 3 events:
1. ‘preInitialize’ dispatched2. createChildren(); called3. ‘initialize’ dispatched4. "rst validation pass occurs5. ‘creationComplete’ dispatched
Create
Validate
Birthconstructioncon!gurationattachmentinitialization
LifeDeath
![Page 30: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/30.jpg)
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, con"gure, attach
override protected function createChildren():void{
...textField = new UITextField();
textField.enabled = enabled;textField.ignorePadding = true;textField.addEventListener("textFieldStyleChange", textField_textFieldStyleChangeHandler);
... ... addChild(DisplayObject(textField));}
create
con"gure
attach
![Page 31: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/31.jpg)
"rst validation pass
‣ Invalidation is not part of initialization - only Validation‣Validation consists of 3 methods:
• commitProperties()• measure()• updateDisplayList()
‣more on these laterBirth
constructioncon!gurationattachmentinitialization
LifeDeath
![Page 32: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/32.jpg)
LifeThey grow up so fast.
![Page 33: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/33.jpg)
Invalidation
BirthLife
invalidationvalidationinteraction
Death
![Page 34: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/34.jpg)
Invalidation / Validation cycle
‣ Flex imposes deferred validation on the Flash API• goal: defer screen updates until all
properties have been set‣ 3 main method pairs to be aware of:
• invalidateProperties() -> commitProperties()
• invalidateSize() -> measure()• invalidateDisplayList() ->
updateDisplayList()
![Page 35: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/35.jpg)
Invalidation / Validation theory
‣First, a little theory.
![Page 36: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/36.jpg)
Deferment
‣Deferment is the central concept to understand in the component Life-cycle
‣Use private variables and boolean #ags to defer setting any render-related properties until the proper validation method
![Page 37: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/37.jpg)
Text-book example
public function set text(value:String):void{ myLabel.text = value;// Possible Error! during first config phase, // myLabel might not exist!}
private var _text:String = "";public function set text(value:String):void{ textSet = true; _text = value; textChanged = true;
invalidateProperties(); invalidateSize(); invalidateDisplayList();}
override protected function commitProperties():void{{
if(textChanged){myLabel.text = _text;textChanged = false;
}super.commitProperties();
}
Bad:
Good:
![Page 38: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/38.jpg)
The Elastic Racetrack revisited
Invalidation occurs here
image courtesy of Sean Christmann
![Page 39: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/39.jpg)
Invalidation methods
‣ invalidateProperties()• Any property changes
‣ invalidateSize()• Changes to width or height
‣ invalidateDisplayList()• Changes to child component size or
positionBirthLife
invalidationvalidationinteraction
Death
![Page 40: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/40.jpg)
Invalidation example 1<mx:Application> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var arr : ArrayCollection = new ArrayCollection(); public function onClick() : void { var c : int = 0; while( c++ < 20 ) { arr.addItem( c ); } } ]]> </mx:Script> <mx:VBox> <mx:Button label="Click me!" click="onClick()"/> <test:BadList id="theList" dataProvider="{arr}"/> </mx:VBox></mx:Application>
![Page 41: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/41.jpg)
Invalidation example 2public class BadList extends VBox
{ private var _dataProvider : ArrayCollection; public function set dataProvider( arr : ArrayCollection ) : void { this._dataProvider = arr; arr.addEventListener( CollectionEvent.COLLECTION_CHANGE, dataProviderChangeHandler ); } private function dataProviderChangeHandler( e : Event ) : void { this.removeAllChildren(); for each( var n : Number in this._dataProvider ) { var l : Label = new Label(); l.text = n.toString(); this.addChild( l );
} } public function BadList() {} }
Result: dataProviderChangeHandler called 20 times
![Page 42: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/42.jpg)
Invalidation example 3public class GoodList extends VBox
{ private var _dataProvider : ArrayCollection; private var _dataProviderChanged : Boolean = false; public function set dataProvider( arr : ArrayCollection ) : void { this._dataProvider = arr; arr.addEventListener( CollectionEvent.COLLECTION_CHANGE, dataProviderChangeHandler ); this._dataProviderChanged = true; this.invalidateProperties(); } override protected function commitProperties():void { super.commitProperties(); if( this._dataProviderChanged ) { this.removeAllChildren(); for each( var n : Number in this._dataProvider ) { var l : Label = new Label(); l.text = n.toString(); this.addChild( l ); } this._dataProviderChanged = false; } } private function dataProviderChangeHandler( e : Event ) : void { this._dataProviderChanged = true; this.invalidateProperties(); } public function GoodList() {} }
Result: commitProperties called only twice (once during initialization)
![Page 43: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/43.jpg)
Validation
BirthLife
invalidationvalidationinteraction
Death
![Page 44: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/44.jpg)
The Elastic Racetrack revisited
Validation occurs here
![Page 45: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/45.jpg)
Validation
‣Apply the changes deferred during invalidation‣Update all visual aspects of the
application in preparation for the render phase‣3 methods:
• commitProperties()• measure()• updateDisplayList()
BirthLife
invalidationvalidationinteraction
Death
![Page 46: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/46.jpg)
commitProperties()
‣Ely says: “Calculate and commit the effects of changes to properties and underlying data.”‣ Invoked "rst - immediately before
measurement and layout
BirthLife
invalidationvalidationinteraction
Death
![Page 47: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/47.jpg)
commitProperties() cont.
‣ALL changes based on property and data events go here‣Even creating and destroying children, so
long as they’re based on changes to properties or underlying data‣Example: any list based component with
empty renderers on the screenBirthLife
invalidationvalidationinteraction
Death
![Page 48: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/48.jpg)
measure()
‣Component calculates its preferred (“default”) and minimum proportions based on content, layout rules, constraints.‣Measure is called bottom up - lowest
children "rst‣Caused by “invalidateSize()”‣NEVER called for explicitly sized
componentsBirthLife
invalidationvalidationinteraction
Death
![Page 49: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/49.jpg)
overriding measure()
‣Used for dynamic layout containers (VBox, etc.)‣Use getExplicitOrMeasuredWidth() (or
height) to get child proportions‣ALWAYS called during initialization‣Call super.measure() "rst!‣Set measuredHeight, measuredWidth for
the default values; measuredMinHeight and measuredMinWidth for the minimum.
BirthLife
invalidationvalidationinteraction
Death
![Page 50: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/50.jpg)
measure() cont.
‣Not reliable - Framework optimizes away any calls to measure it deems “unecessary”
BirthLife
invalidationvalidationinteraction
Death
![Page 51: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/51.jpg)
updateDisplayList()
‣All drawing and layout code goes here, making this the core method for all container objects‣Caused by invalidateDisplayList();‣Concerned with repositioning and
resizing children‣updateDisplayList() is called top-down
BirthLife
invalidationvalidationinteraction
Death
![Page 52: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/52.jpg)
Overriding updateDisplayList()
‣Usually call super.updateDisplayList() "rst• super() is optional - don’t call it if you’re
overriding everything it does‣Size and lay out children using move(x,y)
and setActualSize(w,h) if possible• I never have good luck with
setActualSize()BirthLife
invalidationvalidationinteraction
Death
![Page 53: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/53.jpg)
Elastic Racetrack cont.
‣User Actions• Dispatch invalidation events• Interact with any non-validation events
from this frame (mouse movements, timers, etc.)
![Page 54: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/54.jpg)
Elastic Racetrack Cont.
‣ Invalidate Action• Process all validation calls
‣Render Action• Do the heavy lifting - actually draw on
the screen
![Page 55: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/55.jpg)
The Elastic Racetrack revisited
Queued InvalidationDeferred Validation
Render!
![Page 56: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/56.jpg)
Interaction
BirthLife
invalidationvalidationinteraction
Death
![Page 57: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/57.jpg)
How do objects know when something happens?
‣Events: objects passed around when anything interesting goes on (clicks, moves, changes, timers...)‣ If something happens to a component, it
“"res” or “dispatches” the event‣ If another component wants to know
when something happens, it “listens” for events‣Event-based architecture is loosely-
coupled
BirthLife
invalidationvalidationinteraction
Death
![Page 58: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/58.jpg)
Bene"ts of Loosely-Coupled Architectures
‣Everything becomes more reusable‣Components don’t have to know anything
about the components in which they’re used
BirthLife
invalidationvalidationinteraction
Death
![Page 59: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/59.jpg)
Who can dispatch events?
‣Subclasses of EventDispatcher• EventDispatcher inherits directly from
Object‣Simply call dispatchEvent(event) to "re off
an event when something happens
BirthLife
invalidationvalidationinteraction
Death
![Page 60: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/60.jpg)
How to tell events apart?
‣Event class• Different classes allow for customized
payloads‣ “type” "eld: a constant
BirthLife
invalidationvalidationinteraction
Death
![Page 61: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/61.jpg)
Common Events
‣Event.CHANGE‣MouseEvent.CLICK‣FlexEvent.CREATION_COMPLETE‣Event.RESIZE‣MouseEvent.ROLL_OUT
BirthLife
invalidationvalidationinteraction
Death
![Page 62: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/62.jpg)
Handling Events
‣<mx:Button id=”theButton” click=”callThisFunction(event)”/>‣ theButton.addEventListener( MouseEvent
.CLICK, callThisFunction )
BirthLife
invalidationvalidationinteraction
Death
![Page 63: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/63.jpg)
Event Propagation
Capturing Phase
Target
Application Application
Bubbling Phase
Targeting Phase
‣ Three phases: Capturing, Targeting, Bubbling
BirthLife
invalidationvalidationinteraction
Death
![Page 64: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/64.jpg)
Event Propagation‣ Three phases: Capturing, Targeting, Bubbling
<mx:Application initialize="onInitialize()"><mx:Script> <![CDATA[ public function onInitialize() : void { this.addEventListener( MouseEvent.CLICK, clickHandler, true ); this.addEventListener( MouseEvent.CLICK, clickHandler, false ); outer.addEventListener( MouseEvent.CLICK, clickHandler, true ); outer.addEventListener( MouseEvent.CLICK, clickHandler, false ); inner.addEventListener( MouseEvent.CLICK, clickHandler, true ); inner.addEventListener( MouseEvent.CLICK, clickHandler, false ); button.addEventListener( MouseEvent.CLICK, clickHandler, true ); button.addEventListener( MouseEvent.CLICK, clickHandler, false ); } public function clickHandler( e : Event ) : void { trace("----------------------------------------------------------"); trace("TARGET: " + e.target.id ); trace("CURRENT TARGET: " + e.currentTarget.id ); trace("PHASE: " + ( e.eventPhase == 1 ? "CAPTURE" : ( e.eventPhase == 2 ? "TARGET" : "BUBBLE" ) ) ); } ]]></mx:Script> <mx:VBox> <mx:Panel id="outer"> <mx:TitleWindow id="inner"> <mx:Button id="button"/> </mx:TitleWindow> </mx:Panel> </mx:VBox></mx:Application>
‣
BirthLife
invalidationvalidationinteraction
Death
![Page 65: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/65.jpg)
Event Propagation----------------------------------------------------------TARGET: buttonCURRENT TARGET: eventTestPHASE: CAPTURE----------------------------------------------------------TARGET: buttonCURRENT TARGET: outerPHASE: CAPTURE----------------------------------------------------------TARGET: buttonCURRENT TARGET: innerPHASE: CAPTURE----------------------------------------------------------TARGET: buttonCURRENT TARGET: buttonPHASE: TARGET----------------------------------------------------------TARGET: buttonCURRENT TARGET: innerPHASE: BUBBLE----------------------------------------------------------TARGET: buttonCURRENT TARGET: outerPHASE: BUBBLE----------------------------------------------------------TARGET: buttonCURRENT TARGET: eventTestPHASE: BUBBLE
BirthLife
invalidationvalidationinteraction
Death
![Page 66: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/66.jpg)
Stopping events from propagating
‣ stopPropagation() : Prevents processing of any event listeners in nodes subsequent to the current node in the event #ow‣ stopImmediatePropagation() : Prevents
processing of any event listeners in the current node and any subsequent nodes in the event #ow
BirthLife
invalidationvalidationinteraction
Death
![Page 67: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/67.jpg)
target vs. currentTarget
‣ target: the object that dispatched the event (doesn’t change)‣ currentTarget: the object who is currently
being checked for speci"c event listeners (changes)
BirthLife
invalidationvalidationinteraction
Death
![Page 68: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/68.jpg)
Dispatching events from custom components
‣MXML:
‣Actionscript:
<mx:Metadata> [Event(name="atePizza", type="flash.events.JoshEvent")]</mx:Metadata>
[Event(name="atePizza", type="flash.events.JoshEvent")]public class MyComponent extends UIComponent{ ...}
BirthLife
invalidationvalidationinteraction
Death
![Page 69: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/69.jpg)
DeathAll good things come to an end.
![Page 70: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/70.jpg)
Detachment
BirthLifeDeath
detachmentgarbage collection
![Page 71: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/71.jpg)
Detachment
‣ “Detachment” refers to the process of removing a child from the display list‣These children can be re-parented
(brought back to life) or abandoned to die‣Abandoned components don’t get
validation calls and aren’t drawn‣ If an abandoned component has no more
active references, it *should* be garbage-collected
BirthLifeDeath
detachmentgarbage collection
![Page 72: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/72.jpg)
Detachment cont.
‣Re-parenting isn’t cheap, but it’s cheaper than re-creating the same component twice‣Children do not need to be removed from
their parent before being re-parented, but always should be‣Consider hiding rather than removing
• set visible and includeInLayout to falseBirthLifeDeath
detachmentgarbage collection
![Page 73: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/73.jpg)
Garbage Collection
BirthLifeDeath
detachmentgarbage collection
![Page 74: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/74.jpg)
Garbage Collection
‣The process by which memory is returned to the system‣Only objects with no remaining references
to them will be gc’d• Set references to detached children to
“null” to mark them for GC‣Talk to Grant Skinner about forcing GC
• http://gskinner.com/blog/archives/2006/08/as3_resource_ma_2.htmlBirthLifeDeath
detachmentgarbage collection
![Page 75: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/75.jpg)
Conclusion
‣Defer, Defer, DEFER!‣Use validation methods correctly‣Remember the elastic racetrack
![Page 76: Diving Deep with the Flex Component Life Cycle](https://reader033.fdocuments.us/reader033/viewer/2022061303/54937f84b47959b25e8b46a6/html5/thumbnails/76.jpg)
References‣ Ely Green"eld: “Building a Flex Component”• http://www.on#ex.org/ACDS/
BuildingAFlexComponent.pdf
‣ Cha"c Kazoun, Joey Lott: “Programming Flex 2” by O’Reilly• http://oreilly.com/catalog/9780596526894/
‣ Colin Moock: “Essential Actionscript 3.0” by O’Reilly• http://oreilly.com/catalog/9780596526948/
index.html