Flex 4 Deep Dive: UI and Dev
mostly development stuff | a little bit of design stuff

Who are we?
• RJ Owen
• Senior Developer at EffectiveUI
• Andy McIntosh
• Experience Architect at EffectiveUI
• Experienced
Flex Developers, men in the trenches, the kind of guys
who know what it’s like out there.

Where’s Juan?
• Juan Sanchez has abandoned the Rocky Mountain Adobe Camp in
favor of a relaxing beach vacation.
• Let’s
all feel bad for Juan, and thank Andy for jumping in at the last
second.

Who are you?
• Software designers and developers
• Some Flex experience in Flex 3
• Interested in building better interfaces

What will we talk about?
• Today we’ll cover:
• Language updates in Flex 4
• MXML graphics and the new Flash Text Engine
• Effects and Animations
• Containers and Layout
• Components, Custom and Otherwise
• Component Lifecycle, Skins
• Credit where it’s due:
•Our talk draws from Ely Greenfield’s “Flex 4 Migration” presentation from Adobe MAX 2008

Flex T-Shirt Store Demo
Built for Adobe R&D team in 2 weeks

Changes in 2009
Some MXML languages changes to support the new features of Flex 4

What’s new in Flex 4?
•A lot:
•
•
Spark components
Skin components, dynamic layout We’ve got our
FXG - declarative graphics
work cut out
•
• Flash Catalyst integration
for us.
• Styles are different
• States are different
• “Groups” vs. “Child Lists”; new container types
• Enhanced Text renderer
• New MXML tags
• Effects and Animation
• Chrome, Scrolling
• Updated component lifestyle, architecture
• Designer / Developer contract

Fundamental Changes
• Designer / Developer Workflow
Designer
Developer
Workflow

Fundamental Changes
• Graphics are 1st Tier Citizens
• Flash Catalyst Integration
• New “Spark” component architecture (old “Halo”)
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)

Changes in 2009: Namespaces
• Duplicate components = duplicate tags.
Public outcry over “FxButton” vs. “Button”
• Improved Productivity
• Fix things, tinker with things
• The result: MXML 2009
Contains new language features only available in 2009
One language namespace per file, but can mix and match per application
Spark and Halo live side by side in 2009
Spark is only intended to be used in 2009 – won’t generally work in 2006

Flex Namespaces
•x m ln s : f x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 9 ”
Language tags (Script, Style, and more)
Built in types (Array, String, Number, etc)
•x m ln s : s = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / s p a r k ”
All new classes introduced in Flex 4
RPC
Graphics
•x m ln s : m x = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / h a lo ”
All legacy Halo components
States, Validators, RPC, etc.
Anything that was in 2006
•x m ln s : m x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 6 ”
The same as it was in Flex 3 - use this if you’re not going to use 2009 namespaces

Changes in 2009: New Tags
< f x : D e c la r a t io n s / >
•A p la c e t o s t ic k y o u r <s:Application>
s tuff
<fx:Declarations>
•A n
<s:HTTPService … />
y t h in g t h a t ’ s n o t a
</fx:Declarations>
v is u a l c h ild o f a
c o m p o n e n t b e lo n g s h e r e .
<s:TextInput … />
…
•S e r v ic e s , D a t a M o d e ls , </s:Application>
s i n g l e t o n s …a n y t h i n g t h a t
d o e s n ’ t s h o w u p in y o u r
UI end s up here

Changes in 2009: Styles
• New components have overlapping class names
• New with Flex 4: qualified CSS selectors
<Style>
@namespace s "library://ns.adobe.com/flex/spark”;
s|Button {
}
</Style>
• Required on all type identifiers in CSS
• Newsyntax is global to an application – even in MXML 2006
documents
• Namespaces are resolved at compile time – at runtime, types are fully
qualified classnames
(i.e., s|Button above becomes spark.components.Button)

Changes in 2009: Advanced Styles
• Multiple
Class Selectors:
<Button id=“upButton” styleName=“default tiny” />
• ID
Selectors: default and tiny are two
#upButton { fontSize: 14 } separate distinct styles!
• Descendant Selectors:
s|Scrollbar #upButton { baseColor: #FF8888 }
• Pseudo Selectors:
s|Scrollbar #upButton:over { baseColor: #8888FF }

Changes in 2009: States - what’s broken?
• States in Flex 3 and below suck
• Overly verbose
• Really awkward to use - AddChild children, RemoveChild children, etc.
• Hard to optimize
• We never ever ever use them. Ever.
• Okay, Andy uses them all the time, but he hates them.

Changes in 2009: States - Fix it!
• States <states>
in Flex 4 are awesome <State name=”login"/>
• Declare your states with a ‘State’ tag <State name=”register"/>
<State name=”someOtherState” stateGroups=”group1”/>
• Describe ‘alternate views’ of your markup </states>
• Change values, bindings, event handlers
<Group>
• Include and exclude components as easily as <TextBox text=“username:” />
setting visibility <TextInput />
<TextBox text=“password:” />
• Unscoped entries specify the ‘default’ for all states <TextInput />
• States can be grouped into State Groups - see <Button label=“new user?” />
Flex documentation for more info <Checkbox includeIn=“register” label=“agree to terms” />
<Button label=“log in” label.register=“sign up” />
• <fx:Reparent> tag to move children between </Group>
states
• W A R N IN G : U s e N E W S TA T E S in
2 0 0 9 d o c u m e n t s – 2 0 0 6 s t ill
s u p p o r t s le g a c y s t a t e s .

MXML for Graphics and new Text rendering
Flex 4 provides a declarative graphics language that makes drawing vector art easier (but not
really “easy.”)
Flex 4 makes deliberate use of the new text rendering engine in Flash Player 10 (FTE) to allow
you to manipulate text in the way you’d expect (FINALLY.)

MXML Graphics
• MXML Graphics library providing rich primitive support
Simple Shape primitives
(Rectangles, rounded rects, ellipses, circles)
Complex Paths
(Linear, Quadratic, and Bezier curve segments)
Full range of fills and strokes
(solid, transparent, bitmap, linear and radial gradients)
Masking, filters, blend modes, and more.
(blur, glow, dropshadow, screen, multiply…)
Color and 2D transformations
(rotate, scale, tint, brighten…)
Integrated text, bitmaps

MXML Graphics: This is ugly, but cool
<Graphic>
<Path data=“ ….. “>
<fill>
<LinearGradient angle=“90”>….
</LinearGradient>
</fill>
</Path>
<Path blendMode=“screen” data=“…” >
<fill>
<LinearGradient angle=“45”>…
</LinearGradient>
</fill>
</Path>
<GraphicText text=“MXML Graphics”>
<filters>
<Glow color=“#00FF00” strength=“3” … />
</filters>
</GraphicText>
</Graphic>
Credit where it’s due: Ely Greenfield made this.

MXML Graphics
• 1st class citizens
G r a p h ic E le m e n
Anything that can be set can be changed
t
Easy to animate with effects, states, transitions, code
Freely mix and match with Spark components
E llip s e
• GraphicElement
Focused on performance L in e
optimized for fast rendering, low overhead
One DisplayObject shared by many GraphicElements P a th
Important to understand:
Components are DisplayObjects
GraphicElements draw into DisplayObjects
B it m a p
Im a g e

MXML Graphics: DisplayObject sharing
• Elements are “Drawn”
into a DisplayObject (any
Sprite - remember
this.graphics.draw from
Flex 3?)
• DisplayObjectsare
shared to optimize
rendering, memory,
performance, etc.
• Sharingcan be affected
by Rotation, Scale, 3D, Credit where it’s due: Ely Greenfield made this.

MXML Graphics: FXG
• FXG:
graphics format based on
MXML
• Understood by Design tools
• Based on flash rendering model.
• Static
– no binding, layout, event
handlers, styling, etc.
• Optimized by compiler

Text in Flex 4
• FTE: New low level text engine (player 10)
Stands for “Flash Text Engine”
• TLF: New text layout library built on top of FTE.
“Text Library for Flash?”
Might also stand for “Totally Like Fireballs”,“Typical Lightning Flamboyance” or “Tumultuous Latex Fusion”
• Benefits:
Soft hyphens (we know you’ve all been missing those!)
Baseline control (e.g., superscripts and subscripts)
Right, center, and decimal tabs
Vertical justification
Multiple columns
Ligatures, capitalization styles, digit styles
Integrated Rendering of device fonts (a.k.a. I can fade and rotate my text FINALLY)

Text in Flex 4: New Text components
• Spark Introduces 3 new ‘Primitive’ Text components:
SimpleText (Label, sorta)
RichText (Text, sorta)
c a r e f u l - t h e s e d o N O T e x t e n d U IC o m p o n e n t !!
RichEditableText (editable TextField)
•2 new skinnable text Spark components (based on the primitives):
TextInput
TextArea
(Creatively named identically to the current components.)

Flex 4 Text: Old vs. New
Flex 3 / Halo Flex 4 / Spark
Based on TextField Based on Flash Text Engine
Simple layout support Complex layout and editing support
Uses D e f in e F o n t 3 Uses D e f in e F o n t 4 embedded
embedded fonts fonts
An important note:
embedded fonts can’t be shared.
(Adobe is working on resolving this issue)

Effects and Animation
We’re just going to touch on this, but it’s much improved over Flex 3.

Effects and Animation
• What’s wrong with Flex’s animation now?
Make use of the new Elements (graphics)
Designed for more advanced tools (i.e. Flast Catalyst)
More Flexible
• Animate
Animates arbitrary targets (GraphicElements and more)
Animates arbitrary types (floats, integers, colors, vectors, paths)
Animates along arbitrary motion paths
Auto-reversing behavior for mirroring transitions (easy fix for “flickering” animations)
Precision timing for executing compound transitions

Effects and Animation: Simple Animation
<Animate target=“{pane}” duration=“300”>
<AnimationProperty property=“x”
valueFrom=“200” valueTo=“400” />
<AnimationProperty property=“y”
valueFrom=“200” valueTo=“400” />
</Animate>

Effects and Animation: Complex Animation
<Animate target=“{pane}”>
<MotionPath property=“x”>
<KeyFrame time=“0” value=“200” />
<KeyFrame time=“150” value=“250” />
<KeyFrame time=“300” value=“400” />
</MotionPath>
<MotionPath property=“baseColor”>
<interpolator>
<HSBInterpolator />
</interpolator>
<KeyFrame time=“0” value=“200” />
<KeyFrame time=“150” value=“250” >
<easer>
<Sine easeInFraction=“.3” />
</easer>
</KeyFrame> More complex,
<KeyFrame time=“300” value=“400” /> powerful than Flex 3
</MotionPath>
</Animate>

Effects and Animation
• Animate different types of transforms with AnimateTransform
• 3Danimations with AnimateTransformMove, AnimateTransformRotate,
AnimateTransformScale
Subclasses of AnimateTransform
• Move, Zoom, Rotate animations
• AnimateShaderTransition

Effects and Animation: Auto-Reversing
• When animations are interrupted, you frequently transition back to the
previous state
• Snap-to-end isn’t always what you want
• This often produces the “flicker” effect between states
• Simple solution:
• <Transition autoReverse=“true”>
• Limitations
• Still need to define both transitions
• Only works when A->B is interrupted by B->A

Containers and Layout
Separating Containers from Layout to make both more powerful

Containers: what’s broken?
• mx.core.Container is the root container in Flex 3
• Extends from UIComponent; complex component lifecycle
• Too many capabilities we don’t need
• scrollbar policies - always turning scroll-bars off
• Rigid layout rules tightly-bound with container’s business logic
• Can’t support our new GraphicElements
• No built-in support for transforms and 3D effects

Containers: Fix it!
• Group
• Lowest level container in Spark framework
• Supports both UIComponents and GraphicElements
• Only the bare essentials:
• Layout (through delegates)
• Containment
• Basic Flash player features (transforms, etc.)
• Introducing “DataGroup:
• The basis of any “List” based container
• Anything that uses ItemRenderers
• Ely: “Repeater done Right”

MXML Graphics: Elements vs. Children
Flex 3 / Halo Flex 4 / Spark
Use the Container Child List Use the Group Elements list
addChild(), removeChild(), etc. addElement(), removeElement(), etc.
All children are UIComponents All elements are UIComponents or
GraphicElements

Layout: what’s broken?
• Layout is intimately tied to containment
• Layout code and container code are tightly coupled
• Very difficult to make lists that CONTAIN objects in the same way DISPLAY them differently
• Example: any ordered container (list) has a single layout available in Flex 3
• DataProviders offered some of the solution; decouple data from
visualization
• Flex 4 abstracts the view a step farther with Layout classes

Layout: Fix it!
• All layout classes extend LayoutBase
• VerticalLayout, HorizontalLayout, TileLayout, BasicLayout (Canvas)
• Basis of layout for all containers, lists, skins, etc.
• The goal: clean layout, easy extension, consistent behavior
• Big difference: layouts can support transforms
• Example: Ryan Campbell’s layout demo
• http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/

Components
Custom and otherwise

Flex Component Lifecycle
• Every component goes through defined phases of its life
• Leverages invalidation for performance
• Defer code execution until a specific time
• Avoids duplicate processing
• Understanding the lifecycle is very important
Image courtesy of Ted Patrick

Flex 3 Component Lifecycle
Construction
Configuration
Birth
Addition
Initialization
Invalidation
Validation Life
Interaction
Removal
Garbage Collection Death

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

Components: Fix it!
• 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

MVC in Button Component
M label:String, selected:Boolean
V text field, icon, background
C mouse handlers, selection logic

Halo
M
C V V
Component Skin (background)

Spark
M
C V
Component Skin (entire view)

Example: Button with Two icons
• Halo
• Extend viewIconForPhase and duplicate logic for new icon ~100 lines
• Extend layoutContents to position/size new icon and position/size existing components so
nothing overlaps
• Requires ActionScript knowledge and understanding of Button component
• Spark
• Copy MXML from default Button Skin
• Add two tags to create two icons
• Adjust position/size of icons and label
• All MXML!

Skin-Component Relationship
M
C V
Component Skin (entire view)

Skin Parts
• 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

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 skin

Data
• Datacan be pushed to a skin part from the component
(recommended)
• or,
data can be pulled from the component by the skin using data-
binding
[HostComponent("spark.components.Button")]
• Pulling can be error-prone and costly
• Pushing promotes encapsulation

Styles
• Colorize
baseColor
color
contentBackgroundColor
symbolColor
rollOverColor
selectionColor
focusColor
• Skins specify which elements are affected by which styles
• Styles are limited because skinning is so easy.

Components: Conclusion
• Not all components have been built as Spark components
• But, Spark extends Halo so both coexist
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
• SkinnableComponent extends UIComponent
• Flex Team working on more Spark components

Any questions?
Andy McIntosh RJ Owen
andy.mcintosh@effectiveui.com rj.owen@effectiveui.com
twitter: andymcintosh twitter: rjowen
www.effectiveui.com
careers@effectiveui.com

Bibliography and More Reading
• Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008
• Mrinal Wadhwa’s talk on Component LifeCycle
http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/
• Ryan Campbell’s blog post on Layout in Flex 4
http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/

page heading
samples!
Some text goes into a paragraph, this is list heading
what it looks like. Some text goes into a
paragraph, this is what it looks like. Some • some text
text goes into a paragraph, this is what it (line 2 indented)
looks like. Some text goes into a paragraph, • goes in a list 3
this is what it looks like. • this is what it
• looks like object
Some text goes into
a paragraph, this is what
it looks like.