268 RJOwen Flex Components Advanced

7/27/2019 268 RJOwen Flex Components Advanced

1/48

www.cfunited.com

Flex 4 and Components

Speaker Name


2/48

2www.cfunited.com

Who am I?

A. Senior Technical Architect @ EffectiveUIB. Blogger for InsideRIAC. Adobe Community Expert in FlexD. Lead developer on some cool projects for

cool clients (just like you.)


3/48

3www.cfunited.com

Who are you?

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

B. Some experience in Flex 3?

C. Interested in building better interfacesD. Relatively good looking

Compared to those .NET developers, we re frickin movie stars in here. Am I right? Seriously.


4/48

4www.cfunited.com

What will we talk about today?

A. Flex 4 component typesB. Flex 4 component life-cycleC. New features of Flex 4 that help w /

components

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


5/48


6/48


7/48

7www.cfunited.com

Flex 4 Components: Issues to address

A. Separate data, logic and behavior fromvisuals, states, animation and layout

B. Create component-logic with no assumptionabout appearance

C. Create component-view without digging intothe logic


8/48

8www.cfunited.com

Flex 4: fundamental changes toDesigner Developer Workflow

Designer

Developer

Workflow


9/48

9www.cfunited.com

New Designer / Developer Workflow

OMG POWNIES!!

OMG POWNIES!!

D e s

i g n e r s

t u f f

D e v e

l o p e r s

t u f f


10/48


11/48

11www.cfunited.com

Flex 3 Components (Halo)

M

VC

Component

Skin(background)

V


12/48

12www.cfunited.com

Flex 4 Components (Spark)

M

C

Component

Skin(entire view)

V


13/48


14/48

14www.cfunited.com

Skin Parts

A. Component specifies optional/required skinparts as metadata

[SkinPart(required=true)]

public var labelElement:SimpleText;B. Skin implements skin partsC. Exception thrown if required part is not found

D. Component should set data on skin parts inthe setters AND component.partAdded();method


15/48

15www.cfunited.com

Skin States

A. Defined in the component using metadata[SkinState(up)] [SkinState(down)]

B. Current state is passed to the skin from thecomponent

C. All states are required. An exception will be

thrown if a state is not implemented in theskin


16/48

16www.cfunited.com

Anatomy of a Button

ButtonBase

Button

Icon Button

ButtonSkin

IconButtonSkin


17/48

17www.cfunited.com

Example: icon buttons

A. HaloExtend viewIconForPhase and duplicate logic for new icon~100 linesExtend layoutContents to position/size new icon andposition/size existing components so nothing overlaps

Requires ActionScript knowledge and understanding of Button component2-4 hours, depending on the developer

B. SparkCopy 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/48

18www.cfunited.com

Example: Brightkite Cards

A. Everyone loves Twitter try BrightkiteB. It s like Twitter, but creates community

around placesC. You don t have to be honest so no one will

steal your information. Calm down.


19/48

19www.cfunited.com

Flex 4 Components are built on Flex 3Components

Flex 3 Component Model (Halo)

Flex 4 Component Model (Spark)

Mrinal Wadhwa gave me the idea for this image and has a great set of slidesfor a similar talk on his blog.

UIComponent

Skinnable Component
http://weblog.mrinalwadhwa.com/2009/06/12/flex-4-component-lifecycle-2/http://weblog.mrinalwadhwa.com/2009/06/12/flex-4-component-lifecycle-2/


20/48

20www.cfunited.com

Flex 4 Component Lifecycle

A. What is it?The way the framework interacts withevery Flex component

A set of methods the framework calls toinstantiate, control, and destroycomponents

Methods that make the most of everyframe


21/48

21www.cfunited.com

Flex 4 Component Lifecycle

A. Elastic RacetrackB. The frame-rate of your application varies if

there s too much processing or rendering

Image courtesy of Ted Patrick


22/48


23/48


24/48

24www.cfunited.com

Birth: Configuration

A. The process of assigning values to propertieson objects

B. Containers must not expect children to beadded yet

C. For optimizaton, make setters fast and

DEFER the real work until validation (morelater)


25/48


26/48

26www.cfunited.com

Attachment: Element Lists

A. Every component on the screen lives in aDisplay List

B. Components are added to display listsC. Graphical Elements (rectangles, circles, text,

etc.) are DRAWN into ComponentsD. 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


27/48

27www.cfunited.com

Attachment: Element Lists


28/48

28www.cfunited.com

Birth: Initialization

A. Create children, do first validation pass

Constructor(),

commitProperties()

loadSkin()

Skin.hostComponent = this

addChild(skin)

findSkinParts()

partAdded()

getCurrentSkinState()

Measure()/updateDisplayList()/updateComplete

Constructor()

Initialize()

currentState =

commitProperties()/Measure()/updateDisplayList()/updateComplete

Component Skin


29/48

29www.cfunited.com

Life

A. After initialization, we re ready to go B. The component is added to the screen and

available to usersC. User interaction should cause changes in

components set invalidation flagsD. When the next Render event occurs,

validation methods will be called


30/48

30www.cfunited.com

Life: Deferment

A. Deferment is the core concept of thecomponent lifecycle!

B. Put off doing the real work until theappropriate time

C. Make the most of every frameD. Example: resizing a component


31/48


32/48

32www.cfunited.com

Life: Invalidation

A. Invalidation MethodsCalled to invalidate a component, but notdo any work on itinvalidateProperties()invalidateDisplayList()invalidateSize()

invalidateSkinState()a) Just sets skinChanged=true;b) Calls invalidateProperties();


33/48

33www.cfunited.com

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 framevalidateProperties()updateDisplayList()

measure()


34/48

34www.cfunited.com

Death: Removal and GC

A. Any object not on an element s list with noactive references is eligible for destruction,garbage collection

B. The flash player does not reduce it s footprint,though memory can be recycled


35/48

35www.cfunited.com

Composite Components

A. 98% of the components you make will likelybe composites of other components

B. This is good, and is the point of having arobust component library like Flex to workfrom.


36/48


37/48


38/48

38www.cfunited.com

FXG

A. MXML Graphics library providing richprimitive support

Simple Shape primitivesComplex PathsFull range of fills and strokesMasking, filters, blend modes, and more.

Color and 2D transformationsIntegrated text, bitmaps


39/48

39www.cfunited.com

FXG


40/48


41/48

41www.cfunited.com

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 LightningFlamboyance or Tumultuous Latex Fusion


42/48

42www.cfunited.com

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 tabsVertical justificationMultiple columnsLigatures, capitalization styles, digit stylesIntegrated Rendering of device fonts (a.k.a. I can fade and

rotate my text FINALLY)Bi-Directional textetc.


43/48

43www.cfunited.com

Styles in Flex 4

A. New components have overlapping class namesB. New with Flex 4: qualified CSS selectors

@namespace s "library://ns.adobe.com/flex/spark; s|Button {

}

C. Required on all type identifiers in CSSD. New syntax is global to an application even in MXML 2006

documents

E. Namespaces are resolved at compile time at runtime, typesare fully qualified classnames(i.e., s|Button above becomes spark.components.Button)


44/48


45/48

45www.cfunited.com

States: what was broken?

A. States in Flex 3 and below suckOverly verboseReally awkward to use - AddChild children,RemoveChild children, etc.Hard to optimizeWe never ever ever use them. Ever.

Okay, sometimes we use them, but wehates them.


46/48

46www.cfunited.com

States in Flex 4

A. States in Flex 4 are awesomeDeclare your states with a State tag Describe alternate views of your markup Change values, bindings, event handlersInclude and exclude components as easily as settingvisibilityUnscoped entries specify the default for all states States can be grouped into State Groups - see Flex

documentation for more info tag to move children between statesWARNING: Use NEW STATES in 2009 documents 2006still supports legacy states.


47/48

47www.cfunited.com

States in Flex 4


48/48

Thanks!

RJ [email protected] Twitter: rjowen

www.effectiveui.com

More Resources:My 360 | Flex Talk with Brad Umbaugh onComponent Lifecycle

Mrinal Wadhwa s blog

Ryan Campbell s blog

Ely Greenfield: Building a Flex Component
mailto:[email protected]://www.effectiveui.com/http://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentationhttp://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentationhttp://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/http://www.onflex.org/ACDS/BuildingAFlexComponent.pdfhttp://www.onflex.org/ACDS/BuildingAFlexComponent.pdfhttp://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/http://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentationhttp://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentationhttp://www.effectiveui.com/mailto:[email protected]

268 RJOwen Flex Components Advanced

Documents

Transcript of 268 RJOwen Flex Components Advanced