Flex 4 Deep Dive: UI and Dev <ul><li>mostly development stuff  | a little bit of design stuff </li></ul>
Who are we? <ul><li>RJ Owen </li></ul><ul><li>Senior Developer at EffectiveUI </li></ul><ul><li>Andy McIntosh </li></ul><u...
Where’s Juan? <ul><li>Juan Sanchez has abandoned the Rocky Mountain Adobe Camp in favor of a relaxing beach vacation. </li...
Who are you? <ul><li>Software designers and developers </li></ul><ul><li>Some Flex experience in Flex 3 </li></ul><ul><li>...
What will we talk about? <ul><li>Today we’ll cover: </li></ul><ul><li>Language updates in Flex 4 </li></ul><ul><li>MXML gr...
Flex T-Shirt Store Demo <ul><li>Built for Adobe R&D team in 2 weeks </li></ul>
Changes in 2009 <ul><li>Some MXML languages changes to support the new features of Flex 4 </li></ul>
What’s new in Flex 4? <ul><li>A lot: </li></ul><ul><li>Spark components </li></ul><ul><li>Skin components, dynamic layout ...
Fundamental Changes <ul><li>Designer / Developer Workflow </li></ul>Developer Designer Workflow
Fundamental Changes <ul><li>Graphics are 1st Tier Citizens </li></ul><ul><li>Flash Catalyst Integration </li></ul><ul><li>...
Changes in 2009: Namespaces <ul><li>Duplicate components = duplicate tags. </li></ul><ul><ul><ul><li>Public outcry over “F...
Flex Namespaces <ul><li>xmlns:fx= “http://ns.adobe.com/mxml/2009 ” </li></ul><ul><ul><li>Language tags (Script, Style, and...
Changes in 2009: New Tags <ul><li><fx:Declarations /> </li></ul><ul><li>A place to stick your stuff </li></ul><ul><li>Anyt...
Changes in 2009: Styles <ul><li>New components have overlapping class names </li></ul><ul><li>New with Flex 4:  qualified ...
Changes in 2009: Advanced Styles <ul><li>Multiple Class Selectors:  <Button id=“upButton” styleName=“default tiny” /> </li...
Changes in 2009: States - what’s broken? <ul><li>States in Flex 3 and below suck </li></ul><ul><ul><li>Overly verbose </li...
Changes in 2009: States - Fix it! <ul><li>States in Flex 4 are awesome </li></ul><ul><ul><li>Declare your states with a ‘S...
MXML for Graphics and new Text rendering <ul><li>Flex 4 provides a declarative graphics language that makes drawing vector...
MXML Graphics <ul><li>MXML Graphics library providing rich primitive support </li></ul><ul><ul><li>Simple Shape primitives...
MXML Graphics: This is ugly, but cool <Graphic> <Path data=“ ….. “> <fill> <LinearGradient angle=“90”>…. </LinearGradient>...
MXML Graphics <ul><li>1st class citizens </li></ul><ul><ul><li>Anything that can be set can be changed  </li></ul></ul><ul...
MXML Graphics: DisplayObject sharing <ul><li>Elements are “Drawn” into a DisplayObject (any Sprite - remember this.graphic...
MXML Graphics: FXG <ul><li>FXG: graphics format based on MXML </li></ul><ul><li>Understood by Design tools </li></ul><ul><...
Text in Flex 4 <ul><li>FTE: New low level text engine (player 10) </li></ul><ul><ul><li>Stands for “Flash Text Engine” </l...
Text in Flex 4: New Text components <ul><li>Spark Introduces 3 new ‘Primitive’ Text components: </li></ul><ul><ul><li>Simp...
Flex 4 Text: Old vs. New <ul><li>Based on TextField </li></ul><ul><li>Simple layout support </li></ul><ul><li>Uses  Define...
Effects and Animation <ul><li>We’re just going to touch on this, but it’s much improved over Flex 3. </li></ul>
Effects and Animation <ul><li>What’s wrong with Flex’s animation now? </li></ul><ul><ul><li>Make use of the new Elements (...
Effects and Animation: Simple Animation <ul><li><Animate target=“{pane}” duration=“300”> </li></ul><ul><li><AnimationPrope...
Effects and Animation: Complex Animation <Animate target=“{pane}”> <MotionPath property=“x”>   <KeyFrame time=“0” value=“2...
Effects and Animation <ul><li>Animate different types of transforms with AnimateTransform </li></ul><ul><li>3D animations ...
Effects and Animation: Auto-Reversing <ul><li>When animations are interrupted, you frequently transition back to the previ...
Containers and Layout <ul><li>Separating Containers from Layout to make both more powerful </li></ul>
Containers: what’s broken? <ul><li>mx.core.Container is the root container in Flex 3 </li></ul><ul><li>Extends from UIComp...
Containers: Fix it! <ul><li>Group </li></ul><ul><ul><li>Lowest level container in Spark framework </li></ul></ul><ul><ul><...
MXML Graphics: Elements vs. Children <ul><li>Use the Container Child List </li></ul><ul><li>addChild(), removeChild(), etc...
Layout: what’s broken? <ul><li>Layout is intimately tied to containment </li></ul><ul><li>Layout code and container code a...
Layout: Fix it! <ul><li>All layout classes extend LayoutBase </li></ul><ul><ul><li>VerticalLayout, HorizontalLayout, TileL...
Components <ul><li>Custom and otherwise </li></ul>
Flex Component Lifecycle <ul><li>Every component goes through defined phases of its life </li></ul><ul><li>Leverages inval...
Flex 3 Component Lifecycle Construction Configuration Addition Initialization Invalidation Validation Interaction Removal ...
Components: what’s broken? <ul><li>In Halo, components were rigid </li></ul><ul><li>Hard to extend </li></ul><ul><li>“ Mon...
Components: Fix it! <ul><li>Separate data, logic and behavior from visuals, states, animation and layout </li></ul><ul><li...
MVC in Button Component label:String, selected:Boolean text field, icon, background mouse handlers, selection logic M V C
Halo Component Skin (background) M V C V
Spark Component Skin (entire view) M C V
Example: Button with Two icons <ul><li>Halo </li></ul><ul><ul><li>Extend viewIconForPhase and duplicate logic for new icon...
Skin-Component Relationship Component Skin (entire view) M C V
Skin Parts <ul><li>Component specifies optional/required skin parts as metadata </li></ul><ul><ul><li>[SkinPart(required=”...
Skin States <ul><li>Defined in the component using metadata </li></ul><ul><ul><li>[SkinState(“up”)] </li></ul></ul><ul><ul...
Data <ul><li>Data can be pushed to a skin part from the component (recommended) </li></ul><ul><li>or, data can be pulled f...
Styles <ul><li>Colorize </li></ul><ul><ul><li>baseColor </li></ul></ul><ul><ul><li>color </li></ul></ul><ul><ul><li>conten...
Components: Conclusion <ul><li>Not all components have been built as Spark components </li></ul><ul><li>But, Spark extends...
Any questions? <ul><li>RJ Owen </li></ul><ul><li>[email_address] </li></ul><ul><li>twitter: rjowen </li></ul>Andy McIntosh...
Bibliography and More Reading <ul><li>Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008 </li></ul><ul><li>Mrin...
page heading <ul><li>samples! </li></ul><ul><li>some text (line 2 indented) </li></ul><ul><li>goes in a list </li></ul><ul...
Upcoming SlideShare
Loading in...5
×

Flex 4 Deep Dive

2,143

Published on

by EffectiveUI Senior Developer RJ Owen

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,143
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Flex 4 Deep Dive

  1. 1. Flex 4 Deep Dive: UI and Dev <ul><li>mostly development stuff | a little bit of design stuff </li></ul>
  2. 2. Who are we? <ul><li>RJ Owen </li></ul><ul><li>Senior Developer at EffectiveUI </li></ul><ul><li>Andy McIntosh </li></ul><ul><li>Experience Architect at EffectiveUI </li></ul><ul><li>Experienced Flex Developers, men in the trenches, the kind of guys who know what it’s like out there. </li></ul>
  3. 3. Where’s Juan? <ul><li>Juan Sanchez has abandoned the Rocky Mountain Adobe Camp in favor of a relaxing beach vacation. </li></ul><ul><li>Let’s all feel bad for Juan, and thank Andy for jumping in at the last second. </li></ul>
  4. 4. Who are you? <ul><li>Software designers and developers </li></ul><ul><li>Some Flex experience in Flex 3 </li></ul><ul><li>Interested in building better interfaces </li></ul>
  5. 5. What will we talk about? <ul><li>Today we’ll cover: </li></ul><ul><li>Language updates in Flex 4 </li></ul><ul><li>MXML graphics and the new Flash Text Engine </li></ul><ul><li>Effects and Animations </li></ul><ul><li>Containers and Layout </li></ul><ul><li>Components, Custom and Otherwise </li></ul><ul><ul><li>Component Lifecycle, Skins </li></ul></ul><ul><li>Credit where it’s due: </li></ul><ul><ul><li>Our talk draws from Ely Greenfield’s “Flex 4 Migration” presentation from Adobe MAX 2008 </li></ul></ul>
  6. 6. Flex T-Shirt Store Demo <ul><li>Built for Adobe R&D team in 2 weeks </li></ul>
  7. 7. Changes in 2009 <ul><li>Some MXML languages changes to support the new features of Flex 4 </li></ul>
  8. 8. What’s new in Flex 4? <ul><li>A lot: </li></ul><ul><li>Spark components </li></ul><ul><li>Skin components, dynamic layout </li></ul><ul><li>FXG - declarative graphics </li></ul><ul><li>Flash Catalyst integration </li></ul><ul><li>Styles are different </li></ul><ul><li>States are different </li></ul><ul><li>“ Groups” vs. “Child Lists”; new container types </li></ul><ul><li>Enhanced Text renderer </li></ul><ul><li>New MXML tags </li></ul><ul><li>Effects and Animation </li></ul><ul><li>Chrome, Scrolling </li></ul><ul><li>Updated component lifestyle, architecture </li></ul><ul><li>Designer / Developer contract </li></ul>We’ve got our work cut out for us.
  9. 9. Fundamental Changes <ul><li>Designer / Developer Workflow </li></ul>Developer Designer Workflow
  10. 10. Fundamental Changes <ul><li>Graphics are 1st Tier Citizens </li></ul><ul><li>Flash Catalyst Integration </li></ul><ul><li>New “Spark” component architecture (old “Halo”) </li></ul>Flex 3 Component Model (Halo) Flex 4 Component Model (Spark)
  11. 11. Changes in 2009: Namespaces <ul><li>Duplicate components = duplicate tags. </li></ul><ul><ul><ul><li>Public outcry over “FxButton” vs. “Button” </li></ul></ul></ul><ul><li>Improved Productivity </li></ul><ul><li>Fix things, tinker with things </li></ul><ul><li>The result: MXML 2009 </li></ul><ul><ul><li>Contains new language features only available in 2009 </li></ul></ul><ul><ul><li>One language namespace per file, but can mix and match per application </li></ul></ul><ul><ul><li>Spark and Halo live side by side in 2009 </li></ul></ul><ul><ul><li>Spark is only intended to be used in 2009 – won’t generally work in 2006 </li></ul></ul>
  12. 12. Flex Namespaces <ul><li>xmlns:fx= “http://ns.adobe.com/mxml/2009 ” </li></ul><ul><ul><li>Language tags (Script, Style, and more) </li></ul></ul><ul><ul><li>Built in types (Array, String, Number, etc) </li></ul></ul><ul><li>xmlns:s=“library://ns.adobe.com/flex/spark” </li></ul><ul><ul><li>All new classes introduced in Flex 4 </li></ul></ul><ul><ul><li>RPC </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><li>xmlns:mx=“library://ns.adobe.com/flex/halo” </li></ul><ul><ul><li>All legacy Halo components </li></ul></ul><ul><ul><li>States, Validators, RPC, etc. </li></ul></ul><ul><ul><li>Anything that was in 2006 </li></ul></ul><ul><li>xmlns:mx=“ http://ns.adobe.com/mxml/2006 ” </li></ul><ul><ul><li>The same as it was in Flex 3 - use this if you’re not going to use 2009 namespaces </li></ul></ul>
  13. 13. Changes in 2009: New Tags <ul><li><fx:Declarations /> </li></ul><ul><li>A place to stick your stuff </li></ul><ul><li>Anything that’s not a visual child of a component belongs here. </li></ul><ul><li>Services, Data Models, singletons…anything that doesn’t show up in your UI ends up here </li></ul><ul><li>Previously ‘stuff’ could just go at the top of the file </li></ul><s:Application> <fx:Declarations> <s:HTTPService … /> </fx:Declarations> <s:TextInput … /> … </s:Application>
  14. 14. Changes in 2009: Styles <ul><li>New components have overlapping class names </li></ul><ul><li>New with Flex 4: qualified CSS selectors </li></ul><ul><ul><ul><li><Style> </li></ul></ul></ul><ul><ul><ul><ul><li>@namespace s &quot;library://ns.adobe.com/flex/spark”; s|Button { } </li></ul></ul></ul></ul><ul><ul><ul><li></Style> </li></ul></ul></ul><ul><li>Required on all type identifiers in CSS </li></ul><ul><li>New syntax is global to an application – even in MXML 2006 documents </li></ul><ul><li>Namespaces are resolved at compile time – at runtime, types are fully qualified classnames </li></ul><ul><ul><li>(i.e., s|Button above becomes spark.components.Button) </li></ul></ul>
  15. 15. Changes in 2009: Advanced Styles <ul><li>Multiple Class Selectors: <Button id=“upButton” styleName=“default tiny” /> </li></ul><ul><li>ID Selectors: #upButton { fontSize: 14 } </li></ul><ul><li>Descendant Selectors: s|Scrollbar #upButton { baseColor: #FF8888 } </li></ul><ul><li>Pseudo Selectors: s|Scrollbar #upButton:over { baseColor: #8888FF } </li></ul>default and tiny are two separate distinct styles!
  16. 16. Changes in 2009: States - what’s broken? <ul><li>States in Flex 3 and below suck </li></ul><ul><ul><li>Overly verbose </li></ul></ul><ul><ul><li>Really awkward to use - AddChild children, RemoveChild children, etc. </li></ul></ul><ul><ul><li>Hard to optimize </li></ul></ul><ul><ul><li>We never ever ever use them. Ever. </li></ul></ul><ul><ul><li>Okay, Andy uses them all the time, but he hates them. </li></ul></ul>
  17. 17. Changes in 2009: States - Fix it! <ul><li>States in Flex 4 are awesome </li></ul><ul><ul><li>Declare your states with a ‘State’ tag </li></ul></ul><ul><ul><li>Describe ‘alternate views’ of your markup </li></ul></ul><ul><ul><li>Change values, bindings, event handlers </li></ul></ul><ul><ul><li>Include and exclude components as easily as setting visibility </li></ul></ul><ul><ul><li>Unscoped entries specify the ‘default’ for all states </li></ul></ul><ul><ul><li>States can be grouped into State Groups - see Flex documentation for more info </li></ul></ul><ul><ul><li><fx:Reparent> tag to move children between states </li></ul></ul><ul><ul><li>WARNING: Use NEW STATES in 2009 documents – 2006 still supports legacy states. </li></ul></ul><states> <State name=”login&quot;/> <State name=”register&quot;/> <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>
  18. 18. MXML for Graphics and new Text rendering <ul><li>Flex 4 provides a declarative graphics language that makes drawing vector art easier (but not really “easy.”) </li></ul><ul><li>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.) </li></ul>
  19. 19. MXML Graphics <ul><li>MXML Graphics library providing rich primitive support </li></ul><ul><ul><li>Simple Shape primitives </li></ul></ul><ul><ul><ul><li>(Rectangles, rounded rects, ellipses, circles) </li></ul></ul></ul><ul><ul><li>Complex Paths </li></ul></ul><ul><ul><ul><li>(Linear, Quadratic, and Bezier curve segments) </li></ul></ul></ul><ul><ul><li>Full range of fills and strokes </li></ul></ul><ul><ul><ul><li>(solid, transparent, bitmap, linear and radial gradients) </li></ul></ul></ul><ul><ul><li>Masking, filters, blend modes, and more. </li></ul></ul><ul><ul><ul><li>(blur, glow, dropshadow, screen, multiply…) </li></ul></ul></ul><ul><ul><li>Color and 2D transformations </li></ul></ul><ul><ul><ul><li>(rotate, scale, tint, brighten…) </li></ul></ul></ul><ul><ul><li>Integrated text, bitmaps </li></ul></ul><ul><li>Anyone heard of “Degrafa?” </li></ul>
  20. 20. 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.
  21. 21. MXML Graphics <ul><li>1st class citizens </li></ul><ul><ul><li>Anything that can be set can be changed </li></ul></ul><ul><ul><li>Easy to animate with effects, states, transitions, code </li></ul></ul><ul><ul><li>Freely mix and match with Spark components </li></ul></ul><ul><li>GraphicElement </li></ul><ul><ul><li>Focused on performance </li></ul></ul><ul><ul><li>optimized for fast rendering, low overhead </li></ul></ul><ul><ul><li>One DisplayObject shared by many GraphicElements </li></ul></ul><ul><ul><li>Important to understand: Components are DisplayObjects GraphicElements draw into DisplayObjects </li></ul></ul>GraphicElement Ellipse Line Path Bitmap Image
  22. 22. MXML Graphics: DisplayObject sharing <ul><li>Elements are “Drawn” into a DisplayObject (any Sprite - remember this.graphics.draw from Flex 3?) </li></ul><ul><li>DisplayObjects are shared to optimize rendering, memory, performance, etc. </li></ul><ul><li>Sharing can be affected by Rotation, Scale, 3D, BlendModes, Alpha, Filters, siblings </li></ul>Credit where it’s due: Ely Greenfield made this.
  23. 23. MXML Graphics: FXG <ul><li>FXG: graphics format based on MXML </li></ul><ul><li>Understood by Design tools </li></ul><ul><li>Based on flash rendering model. </li></ul><ul><li>Static – no binding, layout, event handlers, styling, etc. </li></ul><ul><li>Optimized by compiler </li></ul>
  24. 24. Text in Flex 4 <ul><li>FTE: New low level text engine (player 10) </li></ul><ul><ul><li>Stands for “Flash Text Engine” </li></ul></ul><ul><li>TLF: New text layout library built on top of FTE. </li></ul><ul><ul><li>“ Text Library for Flash?” </li></ul></ul><ul><ul><li>Might also stand for “Totally Like Fireballs”,“Typical Lightning Flamboyance” or “Tumultuous Latex Fusion” </li></ul></ul><ul><li>Benefits: </li></ul><ul><ul><li>Soft hyphens (we know you’ve all been missing those!) </li></ul></ul><ul><ul><li>Baseline control (e.g., superscripts and subscripts) </li></ul></ul><ul><ul><li>Right, center, and decimal tabs </li></ul></ul><ul><ul><li>Vertical justification </li></ul></ul><ul><ul><li>Multiple columns </li></ul></ul><ul><ul><li>Ligatures, capitalization styles, digit styles </li></ul></ul><ul><ul><li>Integrated Rendering of device fonts (a.k.a. I can fade and rotate my text FINALLY) </li></ul></ul><ul><ul><li>Bi-Directional text </li></ul></ul><ul><ul><li>etc. </li></ul></ul>
  25. 25. Text in Flex 4: New Text components <ul><li>Spark Introduces 3 new ‘Primitive’ Text components: </li></ul><ul><ul><li>SimpleText (Label, sorta) </li></ul></ul><ul><ul><li>RichText (Text, sorta) </li></ul></ul><ul><ul><ul><ul><li>careful - these do NOT extend UIComponent!! </li></ul></ul></ul></ul><ul><ul><li>RichEditableText (editable TextField) </li></ul></ul><ul><li>2 new skinnable text Spark components (based on the primitives): </li></ul><ul><ul><li>TextInput </li></ul></ul><ul><ul><li>TextArea </li></ul></ul><ul><ul><ul><li>(Creatively named identically to the current components.) </li></ul></ul></ul>
  26. 26. Flex 4 Text: Old vs. New <ul><li>Based on TextField </li></ul><ul><li>Simple layout support </li></ul><ul><li>Uses DefineFont3 embedded fonts </li></ul>Based on Flash Text Engine Complex layout and editing support Uses DefineFont4 embedded fonts Flex 3 / Halo Flex 4 / Spark An important note: embedded fonts can’t be shared. (Adobe is working on resolving this issue)
  27. 27. Effects and Animation <ul><li>We’re just going to touch on this, but it’s much improved over Flex 3. </li></ul>
  28. 28. Effects and Animation <ul><li>What’s wrong with Flex’s animation now? </li></ul><ul><ul><li>Make use of the new Elements (graphics) </li></ul></ul><ul><ul><li>Designed for more advanced tools (i.e. Flast Catalyst) </li></ul></ul><ul><ul><li>More Flexible </li></ul></ul><ul><li>Animate </li></ul><ul><ul><li>Animates arbitrary targets (GraphicElements and more) </li></ul></ul><ul><ul><li>Animates arbitrary types (floats, integers, colors, vectors, paths) </li></ul></ul><ul><ul><li>Animates along arbitrary motion paths </li></ul></ul><ul><ul><li>Auto-reversing behavior for mirroring transitions (easy fix for “flickering” animations) </li></ul></ul><ul><ul><li>Precision timing for executing compound transitions </li></ul></ul>
  29. 29. Effects and Animation: Simple Animation <ul><li><Animate target=“{pane}” duration=“300”> </li></ul><ul><li><AnimationProperty property=“x” </li></ul><ul><ul><ul><ul><ul><li>valueFrom=“200” valueTo=“400” /> </li></ul></ul></ul></ul></ul><ul><li><AnimationProperty property=“y” </li></ul><ul><ul><ul><ul><ul><li>valueFrom=“200” valueTo=“400” /> </li></ul></ul></ul></ul></ul><ul><li></Animate> </li></ul>
  30. 30. 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> <KeyFrame time=“300” value=“400” /> </MotionPath> </Animate> More complex, powerful than Flex 3
  31. 31. Effects and Animation <ul><li>Animate different types of transforms with AnimateTransform </li></ul><ul><li>3D animations with AnimateTransformMove, AnimateTransformRotate, AnimateTransformScale </li></ul><ul><ul><li>Subclasses of AnimateTransform </li></ul></ul><ul><li>Move, Zoom, Rotate animations </li></ul><ul><li>AnimateShaderTransition </li></ul>
  32. 32. Effects and Animation: Auto-Reversing <ul><li>When animations are interrupted, you frequently transition back to the previous state </li></ul><ul><li>Snap-to-end isn’t always what you want </li></ul><ul><ul><li>This often produces the “flicker” effect between states </li></ul></ul><ul><li>Simple solution: </li></ul><ul><ul><li><Transition autoReverse=“true”> </li></ul></ul><ul><li>Limitations </li></ul><ul><ul><li>Still need to define both transitions </li></ul></ul><ul><ul><li>Only works when A->B is interrupted by B->A </li></ul></ul>
  33. 33. Containers and Layout <ul><li>Separating Containers from Layout to make both more powerful </li></ul>
  34. 34. Containers: what’s broken? <ul><li>mx.core.Container is the root container in Flex 3 </li></ul><ul><li>Extends from UIComponent; complex component lifecycle </li></ul><ul><li>Too many capabilities we don’t need </li></ul><ul><ul><li>scrollbar policies - always turning scroll-bars off </li></ul></ul><ul><li>Rigid layout rules tightly-bound with container’s business logic </li></ul><ul><li>Can’t support our new GraphicElements </li></ul><ul><li>No built-in support for transforms and 3D effects </li></ul>
  35. 35. Containers: Fix it! <ul><li>Group </li></ul><ul><ul><li>Lowest level container in Spark framework </li></ul></ul><ul><ul><li>Supports both UIComponents and GraphicElements </li></ul></ul><ul><ul><li>Only the bare essentials: </li></ul></ul><ul><ul><ul><li>Layout (through delegates) </li></ul></ul></ul><ul><ul><ul><li>Containment </li></ul></ul></ul><ul><ul><ul><li>Basic Flash player features (transforms, etc.) </li></ul></ul></ul><ul><li>Introducing “DataGroup: </li></ul><ul><ul><li>The basis of any “List” based container </li></ul></ul><ul><ul><li>Anything that uses ItemRenderers </li></ul></ul><ul><ul><li>Ely: “Repeater done Right” </li></ul></ul><ul><li>In Spark, everything displayable resides in a Group </li></ul>
  36. 36. MXML Graphics: Elements vs. Children <ul><li>Use the Container Child List </li></ul><ul><li>addChild(), removeChild(), etc. </li></ul><ul><li>All children are UIComponents </li></ul>Use the Group Elements list addElement(), removeElement(), etc. All elements are UIComponents or GraphicElements Flex 3 / Halo Flex 4 / Spark
  37. 37. Layout: what’s broken? <ul><li>Layout is intimately tied to containment </li></ul><ul><li>Layout code and container code are tightly coupled </li></ul><ul><ul><li>Very difficult to make lists that CONTAIN objects in the same way DISPLAY them differently </li></ul></ul><ul><ul><li>Example: any ordered container (list) has a single layout available in Flex 3 </li></ul></ul><ul><li>DataProviders offered some of the solution; decouple data from visualization </li></ul><ul><li>Flex 4 abstracts the view a step farther with Layout classes </li></ul>
  38. 38. Layout: Fix it! <ul><li>All layout classes extend LayoutBase </li></ul><ul><ul><li>VerticalLayout, HorizontalLayout, TileLayout, BasicLayout (Canvas) </li></ul></ul><ul><li>Basis of layout for all containers, lists, skins, etc. </li></ul><ul><li>The goal: clean layout, easy extension, consistent behavior </li></ul><ul><li>Big difference: layouts can support transforms </li></ul><ul><li>Example: Ryan Campbell’s layout demo </li></ul><ul><ul><li>http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/ </li></ul></ul>
  39. 39. Components <ul><li>Custom and otherwise </li></ul>
  40. 40. Flex Component Lifecycle <ul><li>Every component goes through defined phases of its life </li></ul><ul><li>Leverages invalidation for performance </li></ul><ul><ul><li>Defer code execution until a specific time </li></ul></ul><ul><ul><li>Avoids duplicate processing </li></ul></ul><ul><li>Understanding the lifecycle is very important </li></ul>Image courtesy of Ted Patrick
  41. 41. Flex 3 Component Lifecycle Construction Configuration Addition Initialization Invalidation Validation Interaction Removal Garbage Collection Birth Life Death
  42. 42. Components: what’s broken? <ul><li>In Halo, components were rigid </li></ul><ul><li>Hard to extend </li></ul><ul><li>“ Monkey patching” to make small changes to component view </li></ul><ul><li>Example: HTML text in the panel title bar </li></ul>
  43. 43. Components: Fix it! <ul><li>Separate data, logic and behavior from visuals, states, animation and layout </li></ul><ul><li>Create component-logic with no assumption about appearance </li></ul><ul><li>Create component-view without digging into the logic </li></ul>
  44. 44. MVC in Button Component label:String, selected:Boolean text field, icon, background mouse handlers, selection logic M V C
  45. 45. Halo Component Skin (background) M V C V
  46. 46. Spark Component Skin (entire view) M C V
  47. 47. Example: Button with Two icons <ul><li>Halo </li></ul><ul><ul><li>Extend viewIconForPhase and duplicate logic for new icon ~100 lines </li></ul></ul><ul><ul><li>Extend layoutContents to position/size new icon and position/size existing components so nothing overlaps </li></ul></ul><ul><ul><li>Requires ActionScript knowledge and understanding of Button component </li></ul></ul><ul><li>Spark </li></ul><ul><ul><li>Copy MXML from default Button Skin </li></ul></ul><ul><ul><li>Add two tags to create two icons </li></ul></ul><ul><ul><li>Adjust position/size of icons and label </li></ul></ul><ul><ul><li>All MXML! </li></ul></ul>
  48. 48. Skin-Component Relationship Component Skin (entire view) M C V
  49. 49. Skin Parts <ul><li>Component specifies optional/required skin parts as metadata </li></ul><ul><ul><li>[SkinPart(required=”true”)] </li></ul></ul><ul><ul><li>public var labelElement:SimpleText; </li></ul></ul><ul><li>Skin implements skin parts </li></ul><ul><li>Exception thrown if required part is not found </li></ul>
  50. 50. Skin States <ul><li>Defined in the component using metadata </li></ul><ul><ul><li>[SkinState(“up”)] </li></ul></ul><ul><ul><li>[SkinState(“down”)] </li></ul></ul><ul><li>Current state is passed to the skin from the component </li></ul><ul><li>All states are required. An exception will be thrown if a state is not implemented in the skin </li></ul>
  51. 51. Data <ul><li>Data can be pushed to a skin part from the component (recommended) </li></ul><ul><li>or, data can be pulled from the component by the skin using data-binding </li></ul><ul><ul><li>[HostComponent(&quot;spark.components.Button&quot;)] </li></ul></ul><ul><li>Pulling can be error-prone and costly </li></ul><ul><li>Pushing promotes encapsulation </li></ul>
  52. 52. Styles <ul><li>Colorize </li></ul><ul><ul><li>baseColor </li></ul></ul><ul><ul><li>color </li></ul></ul><ul><ul><li>contentBackgroundColor </li></ul></ul><ul><ul><li>symbolColor </li></ul></ul><ul><ul><li>rollOverColor </li></ul></ul><ul><ul><li>selectionColor </li></ul></ul><ul><ul><li>focusColor </li></ul></ul><ul><li>Skins specify which elements are affected by which styles </li></ul><ul><li>Styles are limited because skinning is so easy. </li></ul>
  53. 53. Components: Conclusion <ul><li>Not all components have been built as Spark components </li></ul><ul><li>But, Spark extends Halo so both coexist </li></ul>Flex 3 Component Model (Halo) Flex 4 Component Model (Spark) <ul><li>SkinnableComponent extends UIComponent </li></ul><ul><li>Flex Team working on more Spark components </li></ul>
  54. 54. Any questions? <ul><li>RJ Owen </li></ul><ul><li>[email_address] </li></ul><ul><li>twitter: rjowen </li></ul>Andy McIntosh [email_address] twitter: andymcintosh www.effectiveui.com [email_address] .com
  55. 55. Bibliography and More Reading <ul><li>Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008 </li></ul><ul><li>Mrinal Wadhwa’s talk on Component LifeCycle </li></ul><ul><ul><li>http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/ </li></ul></ul><ul><li>Ryan Campbell’s blog post on Layout in Flex 4 </li></ul><ul><ul><li>http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/ </li></ul></ul>
  56. 56. page heading <ul><li>samples! </li></ul><ul><li>some text (line 2 indented) </li></ul><ul><li>goes in a list </li></ul><ul><li>this is what it </li></ul><ul><li>looks like </li></ul>Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. list heading object Some text goes into a paragraph, this is what it looks like. 3

×