SlideShare a Scribd company logo

Flex 4 Deep Dive

•
•
EffectiveUI
EffectiveUI

by EffectiveUI Senior Developer RJ Owen

Technology
1 of 56
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&quot;/> <State name=”register&quot;/> <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]
Components ,[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

Recommended

Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
Effective
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component Lifecycle
EffectiveUI
 
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
John Head
 
Jmp205 Final
Jmp205 FinalJmp205 Final
Jmp205 Final
akassabov
 
Mxml
MxmlMxml
Mxml
rb4080
 
Bp205
Bp205Bp205
Bp205
John Head
 
APARNA_CHAUDHARY_RESUME_2015
APARNA_CHAUDHARY_RESUME_2015APARNA_CHAUDHARY_RESUME_2015
APARNA_CHAUDHARY_RESUME_2015
Aparna Chaudhary
 
Reasons to migrate from Delphi 7 to Delphi 2009
Reasons to migrate from Delphi 7 to Delphi 2009Reasons to migrate from Delphi 7 to Delphi 2009
Reasons to migrate from Delphi 7 to Delphi 2009
Michael Findling
 

Recommended

Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
Effective
 
Flex4 Component Lifecycle
Flex4 Component LifecycleFlex4 Component Lifecycle
Flex4 Component Lifecycle
EffectiveUI
 
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
JMP205 - Integration of IBM Lotus Notes and Lotus Domino with Microsoft Offic...
John Head
 
Jmp205 Final
Jmp205 FinalJmp205 Final
Jmp205 Final
akassabov
 
Mxml
MxmlMxml
Mxml
rb4080
 
Bp205
Bp205Bp205
Bp205
John Head
 
APARNA_CHAUDHARY_RESUME_2015
APARNA_CHAUDHARY_RESUME_2015APARNA_CHAUDHARY_RESUME_2015
APARNA_CHAUDHARY_RESUME_2015
Aparna Chaudhary
 
Reasons to migrate from Delphi 7 to Delphi 2009
Reasons to migrate from Delphi 7 to Delphi 2009Reasons to migrate from Delphi 7 to Delphi 2009
Reasons to migrate from Delphi 7 to Delphi 2009
Michael Findling
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 Overview
RJ Owen
 
RoboHelp 2002 - overview
RoboHelp 2002 - overviewRoboHelp 2002 - overview
RoboHelp 2002 - overview
Raghuram Pandurangan
 
LotusUserGroup.org Virtual User Group Meeting - The Real World Integration
LotusUserGroup.org Virtual User Group Meeting - The Real World IntegrationLotusUserGroup.org Virtual User Group Meeting - The Real World Integration
LotusUserGroup.org Virtual User Group Meeting - The Real World Integration
John Head
 
Skinning in Flex 4
Skinning in Flex 4Skinning in Flex 4
Skinning in Flex 4
Saurabh Narula
 
Flex vs HTML5
Flex vs HTML5Flex vs HTML5
Flex vs HTML5
Ray Wong
 
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
akassabov
 
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
Rhonda Bracey
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
webre24h
 
Lab1
Lab1Lab1
Lab1
rksrks
 
Epub IDPF update & futures-Garth Conboy
Epub IDPF update & futures-Garth ConboyEpub IDPF update & futures-Garth Conboy
Epub IDPF update & futures-Garth Conboy
Taiwan Digital Publishing Forum
 
Bp309
Bp309Bp309
Bp309
John Head
 
Adobe flex an overview
Adobe flex an overviewAdobe flex an overview
Adobe flex an overview
Subin Sugunan
 
Web engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabusWeb engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabus
NANDINI SHARMA
 
Editing
EditingEditing
Editing
Rhonda Bracey
 
Max 2010: Having Fun Flex4 Layouts
Max 2010: Having Fun Flex4 LayoutsMax 2010: Having Fun Flex4 Layouts
Max 2010: Having Fun Flex4 Layouts
Xavi Beumala
 
Hello Gumbo
Hello GumboHello Gumbo
Hello Gumbo
Xavi Beumala
 
Delphi for PHP “In Action”
Delphi for PHP “In Action”Delphi for PHP “In Action”
Delphi for PHP “In Action”
Embarcadero Technologies
 
Flex 4
Flex 4Flex 4
Flex 4
imatrof
 
Software Freedom Day Cleveland Presentation
Software Freedom Day Cleveland PresentationSoftware Freedom Day Cleveland Presentation
Software Freedom Day Cleveland Presentation
Bob McDonald
 
Transform: DAM: delivering brand communications to the market after the rebra...
Transform: DAM: delivering brand communications to the market after the rebra...Transform: DAM: delivering brand communications to the market after the rebra...
Transform: DAM: delivering brand communications to the market after the rebra...
Communicate Magazine
 
Flex 360 Rules Engine
Flex 360 Rules EngineFlex 360 Rules Engine
Flex 360 Rules Engine
EffectiveUI
 
Light Presentation
Light PresentationLight Presentation
Light Presentation
homesph
 

More Related Content

What's hot

What's hot (19)

Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 Overview
 
RoboHelp 2002 - overview
RoboHelp 2002 - overviewRoboHelp 2002 - overview
RoboHelp 2002 - overview
 
LotusUserGroup.org Virtual User Group Meeting - The Real World Integration
LotusUserGroup.org Virtual User Group Meeting - The Real World IntegrationLotusUserGroup.org Virtual User Group Meeting - The Real World Integration
LotusUserGroup.org Virtual User Group Meeting - The Real World Integration
 
Skinning in Flex 4
Skinning in Flex 4Skinning in Flex 4
Skinning in Flex 4
 
Flex vs HTML5
Flex vs HTML5Flex vs HTML5
Flex vs HTML5
 
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
JMP106 “Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus No...
 
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
Save time and your sanity: Increase your efficiency with Microsoft Word (shor...
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
 
Lab1
Lab1Lab1
Lab1
 
Epub IDPF update & futures-Garth Conboy
Epub IDPF update & futures-Garth ConboyEpub IDPF update & futures-Garth Conboy
Epub IDPF update & futures-Garth Conboy
 
Bp309
Bp309Bp309
Bp309
 
Adobe flex an overview
Adobe flex an overviewAdobe flex an overview
Adobe flex an overview
 
Web engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabusWeb engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabus
 
Editing
EditingEditing
Editing
 
Max 2010: Having Fun Flex4 Layouts
Max 2010: Having Fun Flex4 LayoutsMax 2010: Having Fun Flex4 Layouts
Max 2010: Having Fun Flex4 Layouts
 
Hello Gumbo
Hello GumboHello Gumbo
Hello Gumbo
 
Delphi for PHP “In Action”
Delphi for PHP “In Action”Delphi for PHP “In Action”
Delphi for PHP “In Action”
 
Flex 4
Flex 4Flex 4
Flex 4
 
Software Freedom Day Cleveland Presentation
Software Freedom Day Cleveland PresentationSoftware Freedom Day Cleveland Presentation
Software Freedom Day Cleveland Presentation
 

Viewers also liked

Light Presentation
Light PresentationLight Presentation
Light Presentation
homesph
 
Le papillon des e’toiles
Le papillon des e’toilesLe papillon des e’toiles
Le papillon des e’toiles
guestdfe179
 
Visual Dictionary - Sp10lockset
Visual Dictionary - Sp10locksetVisual Dictionary - Sp10lockset
Visual Dictionary - Sp10lockset
Sp10lockset
 
North korea v
North korea vNorth korea v
North korea v
nevinh
 
RMA-STUDY-POTATO-CHITRAL-NAK
RMA-STUDY-POTATO-CHITRAL-NAKRMA-STUDY-POTATO-CHITRAL-NAK
RMA-STUDY-POTATO-CHITRAL-NAK
Noor Alam Khan
 
LHION Presentation
LHION PresentationLHION Presentation
LHION Presentation
gsbeckles
 
Discussion about trailer
Discussion about trailerDiscussion about trailer
Discussion about trailer
HanaEllis
 
How i used photography, photoshop etc and
How i used photography, photoshop etc andHow i used photography, photoshop etc and
How i used photography, photoshop etc and
HanaEllis
 

Viewers also liked (20)

Transform: DAM: delivering brand communications to the market after the rebra...
Transform: DAM: delivering brand communications to the market after the rebra...Transform: DAM: delivering brand communications to the market after the rebra...
Transform: DAM: delivering brand communications to the market after the rebra...
 
Flex 360 Rules Engine
Flex 360 Rules EngineFlex 360 Rules Engine
Flex 360 Rules Engine
 
Light Presentation
Light PresentationLight Presentation
Light Presentation
 
Le papillon des e’toiles
Le papillon des e’toilesLe papillon des e’toiles
Le papillon des e’toiles
 
Visual Dictionary - Sp10lockset
Visual Dictionary - Sp10locksetVisual Dictionary - Sp10lockset
Visual Dictionary - Sp10lockset
 
445 1
445 1445 1
445 1
 
North korea v
North korea vNorth korea v
North korea v
 
The Hypothetical Session
The Hypothetical SessionThe Hypothetical Session
The Hypothetical Session
 
By the Book: How Great User Experiences in Software Can Impact Government and...
By the Book: How Great User Experiences in Software Can Impact Government and...By the Book: How Great User Experiences in Software Can Impact Government and...
By the Book: How Great User Experiences in Software Can Impact Government and...
 
Analysis
AnalysisAnalysis
Analysis
 
Communicate magazine - Peter Matthews and Francis Preedy
Communicate magazine - Peter Matthews and Francis PreedyCommunicate magazine - Peter Matthews and Francis Preedy
Communicate magazine - Peter Matthews and Francis Preedy
 
Professional Services Snapshot Overview
Professional Services Snapshot OverviewProfessional Services Snapshot Overview
Professional Services Snapshot Overview
 
Flash and Flex in an HTML5 / App Store World
Flash and Flex in an HTML5 / App Store WorldFlash and Flex in an HTML5 / App Store World
Flash and Flex in an HTML5 / App Store World
 
Move to create employment opportunity
Move to create employment opportunityMove to create employment opportunity
Move to create employment opportunity
 
RMA-STUDY-POTATO-CHITRAL-NAK
RMA-STUDY-POTATO-CHITRAL-NAKRMA-STUDY-POTATO-CHITRAL-NAK
RMA-STUDY-POTATO-CHITRAL-NAK
 
LHION Presentation
LHION PresentationLHION Presentation
LHION Presentation
 
Discussion about trailer
Discussion about trailerDiscussion about trailer
Discussion about trailer
 
How i used photography, photoshop etc and
How i used photography, photoshop etc andHow i used photography, photoshop etc and
How i used photography, photoshop etc and
 
About myself
About myselfAbout myself
About myself
 
TARGET_Social &amp; Corporate Responsibility
TARGET_Social &amp; Corporate ResponsibilityTARGET_Social &amp; Corporate Responsibility
TARGET_Social &amp; Corporate Responsibility
 

Similar to Flex 4 Deep Dive

Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!
DevelopmentArc LLC
 
Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)
dcoletta
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
ravinxg
 
Plug-in Architectures
Plug-in ArchitecturesPlug-in Architectures
Plug-in Architectures
elliando dias
 

Similar to Flex 4 Deep Dive (20)

Flex & Drupal Integration
Flex & Drupal IntegrationFlex & Drupal Integration
Flex & Drupal Integration
 
Adobe Flex 4 Overview
Adobe Flex 4 OverviewAdobe Flex 4 Overview
Adobe Flex 4 Overview
 
Better Drupal Interaction Design with Flex
Better Drupal Interaction Design with FlexBetter Drupal Interaction Design with Flex
Better Drupal Interaction Design with Flex
 
Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!Adobe Flex Don't Style It, Skin it!
Adobe Flex Don't Style It, Skin it!
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
Visual Experience 360 Flex
Visual Experience 360 FlexVisual Experience 360 Flex
Visual Experience 360 Flex
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex
 
Flex 3 - Introduction
Flex 3 - IntroductionFlex 3 - Introduction
Flex 3 - Introduction
 
Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)Building Buzzword (Flex Camp Boston 2007)
Building Buzzword (Flex Camp Boston 2007)
 
Buzzword, How'd They Build That?
Buzzword, How'd They Build That?Buzzword, How'd They Build That?
Buzzword, How'd They Build That?
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Flex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex CampFlex 4 Skinning - Nashville Flex Camp
Flex 4 Skinning - Nashville Flex Camp
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
 
Introduction to Flex
Introduction to FlexIntroduction to Flex
Introduction to Flex
 
Plug-in Architectures
Plug-in ArchitecturesPlug-in Architectures
Plug-in Architectures
 
Migrating fx3tofx4
Migrating fx3tofx4Migrating fx3tofx4
Migrating fx3tofx4
 
A Brief Intro to Adobe Flex
A Brief Intro to Adobe FlexA Brief Intro to Adobe Flex
A Brief Intro to Adobe Flex
 
Designer & Developer Work Flow for Flex Builder
Designer & Developer Work Flow for Flex BuilderDesigner & Developer Work Flow for Flex Builder
Designer & Developer Work Flow for Flex Builder
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 

More from EffectiveUI

Design essentials For Executives
Design essentials For ExecutivesDesign essentials For Executives
Design essentials For Executives
EffectiveUI
 
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
EffectiveUI
 
Design Essentials for Developers
Design Essentials for DevelopersDesign Essentials for Developers
Design Essentials for Developers
EffectiveUI
 
Your Mom Has an iPad
Your Mom Has an iPadYour Mom Has an iPad
Your Mom Has an iPad
EffectiveUI
 
The ROI of User Experience:
The ROI of User Experience: The ROI of User Experience:
The ROI of User Experience:
EffectiveUI
 

More from EffectiveUI (20)

Design essentials For Executives
Design essentials For ExecutivesDesign essentials For Executives
Design essentials For Executives
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to Market
 
Design Essentials for Developers 08.31.11
Design Essentials for Developers 08.31.11Design Essentials for Developers 08.31.11
Design Essentials for Developers 08.31.11
 
The Art of Interaction
The Art of InteractionThe Art of Interaction
The Art of Interaction
 
Design Essentials for Developers
Design Essentials for DevelopersDesign Essentials for Developers
Design Essentials for Developers
 
Rails on HBase
Rails on HBaseRails on HBase
Rails on HBase
 
Git for the Android Developer
Git for the Android DeveloperGit for the Android Developer
Git for the Android Developer
 
Microsoft Kinect and Molehill
Microsoft Kinect and MolehillMicrosoft Kinect and Molehill
Microsoft Kinect and Molehill
 
Reasons for Flash: Flash Development in an HTML5 and App Store World
Reasons for Flash: Flash Development in an HTML5 and App Store WorldReasons for Flash: Flash Development in an HTML5 and App Store World
Reasons for Flash: Flash Development in an HTML5 and App Store World
 
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
Discombobulation, Fire-Breathing Dragons and Wet Noodles: Creating Productive...
 
Design Essentials for Developers
Design Essentials for DevelopersDesign Essentials for Developers
Design Essentials for Developers
 
Your Mom Has an iPad
Your Mom Has an iPadYour Mom Has an iPad
Your Mom Has an iPad
 
Human-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital WorldsHuman-Centered Design and the Intersection of the Physical and Digital Worlds
Human-Centered Design and the Intersection of the Physical and Digital Worlds
 
From the Trenches: Building the Accessible Web
From the Trenches: Building the Accessible WebFrom the Trenches: Building the Accessible Web
From the Trenches: Building the Accessible Web
 
Flexerific Visual Effects
Flexerific Visual EffectsFlexerific Visual Effects
Flexerific Visual Effects
 
Test-Driven Development
Test-Driven DevelopmentTest-Driven Development
Test-Driven Development
 
An Opinionated Introduction to Mate
An Opinionated Introduction to MateAn Opinionated Introduction to Mate
An Opinionated Introduction to Mate
 
Diving Deep with the Flex Component Life Cycle
Diving Deep with the Flex Component Life CycleDiving Deep with the Flex Component Life Cycle
Diving Deep with the Flex Component Life Cycle
 
Accessibility in Flex
Accessibility in FlexAccessibility in Flex
Accessibility in Flex
 
The ROI of User Experience:
The ROI of User Experience: The ROI of User Experience:
The ROI of User Experience:
 

Recently uploaded

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Angeliki Cooney
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
 

Recently uploaded (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 

Flex 4 Deep Dive

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. 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.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30. 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
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41. Flex 3 Component Lifecycle Construction Configuration Addition Initialization Invalidation Validation Interaction Removal Garbage Collection Birth Life Death
  • 42.
  • 43.
  • 44. MVC in Button Component label:String, selected:Boolean text field, icon, background mouse handlers, selection logic M V C
  • 45. Halo Component Skin (background) M V C V
  • 46. Spark Component Skin (entire view) M C V
  • 47.
  • 48. Skin-Component Relationship Component Skin (entire view) M C V
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.