Flex 4 and Components - CFUnited

Document Sample
Flex 4 and Components - CFUnited Powered By Docstoc
					      Flex 4 and Components



                   Speaker Name




www.cfunited.com
Who am I?

A.     Senior Technical Architect @ EffectiveUI
B.     Blogger for InsideRIA
C.     Adobe Community Expert in Flex
D.     Lead developer on some cool projects for
       cool clients (just like you.)




www.cfunited.com          2
Who are you?

A. Software Developers, perhaps Designers
       At CFUnited? Pfffft. Yeah right!


B. Some experience in Flex 3?
C. Interested in building better interfaces
D. Relatively good looking
       Compared to those .NET developers, we’re frickin’ movie stars in here. Am I right? Seriously.




www.cfunited.com                                     3
What will we talk about today?

A. Flex 4 component types
B. Flex 4 component life-cycle
C. New features of Flex 4 that help w /
   components

Credit: I’m using some stuff from Ely Greenfield’s MAX talk last year




www.cfunited.com                      4
Components: What are they?

A.    Contained bits of functionality
B.    Controls displayed on the screen
C.    Containers for those controls
D.    Highly Visual
      Examples: Button, ComboBox, List




www.cfunited.com       5
Components: what’s broken?

A. In Halo (Flex 3), components were rigid
B. Hard to extend
C. “Monkey patching” to make small changes to
   component view
D. Example: HTML text in the panel title bar




www.cfunited.com      6
Flex 4 Components: Issues to address

A. Separate data, logic and behavior from
   visuals, states, animation and layout
B. Create component-logic with no assumption
   about appearance
C. Create component-view without digging into
   the logic




www.cfunited.com      7
Flex 4: fundamental changes to
Designer Developer Workflow

                                 Designer



Developer


                                 Workflow




www.cfunited.com     8
          New Designer / Developer Workflow
                                                    OMG POWNIES!!




                                                              Developer stuff
Designer stuff




                                OMG POWNIES!!
                 www.cfunited.com               9
MVC in a button component


                   M   label:String, selected:Boolean




                   V   text field, icon, background



                   C   mouse handlers, selection logic




www.cfunited.com                    10
Flex 3 Components (Halo)




                       M


                                        V

                   C       V
                                        Skin
                                    (background)


                   Component

www.cfunited.com               11
Flex 4 Components (Spark)




                     M


                                        V

                      C
                                        Skin
                                    (entire view)


                   Component

www.cfunited.com               12
Flex 4 Components and Skins




                              (it’s the “hue” transform in Fireworks.)

www.cfunited.com   13
Skin Parts

A. Component specifies optional/required skin
   parts as metadata
            [SkinPart(required=”true”)]
            public var labelElement:SimpleText;
B. Skin implements skin parts
C. Exception thrown if required part is not found
D. Component should set data on skin parts in
   the setters AND component.partAdded();
   method

www.cfunited.com                14
Skin States

A. Defined in the component using metadata
  [SkinState(“up”)]
  [SkinState(“down”)]
B. Current state is passed to the skin from the
   component
C. All states are required. An exception will be
   thrown if a state is not implemented in the
   skin


www.cfunited.com        15
Anatomy of a Button

           ButtonBase



              Button           ButtonSkin



           Icon Button        IconButtonSkin




www.cfunited.com         16
Example: icon buttons
A.       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
B.       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!
www.cfunited.com                   17
Example: Brightkite Cards

A. Everyone loves Twitter – try Brightkite
B. It’s like Twitter, but creates community
   around places
C. You don’t have to be honest so no one will
   steal your information. Calm down.




www.cfunited.com       18
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.

www.cfunited.com                 19
Flex 4 Component Lifecycle

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


www.cfunited.com      20
Flex 4 Component Lifecycle

A. Elastic Racetrack
B. The frame-rate of your application varies if
   there’s too much processing or rendering




                                  Image courtesy of Ted Patrick

www.cfunited.com        21
Flex 4 Component Lifecycle

                   Construction
                   Configuration         Birth
                     Addition
                   Initialization


                   Invalidation
                    Validation           Life
                    Interaction


                    Removal
                                         Death
              Garbage Collection



www.cfunited.com                    22
Birth: Construction

A. Calls your constructor
B. Can access properties and methods of the
   class, but note that children have not been
   created yet!!
C. Must be public, no return type
D. Call super();
E. Not used often in Flex



www.cfunited.com       23
Birth: Configuration

A. The process of assigning values to properties
   on objects
       <local:SampleChild property1="value!"/>

B. Containers must not expect children to be
   added yet
C. For optimizaton, make setters fast and
   DEFER the real work until validation (more
   later)


www.cfunited.com                     24
Birth: Attachment

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




www.cfunited.com      25
Attachment: Element Lists

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

www.cfunited.com        26
Attachment: Element Lists




www.cfunited.com     27
Birth: Initialization
 A. Create children, do first validation pass
                     Component                    Skin
                        Constructor(), …
                      commitProperties()
                               loadSkin()    Constructor()


               Skin.hostComponent = this
                           addChild(skin)    Initialize()
                          findSkinParts()
                             partAdded()
                    getCurrentSkinState()    currentState = …
   Measure()/updateDisplayList()/update      commitProperties()/Measure()/updateDispla
                             Complete          yList()/updateComplete

 www.cfunited.com                           28
Life

A. After initialization, we’re ready to go
B. The component is added to the screen and
   available to users
C. User interaction should cause changes in
   components – set invalidation flags
D. When the next Render event occurs,
   validation methods will be called



www.cfunited.com      29
Life: Deferment

A. Deferment is the core concept of the
   component lifecycle!
B. Put off doing the “real work” until the
   appropriate time
C. Make the most of every frame
D. Example: resizing a component




www.cfunited.com         30
Life: Deferment
A. The invalidation process:
           When a property is set, retain the value on a
            private variable
           Set a “dirty” flag
           Invalidate the Component
B. The validation process:
           When the framework calls validation methods,
            update your component accordingly
C. Example: set “Text” on the
   TextGraphicElement class

www.cfunited.com                31
Life: Invalidation

A. Invalidation Methods
   Called to “invalidate” a component, but not
     do any work on it
   invalidateProperties()
   invalidateDisplayList()
   invalidateSize()
   invalidateSkinState()
          a) Just sets skinChanged=true;
          b) Calls invalidateProperties();

www.cfunited.com               32
Life: Validation

A. “Do the work” that invalidation requires
B. Move things, add things, remove things, etc.
C. The goal: don’t duplicate or re-do things in
   the same frame
   validateProperties()
   updateDisplayList()
   measure()



www.cfunited.com       33
Death: Removal and GC

A. Any object not on an element’s list with no
   active references is eligible for destruction,
   garbage collection
B. The flash player does not reduce it’s footprint,
   though memory can be recycled




www.cfunited.com        34
Composite Components

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




www.cfunited.com      35
Big Changes in Flex 4

A.     Separate Layout from Component Logic
B.     FXG - declarative graphics
C.     Enhanced Text renderer
D.     Updated Styles
E.     Updated States




www.cfunited.com        36
Flex 4 Layout

A. Layouts are now applied to Flex groups
B. Allows containment logic and layout logic to
   be separated
C. “List” is now a very powerful and useful
   container
D. Layout Example




www.cfunited.com       37
FXG

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


www.cfunited.com      38
 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>

   www.cfunited.com                                   39
     Graphics and Text
A.        1st class citizens
           Dynamic                                 GraphicElement
           Easy to animate with effects, states,
            transitions, code
           Freely mix and match with Spark                Ellipse
            components
B.        GraphicElement
           Focused on performance
                                                            Line
           optimized for fast rendering, low
            overhead
                                                            Path
           One DisplayObject shared by many
            GraphicElements
           Important to understand:                       Bitmap
            Components are DisplayObjects
            GraphicElements draw into                      Image
            DisplayObjects
         www.cfunited.com                      40
Enhanced Text Renderer

A. FTE: New low level text engine (player 10)
   Stands for “Flash Text Engine”
B. 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”




www.cfunited.com                        41
Enhanced Text Renderer

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


www.cfunited.com                     42
Styles in Flex 4

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



www.cfunited.com                              43
Advanced Styles in Flex 4

A. Multiple Class Selectors:
       <Button id=“upButton” styleName=“default tiny” />



B. ID Selectors:
       #upButton { fontSize: 14 }


C. Descendant Selectors:
       s|Scrollbar #upButton { baseColor: #FF8888 }



D. Pseudo Selectors:
       s|Scrollbar #upButton:over { baseColor: #8888FF }

www.cfunited.com                     44
States: what was broken?

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


www.cfunited.com      45
States in Flex 4

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

www.cfunited.com                  46
  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>

   www.cfunited.com                  47
Thanks!

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




www.effectiveui.com
www.cfunited.com          48

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:8/28/2012
language:English
pages:48