Adobe flex 3 component lifecycle
Download
1 / 44

Adobe Flex 3 Component Lifecycle - PowerPoint PPT Presentation


  • 124 Views
  • Uploaded on

Adobe Flex 3 Component Lifecycle. Presented by Ethan Du( 杜增强 ). Who am I ?. Ethan Du Senior Flex Architect @ 123Show blog: http://www.duzengqiang.com. Flex. ‣What is Flex? • MXML • A set of components • The component lifecycle!. Flex Component Lifecycle. ‣What is it?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Adobe Flex 3 Component Lifecycle' - wyatt-macias


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Adobe flex 3 component lifecycle

Adobe Flex 3 Component Lifecycle

Presented by Ethan Du(杜增强)


Who am i
Who am I ?

Ethan Du

Senior Flex Architect @ 123Show

blog: http://www.duzengqiang.com


Flex

‣What is Flex?

• MXML

• A set of components

• The component lifecycle!


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


Phases of the Lifecycle

‣ 3 Main Phases:

‣ BIRTH:

• construction, configuration,attachment, initialization

‣ LIFE:

• invalidation, validation, interaction

‣ DEATH:

• detachment, garbage collection




What is a constructor?

‣ A function called to instantiate (create in

memory) a new instance of a class


How is a constructor invoked?

Actionscript:

var theLabel : Label = new Label();

MXML:

<mx:Label id="theLabel"/>


What does an ActionScript3 constructor look like?

publicfunction 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.


What should a constructor do?

‣ A good place to add event listeners to the

object.

‣ Not much. Since the component’s

children have not yet been created, there’s

not much that can be done.


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


Configuration

‣ 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"/>


Configuration 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



What is attachment?

‣ Adding a component to the display list

(addChild, addChildAt, MXML declaration)


Methods

addingChild(child);

$addChildAt(child, index);

childAdded(child);


Must know about attachment

‣ The component lifecycle is stalled after

configuration until attachment occurs.


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.)


And this application:

<mx:Application ...>

<mx:Script>

<![CDATA[

override protected function createChildren() : void {

super.createChildren();

var a : A = new A();

}

]]>

</mx:Script>

</mx:Application>


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>


Output:

CONSTRUCTOR

CREATECHILDREN

COMMITPROPERTIES

MEASURE

UPDATEDISPLAYLIST

Don’t add components to the stage until you need them.



Initialization

1. ‘preInitialize’ dispatched

2. createChildren(); called

3. ‘initialize’ dispatched

4. first validation pass occurs

5. ‘creationComplete’ dispatched – component is fully commited, measured, and updated.


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

override protected function createChildren():void

{

...

textField = new UITextField();

textField.enabled = enabled;

textField.ignorePadding = true;

textField.addEventListener("textFieldStyleChange",

textField_textFieldStyleChangeHandler);

...

...

addChild(DisplayObject(textField));

}


3 Important Rules

1. Containers must contain only UIComponents

2. UIComponentsmust go inside other UIComponents.

3. UIComponents can contain anything (Sprites, Shapes, MovieClips, Video, etc).



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()


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 untilthe proper validation method


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

{

_text = value;

textChanged = true;

invalidateProperties();

invalidateSize();

invalidateDisplayList();

}

override protected function commitProperties():void{

{

if(textChanged){

myLabel.text = _text;

textChanged = false;

}

super.commitProperties();

}



Interaction

‣Flex is an Event Driven Interaction Model.




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



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

‣ Consider using weak references on event

listeners


Conclusion

‣ Defer, Defer, DEFER!

‣ Use validation methods correctly


Conclusion

‣ Defer, Defer, DEFER!

‣ Use validation methods correctly


References

‣ Ely Greenfield: “Building a Flex Component”

•http://www.onflex.org/ACDS/BuildingAFlexComponent.pdf

‣ RJ Owen: “Flex 3 Component Life-cycle”

•http://rjria.blogspot.com/2009/04/cf-united-express-denver-presentation.html

‣Mrinal Wadhwa: “Flex 4 Component Lifecycle”

•http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/



ad