Creating new components in Flex 3

Need to be aware of the Flex Component Lifecycle
Flex 3 – Halo
Flex 4 (Gumbo) – Spark



Spark is built on top of Halo

Invalidation/validation – allows you to defer action to a more appropriate time

Event driven

Composition
Initialization – constructor/initialization
Updating
Destruction

Construction
Constructor must have zero required arguments
Do minimal work here
No children exist at this time
Always call super
Add event listeners

Configuration
Properties are set
Cannot assume children exist

Attachment
Component is added to display list

Initialization
Pre-initialize
createChildren
Initialize
Full validate/invalidate pass
creationComplete

createChildren
create child controls now (if static, not dynamic controls)

See if children already exist first

commitProperties
follow the construct/configure/attach pattern for children

UI component can contain anything
UI components must go inside other UI components
Containers can only contain UIComponents

Updating
The elastic racetrack – code execution/rendering
Elastic because heavy code execution or heavy rendering can slow down the cycle (causing flickering)
Validation occurs just before rendering
Component invalidates itself (marks itself dirty) and then validation cleans it up
Call invalidate to defer validation (don’t call explicitly)
invalidateProperty -> commitProperties
invalidateSize -> measure
invalidateDisplayList -> updateDisplayList
commitProperties is called before measurement and layout
this is the place to add calls to create dynamic child components

Storage variable names should begin with underscore
Dirty flag should begin with variable name (without underscore) followed by Changed
Setter checks to see if value had really changed, otherwise exits, and then sets dirty flag

commitProperties
checks dirty flags
takes appropriate action
clears the flags

measure
used to determine “natural” size
don’t call measure on children
measurement is done from bottom up
framework optimizes away from unnecessary measure calls (you can’t count on it being called)
to get up and running quickly, provide explicit values initially
need to set:
measuredWidth
measuredHeight
measuredMinWidth
measuredMinHeight
if you are checking the size of a child component, use the getExplicitorMeasured(Height/Width) rather than the actual property

Layout
Occurs from top down
Use SetActualSize and Move methods rather than set properties (width/height) so that they get dispatched for later processing
Good place to call Flash Player Drawing API

Styles
Built into UIComponent
Add style metadata to your component
Set default values for the styles
Override styleChanged method
Call super
See if one of your styles was changed
Invalidate as needed
If something has more to do with presentation, it should be in a style

Events
Add event metadata
Use custom event classes
Define static constants to aid compile checking
Use descriptive names

Destruction
Detachment – removed from display list
You can reparent the component later
Garbage collection
No active references
Only when player calls for additional memory
Use weak references in listener and dictionary calls to facilitate

Defining patterns in Gumbo
Separation of component logic from visuals
Spark skinning architecture
Component functionality can be composited together to build up or pare down
Designer/Developer contract maintained by
Data
Parts
States
Component makes no assumptions about appearance
Skin does not require digging into code

Step 1: What is the core of the component
Step 2: Identify skin components
What is required? What is optional?
Step 3: Add spark specific code
Implement partAdded/partRemoved
Decide states
Author a skin
Skin is associated to component through CSS
Step 4: Remove Halo specific code
createChildren
measure
updateDisplayList