1 / 48

Flex 4 and Components

Flex 4 and Components. Speaker Name. 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.). Who are you?. Software Developers, perhaps Designers

Télécharger la présentation

Flex 4 and Components

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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

More Related