Flex 4 Deep Dive

Flex 4 Deep Dive: UI and Dev ,[object Object]

Who are we? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Where’s Juan? ,[object Object],[object Object]

Who are you? ,[object Object],[object Object],[object Object]

What will we talk about? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flex T-Shirt Store Demo ,[object Object]

Changes in 2009 ,[object Object]

What’s new in Flex 4? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],We’ve got our work cut out for us.

Fundamental Changes ,[object Object],Developer Designer Workflow

Fundamental Changes ,[object Object],[object Object],[object Object],Flex 3 Component Model (Halo) Flex 4 Component Model (Spark)

Changes in 2009: Namespaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flex Namespaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Changes in 2009: New Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],<s:Application> <fx:Declarations> <s:HTTPService … /> </fx:Declarations> <s:TextInput … /> … </s:Application>

Changes in 2009: Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Changes in 2009: Advanced Styles ,[object Object],[object Object],[object Object],[object Object],default and tiny are two separate distinct styles!

Changes in 2009: States - what’s broken? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Changes in 2009: States - Fix it! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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>

MXML for Graphics and new Text rendering ,[object Object],[object Object]

MXML Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

MXML Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],GraphicElement Ellipse Line Path Bitmap Image

MXML Graphics: DisplayObject sharing ,[object Object],[object Object],[object Object],Credit where it’s due: Ely Greenfield made this.

MXML Graphics: FXG ,[object Object],[object Object],[object Object],[object Object],[object Object]

Text in Flex 4 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Text in Flex 4: New Text components ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flex 4 Text: Old vs. New ,[object Object],[object Object],[object Object],Based on Flash Text Engine Complex layout and editing support Uses 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)

Effects and Animation ,[object Object]

Effects and Animation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Effects and Animation: Simple Animation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Effects and Animation ,[object Object],[object Object],[object Object],[object Object],[object Object]

Effects and Animation: Auto-Reversing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Containers and Layout ,[object Object]

Containers: what’s broken? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Containers: Fix it! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

MXML Graphics: Elements vs. Children ,[object Object],[object Object],[object Object],Use the Group Elements list addElement(), removeElement(), etc. All elements are UIComponents or GraphicElements Flex 3 / Halo Flex 4 / Spark

Layout: what’s broken? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Layout: Fix it! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Flex Component Lifecycle ,[object Object],[object Object],[object Object],[object Object],[object Object],Image courtesy of Ted Patrick

Flex 3 Component Lifecycle Construction Configuration Addition Initialization Invalidation Validation Interaction Removal Garbage Collection Birth Life Death

Components: what’s broken? ,[object Object],[object Object],[object Object],[object Object]

Components: Fix it! ,[object Object],[object Object],[object Object]

MVC in Button Component label:String, selected:Boolean text field, icon, background mouse handlers, selection logic M V C

Halo Component Skin (background) M V C V

Spark Component Skin (entire view) M C V

Example: Button with Two icons ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Skin-Component Relationship Component Skin (entire view) M C V

Skin Parts ,[object Object],[object Object],[object Object],[object Object],[object Object]

Skin States ,[object Object],[object Object],[object Object],[object Object],[object Object]

Data ,[object Object],[object Object],[object Object],[object Object],[object Object]

Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Components: Conclusion ,[object Object],[object Object],Flex 3 Component Model (Halo) Flex 4 Component Model (Spark) ,[object Object],[object Object]

Any questions? ,[object Object],[object Object],[object Object],Andy McIntosh [email_address] twitter: andymcintosh www.effectiveui.com [email_address] .com

Bibliography and More Reading ,[object Object],[object Object],[object Object],[object Object],[object Object]

page heading ,[object Object],[object Object],[object Object],[object Object],[object Object],Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. Some text goes into a paragraph, this is what it looks like. list heading object Some text goes into a paragraph, this is what it looks like. 3

Flex 4 Deep Dive

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Flex 4 Deep Dive

Semelhante a Flex 4 Deep Dive (20)

Mais de EffectiveUI

Mais de EffectiveUI (20)

Último

Último (20)

Flex 4 Deep Dive