Flex 4 and Components

1
Flex 4 and Components

• Speaker Name

2
Who am I?

1. Senior Technical Architect _at_ EffectiveUI
2. Blogger for InsideRIA
3. Adobe Community Expert in Flex
4. Lead developer on some cool projects for cool
   clients (just like you.)

3
Who are you?

• Software Developers, perhaps Designers
• At CFUnited? Pfffft. Yeah right!
• Some experience in Flex 3?
• Interested in building better interfaces
• Relatively good looking
• Compared to those .NET developers, were
  frickin movie stars in here. Am I right?
  Seriously.

4
What will we talk about today?

• Flex 4 component types
• Flex 4 component life-cycle
• New features of Flex 4 that help w / components
• Credit Im using some stuff from Ely
  Greenfields MAX talk last year

5
Components What are they?

• Contained bits of functionality
• Controls displayed on the screen
• Containers for those controls
• Highly Visual
• Examples Button, ComboBox, List

6
Components whats broken?

1. In Halo (Flex 3), components were rigid
2. Hard to extend
3. Monkey patching to make small changes to
   component view
4. Example HTML text in the panel title bar

7
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

8
Flex 4 fundamental changes to Designer
Developer Workflow
Designer
Developer
Workflow
9
New Designer / Developer Workflow
OMG POWNIES!!
Designer stuff
Developer stuff
OMG POWNIES!!
10
MVC in a button component
labelString, selectedBoolean
text field, icon, background
mouse handlers, selection logic
11
Flex 3 Components (Halo)
Skin (background)
Component
12
Flex 4 Components (Spark)
Skin (entire view)
Component
13
Flex 4 Components and Skins
(its the hue transform in Fireworks.)
14
Skin Parts

• Component specifies optional/required skin parts
  as metadata
• SkinPart(requiredtrue)
• public var labelElementSimpleText
• 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() method

15
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

16
Anatomy of a Button
ButtonBase
Button
ButtonSkin
IconButtonSkin
Icon Button
17
Example icon buttons

• 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
• 2-4 hours, depending on the developer
• Spark
• Copy MXML from default Button Skin
• Add two tags to create two icons
• Adjust position/size of icons and label
• All MXML!
• 1 hour at most!

18
Example Brightkite Cards

1. Everyone loves Twitter try Brightkite
2. Its like Twitter, but creates community around
   places
3. You dont have to be honest so no one will steal
   your information. Calm down.

19
Flex 4 Components are built on Flex 3 Components
UIComponent
Skinnable Component
Flex 4 Component Model (Spark)
Flex 3 Component Model (Halo)
Mrinal Wadhwa gave me the idea for this image and
has a great set of slides for a similar talk on
his blog.
20
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 frame

21
Flex 4 Component Lifecycle

1. Elastic Racetrack
2. The frame-rate of your application varies if
   theres too much processing or rendering

Image courtesy of Ted Patrick
22
Flex 4 Component Lifecycle
Construction
Configuration
Birth
Addition
Initialization
Invalidation
Life
Validation
Interaction
Removal
Death
Garbage Collection
23
Birth Construction

1. Calls your constructor
2. Can access properties and methods of the class,
   but note that children have not been created
   yet!!
3. Must be public, no return type
4. Call super()
5. Not used often in Flex

24
Birth Configuration

1. The process of assigning values to properties on
   objects
2. Containers must not expect children to be added
   yet
3. For optimizaton, make setters fast and DEFER the
   real work until validation (more later)

ltlocalSampleChild property1"value!"/gt
25
Birth Attachment

• Adding a component to the display elements list
• myComponent.addElement()
• Component Lifecycle stalls here until attachment
  really happens

26
Attachment Element Lists

1. Every component on the screen lives in a Display
   List
2. Components are added to display lists
3. Graphical Elements (rectangles, circles, text,
   etc.) are DRAWN into Components
4. Flex 4 lets us treat graphical elements as first
   class citizens (like components)
5. The Elements List abstracts the components
   created to draw graphics for us

27
Attachment Element Lists
28
Birth Initialization

1. Create children, do first validation pass

Component
Skin
Constructor(), commitProperties() loadSkin() Sk
in.hostComponent this addChild(skin) findSkinPar
ts() partAdded() getCurrentSkinState() Measure()/u
pdateDisplayList()/updateComplete
Constructor() Initialize() currentState
commitProperties()/Measure()/updateDisplayList()
/updateComplete
29
Life

1. After initialization, were ready to go
2. The component is added to the screen and
   available to users
3. User interaction should cause changes in
   components set invalidation flags
4. When the next Render event occurs, validation
   methods will be called

30
Life Deferment

1. Deferment is the core concept of the component
   lifecycle!
2. Put off doing the real work until the
   appropriate time
3. Make the most of every frame
4. Example resizing a component

31
Life Deferment

• The invalidation process
• When a property is set, retain the value on a
  private variable
• Set a dirty flag
• Invalidate the Component
• The validation process
• When the framework calls validation methods,
  update your component accordingly
• Example set Text on the TextGraphicElement
  class

32
Life Invalidation

• Invalidation Methods
• Called to invalidate a component, but not do
  any work on it
• invalidateProperties()
• invalidateDisplayList()
• invalidateSize()
• invalidateSkinState()
• Just sets skinChangedtrue
• Calls invalidateProperties()

33
Life Validation

• Do the work that invalidation requires
• Move things, add things, remove things, etc.
• The goal dont duplicate or re-do things in the
  same frame
• validateProperties()
• updateDisplayList()
• measure()

34
Death Removal and GC

1. Any object not on an elements list with no
   active references is eligible for destruction,
   garbage collection
2. The flash player does not reduce its footprint,
   though memory can be recycled

35
Composite Components

1. 98 of the components you make will likely be
   composites of other components
2. This is good, and is the point of having a robust
   component library like Flex to work from.

36
Big Changes in Flex 4

1. Separate Layout from Component Logic
2. FXG - declarative graphics
3. Enhanced Text renderer
4. Updated Styles
5. Updated States

37
Flex 4 Layout

1. Layouts are now applied to Flex groups
2. Allows containment logic and layout logic to be
   separated
3. List is now a very powerful and useful
   container
4. Layout Example

38
FXG

• MXML Graphics library providing rich primitive
  support
• Simple Shape primitives
• Complex Paths
• Full range of fills and strokes
• Masking, filters, blend modes, and more.
• Color and 2D transformations
• Integrated text, bitmaps

39
FXG
ltsGroup id"group1gt ltsGroupgt
ltsPath winding"nonZero" data"M 0 246 L 0 0 L
239 0 L 239 246 L 0 246 Zgt
ltsfillgt ltsLinearGradient x"119.5"
y"246" scaleX"246" rotation"-90"gt
ltsGradientEntry color"0x333333" ratio"0"/gt
ltsGradientEntry color"0x4d4d4d"
ratio"1"/gt lt/sLinearGradientgt
lt/sfillgt lt/sPathgt ltsPath
winding"nonZero data"M 239 1 L 239 ..."gt
ltsfillgt ltsSolidColor
color"0x666666"/gt lt/sfillgt
lt/sPathgt lt/sGroupgt ltsPath
winding"nonZero data"M 61.998..." id"path1"gt
ltsfillgt ltsSolidColor
color"0x262626"/gt lt/sfillgt
lt/sPathgt lt/sGroupgt
40
Graphics and Text

• 1st class citizens
• Dynamic
• Easy to animate with effects, states,
  transitions, code
• Freely mix and match with Spark components
• GraphicElement
• Focused on performance
• optimized for fast rendering, low overhead
• One DisplayObject shared by many GraphicElements
• Important to understand Components are
  DisplayObjects GraphicElements draw into
  DisplayObjects

41
Enhanced Text Renderer

• 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

42
Enhanced Text Renderer

• Benefits
• Soft hyphens (we know youve 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)
• Bi-Directional text
• etc.

43
Styles in Flex 4

• New components have overlapping class names
• New with Flex 4 qualified CSS selectors
• ltStylegt
• _at_namespace s "library//ns.adobe.com/flex/spark
  sButton
• lt/Stylegt
• Required on all type identifiers in CSS
• New syntax 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., sButton above becomes spark.components.But
  ton)

44
Advanced Styles in Flex 4

1. Multiple Class Selectors ltButton idupButton
   styleNamedefault tiny /gt
2. ID Selectors upButton fontSize 14
3. Descendant Selectors sScrollbar upButton
   baseColor FF8888
4. Pseudo Selectors sScrollbar upButtonover
   baseColor 8888FF

45
States what was 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, sometimes we use them, but we hates them.

46
States in Flex 4

• States in Flex 4 are awesome
• Declare your states with a State tag
• Describe alternate views of your markup
• Change values, bindings, event handlers
• Include and exclude components as easily as
  setting visibility
• Unscoped entries specify the default for all
  states
• States can be grouped into State Groups - see
  Flex documentation for more info
• ltfxReparentgt tag to move children between states
• WARNING Use NEW STATES in 2009 documents 2006
  still supports legacy states.

47
States in Flex 4
ltstatesgt ltState namelogin"/gt ltState
nameregister"/gt ltState namesomeOtherState
stateGroupsgroup1/gt lt/statesgt ltGroupgt
ltTextBox textusername /gt ltTextInput /gt
ltTextBox textpassword /gt ltTextInput /gt
ltButton labelnew user? /gt ltCheckbox
includeInregister labelagree to terms /gt
ltButton labellog in label.registersign
up /gtlt/Groupgt
48
Thanks!

• More Resources
• My 360 Flex Talk with Brad Umbaugh on Component
  Lifecycle
• Mrinal Wadhwas blog
• Ryan Campbells blog
• Ely Greenfield Building a Flex Component

RJ Owen rj.owen_at_effectiveui.com Twitter rjowen
www.effectiveui.com