Flex 4 and Components - CFUnited

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

                   Speaker Name

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 /

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




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)



                   C       V


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



                                    (entire view)


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
            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();

www.cfunited.com                14
Skin States

A. Defined in the component using metadata
B. Current state is passed to the skin from the
C. All states are required. An exception will be
   thrown if a state is not implemented in the

www.cfunited.com        15
Anatomy of a Button


              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


                                      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
   Methods that make the most of every

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

                   Configuration         Birth

                    Validation           Life

              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

www.cfunited.com                     24
Birth: Attachment

A. Adding a component to the display elements
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(), …
                               loadSkin()    Constructor()

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

 www.cfunited.com                           28

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

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
D. Layout Example

www.cfunited.com       37

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
<s:Group id="group1”>
     <s:Path winding="nonZero"
              data="M 0 246 L 0 0 L 239 0 L 239 246 L 0 246 Z”>
              <s:LinearGradient x="119.5" y="246"
                          scaleX="246" rotation="-90">
                 <s:GradientEntry color="0x333333" ratio="0"/>
                 <s:GradientEntry color="0x4d4d4d" ratio="1"/>
     <s:Path winding="nonZero” data="M 239 1 L 239 ...">
              <s:SolidColor color="0x666666"/>
   <s:Path winding="nonZero” data="M 61.998..." id="path1">
              <s:SolidColor color="0x262626"/>

   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
B.        GraphicElement
           Focused on performance
           optimized for fast rendering, low
           One DisplayObject shared by many
           Important to understand:                       Bitmap
            Components are DisplayObjects
            GraphicElements draw into                      Image
         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
   “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
   @namespace s "library://ns.adobe.com/flex/spark”;
         s|Button {
C.   Required on all type identifiers in CSS
D.   New syntax is global to an application – even in MXML 2006
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
           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
  <State name=”login"/>
  <State name=”register"/>
 <State name=”someOtherState” stateGroups=”group1”/>

  <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” />

   www.cfunited.com                  47

                          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.cfunited.com          48

Shared By: