Flex4 Component Lifecycle

Things to add: - What is a sprite? - what is a UIComponent? Flex 4 Component Lifecycle RJ Owen Flash Camp Denver 10.12.20101

Who am I? Senior Software Architect @ EffectiveUI Blogger for InsideRIA Adobe Community Expert in Flex Lead developer on some cool projects for cool clients (just like you.)2

Who are you? Software Developers, perhaps Designers Experienced in Flex 3? Interested in building better interfaces Interested in performance3

What will we talk about today? What is Flex? Frames, and how to slice them Flex 4 component theory Flex 4 component life-cycle4

What is Flex anyway? A FRAMEWORK built on top of Flash - content for the Flash player and AIR runtime A declarative Flash content language - MXML An expanding and evolving set of components A framework for displaying and managing components • The LayoutManager • The Component Lifecycle You could do all of this in Flash (authoring)! (It would take longer.)5

The Flash Timeline All flash-platform content is FRAME-BASED Frames execute one after another, over and over, forever and ever.6 timeline image: www.jaanuskase.com

Slicing a Frame A Frame Processing Drawing During each frame, the appropriate player / runtime will: ‣ Execute Code (process) ‣ Render to the screen (draw) This continues for every frame in the Flash movie or AIR application. 1 2 3 n7

Frames that take too long 1 2 3 n 1 2 3 n When frames spend too much time processing or rendering, “stretching” occurs. This causes the frame-rate to drop (fewer frames are rendered per second), making your application slow, choppy and less responsive. This is often referred to as the “elastic racetrack.”8 racetrack image:Ted Patrick, http://ted.onflash.org/2005/07/flash-player-mental-model-elastic.php

Three Slices Player User Prerender User Player Events Code Event Code Render User Action Invalidate Action Render Action Frames aren’t really that simple. The Flash Player runs on event loops. Loops vary in time from ~5ms to ~20ms (see Sean Christmann’s research on this) depending on code execution and rendering time. Event loops process the user action, invalidate action, and render action in that order. Each frame is built of combinations of these slices, depending on the frame rate.9 Frame image and everything I know about the frame model: Sean Christmann, http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/

Frames can contain multiple slices Frame 1 5 fps compiled framerate 25 fps Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 compiled framerate 50 fps Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8 Frame 9 Frame 10 compiled framerate Sean assumes ~20ms slices. In that case, a framerate of 5 fps yields 9 processing-only frames and 1 processing+render frame. 25fps gives 1 processing frame and 1 processing + rendering; at 50 fps we render with each slice (20ms = .002s; 50 fps * .002s = 1 frame)10

http://www.austinkleon.com/2008/04/21/so-what/

FLEX RUNS IN FRAMES The point is that Flex runs in these frames, and we need to make the most of them. You may go through multiple processing slices before you get to render Flex components and the framework itself are built around the frame model. Flex components help optimize your application for performance through.... THE COMPONENT LIFECYCLE! Understanding frames and slices is key to understanding the value of the lifecycle.12

FLEX 4 COMPONENT THEORY A little on why Flex 4 components are different13

Components: What are they? Contained bits of functionality Controls displayed on the screen Containers for those controls Highly Visual Examples: Button, ComboBox, List14

Components: what’s broken? In Halo (Flex 3), components were rigid Hard to extend “Monkey patching” to make small changes to component view Example: HTML text in the panel title bar15

Flex 4 Components: Issues to address Separate data, logic and behavior from visuals, states, animation and layout Create component-logic with no assumption about appearance Create component-view without digging into the logic To see this in action, let’s look at a button component.16

label:String, selected:Boolean text field, icon, background mouse handlers, selection logic17 MVC in a button component

Flex 3 Components (Halo) Skin (background) Component18

Flex 4 Components (Spark) Skin (entire view) Component19

Need a slide here talking about what a skin is, or showing a component with a skin or something like that. It’s an awkward transition. Skin Parts Components and Skins establish the contract between them using two things: skin parts and skin states. Component specifies optional/required skin parts as metadata [SkinPart(required=”true”)] public var labelElement:SimpleText; Skin implements skin parts Exception thrown if required part is not found Component should set data on skin parts in the setters AND component.partAdded(); method20

Skin States Defined in the component using metadata [SkinState(“up”)] [SkinState(“down”)] Current state is passed to the skin from the component All states are required. An exception will be thrown if a state is not implemented in the skin21

Skins are Components too Your component has one child in it’s display list: your Skin class All other elements (skin parts, component children) are added to the Skin’s child list in different display objects, which are made accessible as your Component’s elements list. UIComponent GroupBase SkinnableComponent Group Skin22

FLEX 4 COMPONENT LIFE-CYCLE An in-depth look at the life and times of today’s modern component23

Flex 4 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 every frame24

UIComponent Skinnable Component Flex 4 Component Model (Spark) Flex 4 Component Model (Spark) Flex 3 Component Model (Halo) Flex 3 Component Model (Halo)25 Flex 4 Components are built on Flex 3 Components

Flex 4 Component Lifecycle: 3 Stages Construction Birth Configuration Addition Initialization Invalidation Life Validation Interaction Death Removal Garbage Collection26

Construction Configuration Addition Initialization Birth: Construction Calls your constructor Can access properties and methods of the class, but note that children have not been created yet!! Must be public, no return type Call super(); Not used often in Flex var theLabel : Label = new Label(); <mx:Label id="theLabel"/>27

Construction Configuration Addition Initialization Birth: Construction JIT: “Just In Time” compilation. The VM will compile AS3 bytecode down to native machine code for your target platform. Constructors are NEVER JIT compiled, so putting code in your constructor is less efficient in terms of swf size than keeping it elsewhere. Most everything else in the framework IS JIT’d, and there’s a place in the lifecycle for most everything else you’ll need. If you want to assign listeners at this stage, put them in a separate method so JIT compilation can occur. Your takeaway: keep your constructors slim.28

Construction Configuration Addition Initialization Birth: Configuration The process of assigning values to properties on objects <local:SampleChild property1="value!"/> This results in the first call to commitProperties(); Containers must not expect children to be added yet For optimization, make setters fast and DEFER the real work until validation (more later) Until attachment occurs and your component is added to a display list, things stall here. Your component is in memory and it has values assigned to its properties, but it’s not visible and won’t go through the rest of the life cycle.29

Construction Configuration Addition Initialization Birth: Attachment Adding a component to the display elements list parent.addElement(yourComponent);30

Construction Configuration Addition Initialization Attachment: Element Lists Every component on the screen lives in a Display List Components are added to display lists Graphical Elements (rectangles, circles, text, etc.) are DRAWN into other Components True components are still on the child list Flex 4 lets us treat graphical elements as first class citizens (like components), but we need display objects that inherit from UIComponent to draw them on. The Elements List abstracts the components created to draw graphics for us - we use it like the child list, but it’s not the same thing. Graphics are DRAWN into children while components ARE children, yet they’re all elements.31

Group (DisplayObject) Elements Rect Rect UIComponent (DisplayObject) Path Rect Rect Rotation=90 Ellipse Label32 Attachment: DisplayObject Sharing

Group (DisplayObject) Elements Rect Draw Into Rect UIComponent (DisplayObject) Path Rect Rect Rotation=90 Ellipse Label32 Attachment: DisplayObject Sharing

Group Children (DisplayObject) Elements Rect Draw Into Rect UIComponent (DisplayObject) Path Rect Rect Rotation=90 Ellipse Label32 Attachment: DisplayObject Sharing

Group Children (DisplayObject) Elements Rect Draw Into Rect UIComponent (DisplayObject) Sprite Path Draw Into Rect Rect Rotation=90 Ellipse Label32 Attachment: DisplayObject Sharing

Group Children (DisplayObject) Elements Rect Draw Into Rect UIComponent (DisplayObject) Sprite Path Draw Into Rect Draw Into Rect Sprite Rotation=90 Ellipse Label32 Attachment: DisplayObject Sharing

Group Children (DisplayObject) Elements Rect Draw Into Rect UIComponent (DisplayObject) Sprite Path Draw Into Rect Draw Into Rect Sprite Rotation=90 Sprite Ellipse Draw Into Label32 Attachment: DisplayObject Sharing

Birth: Initialization After attachment, it’s time to initialize your component. Initialization involves several method calls and dispatches several events.33

Birth: Initialization Create children, do first validation pass Component Skininitialize(); preInitialize event dispatched! createChildren(); constructor(); validateSkinChange(); attachSkin(); initialize(); findSkinParts(); partAdded(); getCurrentSkinState(); currentState = ... childrenCreated(); initializeAccessibility(); initializeComplete(); initialize event dispatched! measure(); / updateDisplayList(); commitProperties(); / measure(); / updateDisplayList(); creationComplete event dispatched!

Life After initialization, we’re ready to go The component is added to the screen and available to users User interaction should cause changes in components – set invalidation flags When the next Render event occurs, validation methods will be called Invalidation Validation Interaction35

Life: Deferment The invalidation process: When a property is set, retain the value on a private public function set text(value:String):void variable { Set a “dirty” flag if (value != _text) { Invalidate the Component _text = value; The validation process: invalidateTextLines(); When the framework calls validation methods, invalidateSize(); invalidateDisplayList(); update your component accordingly } } Example: set “Text” on the TextBase class36

Invalidation Validation Interaction Life: Invalidation Player User Prerender User Player Events Code Event Code Render User Action Invalidate Action Render Action Invalidation Occurs Here37

Invalidation Validation Interaction Life: Invalidation Invalidation Methods Called to “invalidate” a component, but not do any work on it invalidateProperties() • any property changes invalidateSize() • changes to width or height invalidateDisplayList() • changes to child elements - either their size or position - or data provider (if applicable.) invalidateSkinState() • Just sets skinChanged=true; • Calls invalidateProperties();38

Invalidation Validation Interaction Life: Validation Player User Prerender User Player Events Code Event Code Render User Action Invalidate Action Render Action Validation Occurs Here39

Invalidation Validation Interaction Life: Validation “Do the work” that invalidation requires Move things, add things, remove things, etc. The goal: don’t duplicate or re-do things in the same frame commitProperties() getCurrentSkinState() updateDisplayList() measure()40

commitProperties() Invoked first - immediately before measurement and layout 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 screen41

getCurrentSkinState() Used if the skin state needs to be updated based on a change to the component Override this in your components to provide the proper skin state - it’s a worthless method in SkinnableContainer. Necessary moving forward when skin states will vary depending on interaction modes, but otherwise this isn’t very important Example: mobile components have no “over” state.42

measure() Component calculates its preferred (“default”) and minimum proportions based on content, layout rules, constraints. Measure is called bottom up - lowest children first Caused by “invalidateSize()” NEVER called for explicitly sized components43

overriding measure() In Flex 3 this was very important for container components. In Flex 4, consider using a layout if you find yourself needing to override measure. Use getExplicitOrMeasuredWidth() (or height) to get child proportions ALWAYS called during initialization, but not necessarily after that. The framework optimizes away calls to measure that aren’t “necessary.” Call super.measure() first! Set measuredHeight, measuredWidth for the default values; measuredMinHeight and measuredMinWidth for the minimum.44

updateDisplayList() Used when elements on the elements / display lists need to be drawn In Flex 3 this was a major component of layout containers - now we use Layout objects and skin classes, so this is less important Try not to override this on your component - first examine if perhaps the logic should be in the skin class instead. Sometimes you will need to override this method on the skin class itself.45

Life: Deferment Deferment is the core concept of the component lifecycle! Put off doing the “real work” until the appropriate time Validation methods listen for the Prerender event - happen once before a render Frame 1 set a component’s set width actually render width - deferred (deferred) set width component46

Life: Deferment Player User Prerender User Player Events Code Event Code Render User Action Invalidate Action Render Action Queued Invalidation Deferred Validation Render!47

Invalidation Validation Interaction Interaction Assign handlers to user events Process things Cause invalidation to occur Away we go!48

Invalidation Validation Interaction Interaction: why? Events: objects passed around when anything interesting goes on (clicks, moves, changes, timers...) • If something happens to a component, it “fires” or “dispatches” the event • If another component wants to know when something happens, it “listens” for events Event-based architecture is loosely-coupled Event-based architectures are more reusable Components don’t have to know anything about each other - just listen for the events!49

Invalidation Validation Interaction Interaction: how? Any component that inherits from EventDispatcher can send events component.dispatchEvent(event); Events are identified by a type (constant) Some popular events: • Event.CHANGE • MouseEvent.CLICK • FlexEvent.CREATION_COMPLETE • Event.RESIZE • MouseEvent.ROLL_OUT50

Interaction Invalidation Event propagation happens in 3 phases: Validation 1. Capturing Interaction 2. Targeting 3. Bubbling Application Application Capturing Bubbling Phase Phase Target Targeting Phase51

event.target vs. event.currentTarget target: the object that dispatched the event (doesn’t change) currentTarget: the object who is currently being checked for specific event listeners (changes as we traverse the display tree during the capture or bubbling phase) During the targeting phase, target == currentTarget.52

Life Goes On Interaction (dispatching events) sets the stage for the next user action In the next user action we’ll process these events and set up more queued invalidation In the invalidation action we’ll process all of that queued invalidation in our validation methods (commitProperties, updateElementsList, measure) Render! And so it goes, on and on forever, as long as your component remains on an elements list.53

Removal Garbage Collection Death: Removal “Removal” refers to the process of removing a component from the elements list. These components can be re-parented (brought back to life) or abandoned to die parent.removeElement(component); Abandoned components don’t get validation calls and aren’t drawn. Ever. If an abandoned component has no more active references, it *should* be garbage-collected Re-parenting isn’t cheap, but it’s cheaper than re-creating the same component twice Listen for FlexEvent.REMOVED from the component or ElementExistienceEvent.ELEMENT_REMOVED from the parent to do custom cleanup. Consider hiding rather than removing (set visible and includeInLayout to false)54

Removal Garbage Collection Death: Garbage Collection Any object not on an element’s list with no active references is eligible for destruction, garbage collection Use strongly typed objects Use weak listeners Be careful with object / dictionary references The flash player does not reduce it’s footprint, though memory can be recycled55

Conclusion Remember the frame model! It will help you understand what’s happening in your Flex application. For Flash developers this is second nature; for Java or .NET devs it’s an adjustment. Queued Invalidation & Deferred Validation are the core concepts of the component lifecycle Master the validation methods, and know which to override for any situation56

More Reading / Bibliography 360 | Flex Talk with Brad Umbaugh on the Flex 3 Component Lifecycle http://tv.adobe.com/watch/360ﬂex-conference/diving-deep-with-the-ﬂex-component-lifecycle A video of our 360|Flex presentation on the Flex 3 lifecycle. It’s long and in depth. Ely Greenfield: “Building a Flex Component” (Flex 3) http://onflex.org/ACDS/BuildingAFlexComponent.pdf A presentation Ely gave years ago that I still review. Sean Christmann on the Elastic Racetrack / Frame model http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/ This blog post is the granddaddy of every discussion about the Flash frame model or component lifecycle. Flex 4 Training by Development Arc http://www.developmentarc.com James Polanco and Aaron Pedersen do affordable online Flex 4 training. Their one day session covers much of this material in more depth.57

RJ Owen rj.owen@effectiveui.com Twitter: @rjowen Get these slides: http://www.slideshare.net/rjowen http://goo.gl/nrmX Thanks! www.effectiveui.com58

Flex4 Component Lifecycle

by EffectiveUI

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Flex4 Component Lifecycle Presentation Transcript