Flex 4 and Components

1. Flex 4 and Components Speaker Name

2. Who am I? • Senior Technical Architect @ EffectiveUI • Blogger for InsideRIA • Adobe Community Expert in Flex • 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, we’re 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: I’m using some stuff from Ely Greenfield’s 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: 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 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. V M C MVC in a button component label:String, selected:Boolean text field, icon, background mouse handlers, selection logic

11. V V C M Flex 3 Components (Halo) Skin (background) Component

12. V C M Flex 4 Components (Spark) Skin (entire view) Component

13. Flex 4 Components and Skins (it’s the “hue” transform in Fireworks.)

14. 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 • 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 • Everyone loves Twitter – try Brightkite • It’s like Twitter, but creates community around places • You don’t 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 • Elastic Racetrack • The frame-rate of your application varies if there’s 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 • 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

24. Birth: Configuration • The process of assigning values to properties on objects • Containers must not expect children to be added yet • For optimizaton, make setters fast and DEFER the real work until validation (more later) <local:SampleChildproperty1="value!"/>

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 • 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 Components • Flex 4 lets us treat graphical elements as first class citizens (like components) • The Elements List abstracts the components created to draw graphics for us

27. Attachment: Element Lists

28. Birth: Initialization • Create children, do first validation pass Skin Component Constructor(), … commitProperties() loadSkin() Skin.hostComponent = this addChild(skin) findSkinParts() partAdded() getCurrentSkinState() Measure()/updateDisplayList()/updateComplete Constructor() Initialize() currentState = … commitProperties()/Measure()/updateDisplayList()/updateComplete

29. 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

30. Life: Deferment • Deferment is the core concept of the component lifecycle! • Put off doing the “real work” until the appropriate time • Make the most of every frame • 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 skinChanged=true; • Calls invalidateProperties();

33. 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 • validateProperties() • updateDisplayList() • measure()

34. Death: Removal and GC • Any object not on an element’s list with no active references is eligible for destruction, garbage collection • The flash player does not reduce it’s footprint, though memory can be recycled

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

36. Big Changes in Flex 4 • Separate Layout from Component Logic • FXG - declarative graphics • Enhanced Text renderer • Updated Styles • Updated States

37. Flex 4 Layout • Layouts are now applied to Flex groups • Allows containment logic and layout logic to be separated • “List” is now a very powerful and useful container • 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 <s:Group id="group1”> <s:Group> <s:Path winding="nonZero" data="M 0 246 L 0 0 L 239 0 L 239 246 L 0 246 Z”> <s:fill> <s:LinearGradient x="119.5" y="246" scaleX="246" rotation="-90"> <s:GradientEntry color="0x333333" ratio="0"/> <s:GradientEntry color="0x4d4d4d" ratio="1"/> </s:LinearGradient> </s:fill> </s:Path> <s:Path winding="nonZero” data="M 239 1 L 239 ..."> <s:fill> <s:SolidColor color="0x666666"/> </s:fill> </s:Path> </s:Group> <s:Path winding="nonZero” data="M 61.998..." id="path1"> <s:fill> <s:SolidColor color="0x262626"/> </s:fill> </s:Path> </s:Group>

40. Ellipse Line Path Bitmap Image GraphicElement 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 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) • Bi-Directional text • etc.

43. Styles in Flex 4 • 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 • 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., s|Button above becomes spark.components.Button)

44. Advanced Styles in Flex 4 • Multiple Class Selectors: <Button id=“upButton” styleName=“default tiny” /> • ID Selectors: #upButton { fontSize: 14 } • Descendant Selectors: s|Scrollbar #upButton { baseColor: #FF8888 } • Pseudo Selectors: s|Scrollbar #upButton:over { 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 • <fx:Reparent> tag to move children between states • WARNING: Use NEW STATES in 2009 documents – 2006 still supports legacy states.

47. States in Flex 4 <states> <State name=”login"/> <State name=”register"/> <State name=”someOtherState” stateGroups=”group1”/> </states> <Group> <TextBox text=“username:” /> <TextInput /> <TextBox text=“password:” /> <TextInput /> <Button label=“new user?” /> <Checkbox includeIn=“register” label=“agree to terms” /> <Button label=“log in” label.register=“sign up” /></Group>

48. Thanks! • More Resources: • My 360 | Flex Talk with Brad Umbaugh on Component Lifecycle • Mrinal Wadhwa’s blog • Ryan Campbell’s blog • Ely Greenfield: “Building a Flex Component” RJ Owen rj.owen@effectiveui.com Twitter: rjowen www.effectiveui.com