Flex 4 Overview

54
Flex 4 Deep Dive: UI and Dev mostly development stuff | a little bit of design stuff

description

An overview of the changes in Adobe Flex 4. Includes a description of component architecture methods and updates to the Flex 4 feature set and component life-cycle.

Transcript of Flex 4 Overview

Page 1: Flex 4 Overview

Flex 4 Deep Dive: UI and Devmostly development stuff | a little bit of design stuff

Page 2: Flex 4 Overview

Who are we?• RJ Owen• Senior Developer at EffectiveUI

• Andy McIntosh• Experience Architect at EffectiveUI

• Experienced Flex Developers, men in the trenches, the kind of guys who know what it’s like out there.

Page 3: Flex 4 Overview

Where’s Juan?• Juan Sanchez has abandoned the Rocky Mountain Adobe Camp in favor of a relaxing beach vacation.

• Let’s all feel bad for Juan, and thank Andy for jumping in at the last second.

Page 4: Flex 4 Overview

Who are you?• Software designers and developers• Some Flex experience in Flex 3• Interested in building better interfaces

Page 5: Flex 4 Overview

What will we talk about?• Today we’ll cover:• Language updates in Flex 4• MXML graphics and the new Flash Text Engine• Effects and Animations• Containers and Layout• Components, Custom and Otherwise

• Component Lifecycle, Skins

• Credit where it’s due:•Our talk draws from Ely Greenfield’s “Flex 4 Migration” presentation from Adobe MAX 2008

Page 6: Flex 4 Overview

Flex T-Shirt Store DemoBuilt for Adobe R&D team in 2 weeks

Page 7: Flex 4 Overview

Changes in 2009Some MXML languages changes to support the new features of Flex 4

Page 8: Flex 4 Overview

What’s new in Flex 4?

• A lot:• Spark components• Skin components, dynamic layout• FXG - declarative graphics• Flash Catalyst integration• Styles are different• States are different• “Groups” vs. “Child Lists”; new container types• Enhanced Text renderer• New MXML tags• Effects and Animation• Chrome, Scrolling• Updated component lifestyle, architecture• Designer / Developer contract

We’ve got our work cut out for us.

Page 9: Flex 4 Overview

Fundamental Changes• Designer / Developer Workflow

Developer

Designer

Workflow

Page 10: Flex 4 Overview

Fundamental Changes• Graphics are 1st Tier Citizens• Flash Catalyst Integration• New “Spark” component architecture (old “Halo”)

Flex 3 Component Model (Halo)

Flex 4 Component Model (Spark)

Page 11: Flex 4 Overview

Changes in 2009: Namespaces• Duplicate components = duplicate tags.Public outcry over “FxButton” vs. “Button”

• Improved Productivity• Fix things, tinker with things• The result: MXML 2009Contains new language features only available in 2009

One language namespace per file, but can mix and match per application

Spark and Halo live side by side in 2009

Spark is only intended to be used in 2009 – won’t generally work in 2006

Page 12: Flex 4 Overview

Flex Namespaces• xmlns:fx=“http://ns.adobe.com/mxml/2009”Language tags (Script, Style, and more)

Built in types (Array, String, Number, etc)

• xmlns:s=“library://ns.adobe.com/flex/spark”All new classes introduced in Flex 4

RPC

Graphics

• xmlns:mx=“library://ns.adobe.com/flex/halo”All legacy Halo components

States, Validators, RPC, etc.

Anything that was in 2006

• xmlns:mx=“http://ns.adobe.com/mxml/2006”The same as it was in Flex 3 - use this if you’re not going to use 2009 namespaces

Page 13: Flex 4 Overview

Changes in 2009: New Tags

<fx:Declarations />

•A place to stick your stuff

•Anything that’s not a visual child of a component belongs here.

•Services, Data Models, singletons…anything that doesn’t show up in your UI ends up here

•Previously ‘stuff’ could just go at the top of the file

<s:Application> <fx:Declarations> <s:HTTPService … /> </fx:Declarations>

<s:TextInput … /> …</s:Application>

Page 14: Flex 4 Overview

Changes in 2009: Styles• 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)

Page 15: Flex 4 Overview

Changes in 2009: Advanced Styles• 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 }

default and tiny are two separate distinct styles!

Page 16: Flex 4 Overview

Changes in 2009: States - what’s 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, Andy uses them all the time, but he hates them.

Page 17: Flex 4 Overview

Changes in 2009: States - Fix it!

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

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

Page 18: Flex 4 Overview

MXML for Graphics and new Text renderingFlex 4 provides a declarative graphics language that makes drawing vector art easier (but not really “easy.”)

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

Page 19: Flex 4 Overview

MXML Graphics• MXML Graphics library providing rich primitive supportSimple Shape primitives

(Rectangles, rounded rects, ellipses, circles)

Complex Paths

(Linear, Quadratic, and Bezier curve segments)

Full range of fills and strokes

(solid, transparent, bitmap, linear and radial gradients)

Masking, filters, blend modes, and more.

(blur, glow, dropshadow, screen, multiply…)

Color and 2D transformations

(rotate, scale, tint, brighten…)

Integrated text, bitmaps

• Anyone heard of “Degrafa?”

Page 20: Flex 4 Overview

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.

Page 21: Flex 4 Overview

MXML Graphics

• 1st class citizensAnything that can be set can be changed

Easy to animate with effects, states, transitions, code

Freely mix and match with Spark components

• GraphicElementFocused on performance

optimized for fast rendering, low overhead

One DisplayObject shared by many GraphicElements

Important to understand: Components are DisplayObjectsGraphicElements draw into DisplayObjects

GraphicElement

Ellipse

Line

Path

Bitmap Image

Page 22: Flex 4 Overview

MXML Graphics: DisplayObject sharing

• Elements are “Drawn” into a DisplayObject (any Sprite - remember this.graphics.draw from Flex 3?)

• DisplayObjects are shared to optimize rendering, memory, performance, etc.

• Sharing can be affected by Rotation, Scale, 3D, BlendModes, Alpha, Filters, siblings Credit where it’s due: Ely Greenfield

made this.

Page 23: Flex 4 Overview

MXML Graphics: FXG• FXG: graphics format based on MXML

• Understood by Design tools• Based on flash rendering model.

• Static – no binding, layout, event handlers, styling, etc.

• Optimized by compiler

Page 24: Flex 4 Overview

Text in Flex 4• 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”

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

Page 25: Flex 4 Overview

Text in Flex 4: New Text components• Spark Introduces 3 new ‘Primitive’ Text components:SimpleText (Label, sorta)

RichText (Text, sorta)

careful - these do NOT extend UIComponent!!

RichEditableText (editable TextField)

• 2 new skinnable text Spark components (based on the primitives):

TextInput

TextArea

(Creatively named identically to the current components.)

Page 26: Flex 4 Overview

Flex 4 Text: Old vs. New

Based on TextFieldSimple layout support

Uses DefineFont3 embedded fonts

Based on Flash Text EngineComplex layout and editing supportUses 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)

Page 27: Flex 4 Overview

Effects and AnimationWe’re just going to touch on this, but it’s much improved over Flex 3.

Page 28: Flex 4 Overview

Effects and Animation• What’s wrong with Flex’s animation now?Make use of the new Elements (graphics)

Designed for more advanced tools (i.e. Flast Catalyst)

More Flexible

• AnimateAnimates arbitrary targets (GraphicElements and more)

Animates arbitrary types (floats, integers, colors, vectors, paths)

Animates along arbitrary motion paths

Auto-reversing behavior for mirroring transitions (easy fix for “flickering” animations)

Precision timing for executing compound transitions

Page 29: Flex 4 Overview

Effects and Animation: Simple Animation

<Animate target=“{pane}” duration=“300”> <AnimationProperty property=“x”

valueFrom=“200” valueTo=“400” /> <AnimationProperty property=“y”

valueFrom=“200” valueTo=“400” /></Animate>

Page 30: Flex 4 Overview

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

Page 31: Flex 4 Overview

Effects and Animation: Auto-Reversing• When animations are interrupted, you frequently transition back to the previous state

• Snap-to-end isn’t always what you want• This often produces the “flicker” effect between states

• Simple solution:• <Transition autoReverse=“true”>

• Limitations• Still need to define both transitions

• Only works when A->B is interrupted by B->A

Page 32: Flex 4 Overview

Containers and LayoutSeparating Containers from Layout to make both more powerful

Page 33: Flex 4 Overview

Containers: what’s broken?• mx.core.Container is the root container in Flex 3• Extends from UIComponent; complex component lifecycle• Too many capabilities we don’t need

• scrollbar policies - always turning scroll-bars off

• Rigid layout rules tightly-bound with container’s business logic

• Can’t support our new GraphicElements• No built-in support for transforms and 3D effects

Page 34: Flex 4 Overview

Containers: Fix it!• Group

• Lowest level container in Spark framework

• Supports both UIComponents and GraphicElements

• Only the bare essentials:

• Layout (through delegates)

• Containment

• Basic Flash player features (transforms, etc.)

• Introducing “DataGroup:• The basis of any “List” based container

• Anything that uses ItemRenderers

• Ely: “Repeater done Right”

• In Spark, everything displayable resides in a Group

Page 35: Flex 4 Overview

MXML Graphics: Elements vs. Children

Use the Container Child ListaddChild(), removeChild(), etc.All children are UIComponents

Use the Group Elements listaddElement(), removeElement(), etc.

All elements are UIComponents or GraphicElements

Flex 3 / Halo Flex 4 / Spark

Page 36: Flex 4 Overview

Layout: what’s broken?• Layout is intimately tied to containment• Layout code and container code are tightly coupled

• Very difficult to make lists that CONTAIN objects in the same way DISPLAY them differently

• Example: any ordered container (list) has a single layout available in Flex 3

• DataProviders offered some of the solution; decouple data from visualization

• Flex 4 abstracts the view a step farther with Layout classes

Page 37: Flex 4 Overview

Layout: Fix it!• All layout classes extend LayoutBase

• VerticalLayout, HorizontalLayout, TileLayout, BasicLayout (Canvas)

• Basis of layout for all containers, lists, skins, etc.• The goal: clean layout, easy extension, consistent behavior• Big difference: layouts can support transforms• Example: Ryan Campbell’s layout demo

• http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/

Page 38: Flex 4 Overview

ComponentsCustom and otherwise

Page 39: Flex 4 Overview

Flex Component Lifecycle• Every component goes through defined phases of its life• Leverages invalidation for performance

• Defer code execution until a specific time

• Avoids duplicate processing

• Understanding the lifecycle is very important

Image courtesy of Ted Patrick

Page 40: Flex 4 Overview

Flex 3 Component Lifecycle

Construction

Configuration

Addition

Initialization

Invalidation

Validation

Interaction

Removal

Garbage Collection

Birth

Life

Death

Page 41: Flex 4 Overview

Components: what’s broken?• In Halo, components were rigid• Hard to extend• “Monkey patching” to make small changes to component view• Example: HTML text in the panel title bar

Page 42: Flex 4 Overview

Components: Fix it!• 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

Page 43: Flex 4 Overview

MVC in Button Component

label:String, selected:Boolean

text field, icon, background

mouse handlers, selection logic

MM

VV

CC

Page 44: Flex 4 Overview

Halo

MM

VVCC VV

Component Skin (background)

Page 45: Flex 4 Overview

Spark

MM

CC VV

Component Skin (entire view)

Page 46: Flex 4 Overview

Example: Button with Two icons• 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

• Spark• Copy MXML from default Button Skin

• Add two tags to create two icons

• Adjust position/size of icons and label

• All MXML!

Page 47: Flex 4 Overview

Skin-Component Relationship

MM

CC VV

Component Skin (entire view)

Page 48: Flex 4 Overview

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

Page 49: Flex 4 Overview

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

Page 50: Flex 4 Overview

Data• Data can be pushed to a skin part from the component (recommended)

• or, data can be pulled from the component by the skin using data-binding

[HostComponent("spark.components.Button")]

• Pulling can be error-prone and costly• Pushing promotes encapsulation

Page 51: Flex 4 Overview

Styles• ColorizebaseColor

color

contentBackgroundColor

symbolColor

rollOverColor

selectionColor

focusColor

• Skins specify which elements are affected by which styles• Styles are limited because skinning is so easy.

Page 52: Flex 4 Overview

Components: Conclusion• Not all components have been built as Spark components• But, Spark extends Halo so both coexist

Flex 3 Component Model (Halo)

Flex 4 Component Model (Spark)

• SkinnableComponent extends UIComponent• Flex Team working on more Spark components

Page 54: Flex 4 Overview

Bibliography and More Reading• Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008• Mrinal Wadhwa’s talk on Component LifeCyclehttp://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/

• Ryan Campbell’s blog post on Layout in Flex 4http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/