Flex Component Lifecycle: Halo and Spark: Deepa Subramaniam Flex SDK

Flex Component Lifecycle: Halo
and Spark
Deepa Subramaniam
Flex SDK
http://www.iamdeepa.com
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Vocab Lesson
Flex Component Lifecycle

A mechanism the framework uses to create, manage and destroy components
A mechanism that makes the most of the player rendering model.
Halo: Component architecture used in Flex 3 and earlier versions.

Gumbo/Spark
Gumbo is the codename for the next version of Flex and Flex Builder
Spark is the component and skinning architecture in Gumbo.
Spark is built on top of Halo.
Parts: Internal parts of a component that are composited together to create a whole
component.
Composition is the name of the game.
Lets write a component!

®

Community Questions
 Pitfalls to avoid when building components?

 Follow best practice suggestions outlined in the talk!
 Will help memory consumption as well as performance
 What is the overhead of Spark components?

(compared to Halo)
 Does skinning come with a cost?
 Did Doug really write all of Flex for Dummies as he claims?

 No

Halo Component Architecture Patterns
Defining Patterns in Halo

 Invalidation/Validation Model
 Methodology to aggregate changes and defer work until an optimal
later time
 Event Driven Interaction Model
 Inform the component if something is about to or has already occurred
 Composition
 Parameterization of a component’s appearance or content.
 Most often occurs through factories and item renderers.

Halo Component Lifecycle – Broken Down
3 Phase Lifecycle
1. Initialization
 Construction
 Configuration
 Attachment
 Initialization
2. Updating
 Component responds to changes by using the Invalidation/Validation Model
3. Destruction
 Out of sight, out of mind
 Detachment
 Garbage collection

Lifecycle Phase 1: Initialization
Construction
Construction: Component begins its lifecycle
Configuration
Attachment
 Decide on the right base-class
Initialization
Invalidation  Component is instantiated, through the new operator in ActionScript
Validation or in markup
Detachment  Constructor must have zero required arguments
Garbage Collection
 Constructor can add event listeners, hard code initialization
properties of super classes
 Minimal work should occur here.

Construction Configuration: Component properties are set internally to be

Configuration processed later
Attachment
Initialization
Invalidation  Property values are assigned before parts are attached or initialized to
Validation avoid duplicate code execution.
Detachment
Garbage Collection
 Properties must expect that parts haven’t been created yet.

Construction
Configuration
Attachment: Addition to the display list
Attachment  What is the display list?
Initialization
Invalidation
 Component is added to the display list through an
Validation addChild() call by its parent.
Detachment  Without attachment, component lifecycle will stall.
Garbage Collection

Construction Initialization
Configuration
 Full invalidation/validation cycle is invoked (we
Attachment
will come back to this)
Initialization
 5 main lifecycle actions occur at this step:
Invalidation
Validation 1. preinitialize event is dispatched
Detachment
2. createChildren() is called
Garbage Collection
3. initialize event is dispatched
4. First full invalidation/validation pass occurs
5. creationComplete event is dispatched

Construction createChildren() - The attachment workhorse

Configuration
 Ideal place for adding children that are required throughout the lifetime of
Attachment
the component
Initialization
 Dynamic or data-driven parts which should be added in commitProperties()
Invalidation
Validation  Check to make sure the children have not been instantiated already
Detachment  Follow the same pattern Flex uses: construct, configure, attach.
Garbage Collection
Halo Rules:
1. UIComponents can contain anything (Sprites, Shapes, MovieClips, Video,
etc).
2. UIComponents must go inside other UIComponents
3. Containers must contain only UIComponents

First full invalidation/validation pass occurs here

Construction
Configuration  Invalidation is captured by 3 methods:
Attachment  invalidateProperties()
Initialization  invalidateSize()
Invalidation
 invalidateDisplayList()
Validation
Detachment  Validation is captured by 3 methods:
Garbage Collection  commitProperties()
 measure()
 updateDisplayList()
Phase 1 Done!

Phase 2: Updating
Construction Our component has been created!

Configuration
It’s a living, breathing entity, and now it needs to know how to update.
Attachment
Initialization Updates occur
Invalidation
 When a user interacts with a component
Validation
Detachment  When methods or properties are invoked/set
Garbage Collection
A component should use Flex’s Invalidation/Validation Model to

respond to changes.

The Elastic Racetrack
Traditional Flash Player Elastic Racetrack
Images courtesy of Sean Christmann
Flex component lifecycle is built atop this

frame model
Invalidation/Validation takes advantage of

the elastic racetrack to get work done in
an efficient manner.

Deferred Validation Model
Waiting for
update request Validation occurs right
before Rendering
Update
Requested
Invalidation
Validation

Deferred Validation Model: An Optimization
Invalidation/validation model is split into 3 phases:

 Update component properties
invalidateProperties() commitProperties()
 Update sizing & measurement information
invalidateSize() measure()
 Update drawing and positioning
invalidateDisplayList() updateDisplayList()

commitProperties()
Construction Property management phase of validation

Configuration  Purpose: Commit values typically set using a
Attachment
property setter
Initialization
Invalidation  Invoked by the framework before measurement and
Validation layout.
Detachment
 There is a definite pattern that should be followed in
Garbage Collection
order to avoid extra work.
 Dirty flags and storage variables
 This is the place to add/remove children not
required through the life of the entire component (as
opposed to createChildren())

measure()
Construction Sizing phase of validation

Configuration  Purpose: Component can calculate its ‘natural’ size based on
Attachment content and layout rules.
Initialization
Invalidation  Implicitly invoked when component children change size.
Validation (Don’t call measure() on your children).
Detachment
 Measurement occurs from the bottom up.
Garbage Collection <mx:Application>
<mx:HBox>
<mx:Button />
</mx:HBox>
</mx:Application>
 Don’t count on it: Framework optimizes away unnecessary

To get up and running calls to measure().
fast, explicitly size your
component.
The measure() function calculates and sets four properties:
 measuredWidth, measuredHeight
 measuredMinWidth, measuredMinHeight

updateDisplayList()
Construction Layout and Drawing Phase of Invalidation

Configuration
 Purpose: Lay out component contents and perform any drawing
Attachment
Initialization  Layout and positioning occurs from the top down, given:
Invalidation
<mx:Application>
Validation
<mx:HBox>
Detachment <mx:Button />
Garbage Collection </mx:HBox>
</mx:Application>
 In updateDisplayList() you must set position and size of each child

 If the child is a UIComponent, size it with setActualSize() and position it with
move()
 If the child is not a UIComponent, set the x, y, width and height properties.
 Good place to use Flash Player Drawing API

Styles
 Style support is built into UIComponent

 Add Style metadata so the style can be set inline as
an attribute in MXML
 Set default initial value in user’s application or

If it has more to do
defaults.css with presentation it
should be a style.
 Override styleChanged() to codify how the If you have a constant
component should react when a style has changed. related to
presentation, it should
 Check which style has changed and call the right invalidation be a style
method

Events in Flex
 Components dispatch and listen to events

 Add Event metadata to allow event to be set inline as an
attribute in MXML
 Use custom Event classes Tip: Chose

descriptive event
 Define static constants to enable compile-time checking of event types. names.
 If you dispatch the same event as a base class, you must use the same event
class.

Phase 3: Destruction
Construction
Destroying the component
Configuration  Detachment: Remove the component from the display list
Attachment  Components do not get validated or drawn when off the display list
Initialization
Invalidation
 Once off the display list:
Validation  You can re-parent the component, and it will be brought back to
Detachment life.
Garbage Collection  Re-parenting is cheaper then re-instantiating a component
 Garbage Collection
 No active references can be tough
 Common culprits include event listeners, dictionaries and timers.

Halo VideoWidget  Spark VideoWidget

Component Architecture Patterns
Defining Patterns in Halo

 Invalidation/Validation Model
 Event Driven Interaction Model
 Composition
Defining Patterns in Spark

 Clean separation of component logic from its visuals
 Spark Skinning Architecture
 Component functionality can be composited together to build up or pare down.
 Designer/Developer contract maintained by data, parts and states
 Component makes no assumptions about appearance
 Skin doesn’t require digging into code

Spark Video Player: Classes and Lifecycle Methods
Component Skin
 Default layout
 Data model
 Default size
 Event Handling
 Definition View States
 Skin Parts Contract
 Definition of Skin Parts
 View States Contract
 Graphics for data representation
•Use existing lifecycle methods
•Add a few new lifecycle methods
Build Atop What You Know!

®

Step 1: Identify your base class
Write component class

Write a Skin file
1. Identify View States:
[SkinStates]
Identify Skin Parts:
[SkinParts]
2.

Anatomy of my Spark Video Widget
Video Widget Component Class Video Widget Skin Class

 Extends SkinnableComponent  Default layout: Basic, resizable layout
 Data Model: Video  Default size: 320 x 240
 Skin Parts are video controls:  Define required and optional skin
 Video, play button, pause button, mute parts
button, stop button, volume control, etc  Supported View States: enabled,
 Identified via [SkinParts] metadata disabled
 Can be required or optional  Identifies visuals for different
view states via enhanced states
 View States : enabled, disabled syntax
 Identified via [SkinStates] metadata  Graphics for data representation:
shadow, border, fill

Spark Skinnable Component Lifecycle Methods
Existing Lifecycle Methods:

 commitProperties()
 createChildren()
 measure()
 updateDisplayList()
New Lifecycle Methods:

 SkinnableComponent.attachSkin()/detachSkin()
 Creates/Destroys the skin class for the component
 Called internally by the Flex framework in SkinnableComponent.createChildren()
 SkinnableComponent.partAdded()/partRemoved()
 Notifies the component of skin parts being added/removed
 Called by Flex framework in attachSkin()/detachSkin()
 SkinnableComponent.getCurrentSkinState()
 Called by your code and the Flex framework to set the view state of the skin class

Misc…
Don’t forget the following:

 [HostComponent] metadata – typed pointer from your skin back to your component
 Doublecheck your skin parts requirability
 Make more things optional: more defensive coding
 Make more thing required: stricter contract
 Associate your skin with your component via a defaults.css stylesheet
VideoWidget
{
skinClass: ClassReference("skins.VideoWidgetSkin");
}
 We continue to optimize!
 Spark skinning comes with a cost, but its deemed “in the noise”

In Conclusion…
 Flash Player Elastic Racetrack: Learn it, love it, live it.
 Invalidation: All the cool kids are doing it.
 The best component lifecycle reference is right in front of you: Read Framework Code.
 http://www.iamdeepa.com/
 http://opensource.adobe.com/wiki/display/flexsdk/Gumbo
 http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture
Thank You.

Flex Component Lifecycle: Halo and Spark: Deepa Subramaniam Flex SDK

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flex Component Lifecycle: Halo and Spark: Deepa Subramaniam Flex SDK

Uploaded by

Copyright:

Available Formats

Flex Component Lifecycle: Halo

Copyright 2008 Adobe Systems Incorporated. All rights reserved.