SlideShare a Scribd company logo

Flex 4 Overview

Download as PPT, PDF
RJ Owen, profile picture
RJ Owen

The document discusses Adobe Flex 4, focusing on developments in UI and development, highlighting key updates such as the introduction of Spark components, enhancements in MXML graphics and the new Flash Text Engine. It contrasts the old Halo component model with the new Spark architecture, outlining improvements in animation, layout, and component lifecycle management. The presentation emphasizes the significance of designer/developer workflows and provides insights into the 2009 changes in MXML language features and styling.

TechnologyBusiness
1 of 56
Downloaded 398 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Flex 4 Deep Dive: UI and Dev mostly development stuff | a little bit of design stuff
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.
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.
Who are you? • Software designers and developers • Some Flex experience in Flex 3 • Interested in building better interfaces
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
Flex T-Shirt Store Demo Built for Adobe R&D team in 2 weeks
Changes in 2009 Some MXML languages changes to support the new features of Flex 4
What’s new in Flex 4? •A lot: • • Spark components Skin components, dynamic layout We’ve got our FXG - declarative graphics work cut out • • Flash Catalyst integration for us. • 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
Fundamental Changes • Designer / Developer Workflow Designer Developer Workflow
Fundamental Changes • Graphics are 1st Tier Citizens • Flash Catalyst Integration • New “Spark” component architecture (old “Halo”) Flex 4 Component Model (Spark) Flex 3 Component Model (Halo)
Changes in 2009: Namespaces • Duplicate components = duplicate tags. Public outcry over “FxButton” vs. “Button” • Improved Productivity • Fix things, tinker with things • The result: MXML 2009 Contains 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
Flex Namespaces •x m ln s : f x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 9 ” Language tags (Script, Style, and more) Built in types (Array, String, Number, etc) •x m ln s : s = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / s p a r k ” All new classes introduced in Flex 4 RPC Graphics •x m ln s : m x = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / h a lo ” All legacy Halo components States, Validators, RPC, etc. Anything that was in 2006 •x m ln s : m x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 6 ” The same as it was in Flex 3 - use this if you’re not going to use 2009 namespaces
Changes in 2009: New Tags < f x : D e c la r a t io n s / > •A p la c e t o s t ic k y o u r <s:Application> s tuff <fx:Declarations> •A n <s:HTTPService … /> y t h in g t h a t ’ s n o t a </fx:Declarations> v is u a l c h ild o f a c o m p o n e n t b e lo n g s h e r e . <s:TextInput … /> … •S e r v ic e s , D a t a M o d e ls , </s:Application> s i n g l e t o n s …a n y t h i n g t h a t d o e s n ’ t s h o w u p in y o u r UI end s up here
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 • Newsyntax 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)
Changes in 2009: Advanced Styles • Multiple Class Selectors: <Button id=“upButton” styleName=“default tiny” /> • ID Selectors: default and tiny are two #upButton { fontSize: 14 } separate distinct styles! • Descendant Selectors: s|Scrollbar #upButton { baseColor: #FF8888 } • Pseudo Selectors: s|Scrollbar #upButton:over { baseColor: #8888FF }
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.
Changes in 2009: States - Fix it! • States <states> in Flex 4 are awesome <State name=”login"/> • Declare your states with a ‘State’ tag <State name=”register"/> <State name=”someOtherState” stateGroups=”group1”/> • Describe ‘alternate views’ of your markup </states> • Change values, bindings, event handlers <Group> • Include and exclude components as easily as <TextBox text=“username:” /> setting visibility <TextInput /> <TextBox text=“password:” /> • Unscoped entries specify the ‘default’ for all states <TextInput /> • States can be grouped into State Groups - see <Button label=“new user?” /> Flex documentation for more info <Checkbox includeIn=“register” label=“agree to terms” /> <Button label=“log in” label.register=“sign up” /> • <fx:Reparent> tag to move children between </Group> states • W A R N IN G : U s e N E W S TA T E S in 2 0 0 9 d o c u m e n t s – 2 0 0 6 s t ill s u p p o r t s le g a c y s t a t e s .
MXML for Graphics and new Text rendering Flex 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.)
MXML Graphics • MXML Graphics library providing rich primitive support Simple 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
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 • 1st class citizens G r a p h ic E le m e n Anything that can be set can be changed t Easy to animate with effects, states, transitions, code Freely mix and match with Spark components E llip s e • GraphicElement Focused on performance L in e optimized for fast rendering, low overhead One DisplayObject shared by many GraphicElements P a th Important to understand: Components are DisplayObjects GraphicElements draw into DisplayObjects B it m a p Im a g e
MXML Graphics: DisplayObject sharing • Elements are “Drawn” into a DisplayObject (any Sprite - remember this.graphics.draw from Flex 3?) • DisplayObjectsare shared to optimize rendering, memory, performance, etc. • Sharingcan be affected by Rotation, Scale, 3D, Credit where it’s due: Ely Greenfield made this.
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
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)
Text in Flex 4: New Text components • Spark Introduces 3 new ‘Primitive’ Text components: SimpleText (Label, sorta) RichText (Text, sorta) c a r e f u l - t h e s e d o N O T e x t e n d U IC o m p o n e n t !! RichEditableText (editable TextField) •2 new skinnable text Spark components (based on the primitives): TextInput TextArea (Creatively named identically to the current components.)
Flex 4 Text: Old vs. New Flex 3 / Halo Flex 4 / Spark Based on TextField Based on Flash Text Engine Simple layout support Complex layout and editing support Uses D e f in e F o n t 3 Uses D e f in e F o n t 4 embedded embedded fonts fonts An important note: embedded fonts can’t be shared. (Adobe is working on resolving this issue)
Effects and Animation We’re just going to touch on this, but it’s much improved over Flex 3.
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 • Animate Animates 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
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>
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> More complex, <KeyFrame time=“300” value=“400” /> powerful than Flex 3 </MotionPath> </Animate>
Effects and Animation • Animate different types of transforms with AnimateTransform • 3Danimations with AnimateTransformMove, AnimateTransformRotate, AnimateTransformScale Subclasses of AnimateTransform • Move, Zoom, Rotate animations • AnimateShaderTransition
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
Containers and Layout Separating Containers from Layout to make both more powerful
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
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”
MXML Graphics: Elements vs. Children Flex 3 / Halo Flex 4 / Spark Use the Container Child List Use the Group Elements list addChild(), removeChild(), etc. addElement(), removeElement(), etc. All children are UIComponents All elements are UIComponents or GraphicElements
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
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/
Components Custom and otherwise
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
Flex 3 Component Lifecycle Construction Configuration Birth Addition Initialization Invalidation Validation Life Interaction Removal Garbage Collection Death
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
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
MVC in Button Component M label:String, selected:Boolean V text field, icon, background C mouse handlers, selection logic
Halo M C V V Component Skin (background)
Spark M C V Component Skin (entire view)
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!
Skin-Component Relationship M C V Component Skin (entire view)
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
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
Data • Datacan 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
Styles • Colorize baseColor color contentBackgroundColor symbolColor rollOverColor selectionColor focusColor • Skins specify which elements are affected by which styles • Styles are limited because skinning is so easy.
Components: Conclusion • Not all components have been built as Spark components • But, Spark extends Halo so both coexist Flex 4 Component Model (Spark) Flex 3 Component Model (Halo) • SkinnableComponent extends UIComponent • Flex Team working on more Spark components
Any questions? Andy McIntosh RJ Owen andy.mcintosh@effectiveui.com rj.owen@effectiveui.com twitter: andymcintosh twitter: rjowen www.effectiveui.com careers@effectiveui.com
Bibliography and More Reading • Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008 • Mrinal Wadhwa’s talk on Component LifeCycle http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/ • Ryan Campbell’s blog post on Layout in Flex 4 http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/
page heading samples! Some text goes into a paragraph, this is list heading what it looks like. Some text goes into a paragraph, this is what it looks like. Some • some text text goes into a paragraph, this is what it (line 2 indented) looks like. Some text goes into a paragraph, • goes in a list 3 this is what it looks like. • this is what it • looks like object Some text goes into a paragraph, this is what it looks like.

More Related Content

PPT
Adobe flex an overview
Subin Sugunan
 
ODP
Better Drupal Interaction Design with Flex
Chris Charlton
 
ZIP
A Brief Intro to Adobe Flex
Chad Udell
 
PPT
Apache Flex: Overview
Tarun Telang
 
PPT
Flex vs HTML5
Ray Wong
 
PPTX
Open Source examples from Adobe : Oscon kiosk
Dave McAllister
 
PDF
Cloud Apache OpenOffice based on HTML5
pescetti
 
PPT
Flex & Drupal Integration
Matthew Connerton
 
Adobe flex an overview
Subin Sugunan
 
Better Drupal Interaction Design with Flex
Chris Charlton
 
A Brief Intro to Adobe Flex
Chad Udell
 
Apache Flex: Overview
Tarun Telang
 
Flex vs HTML5
Ray Wong
 
Open Source examples from Adobe : Oscon kiosk
Dave McAllister
 
Cloud Apache OpenOffice based on HTML5
pescetti
 
Flex & Drupal Integration
Matthew Connerton
 

What's hot (17)

PPT
Flex vs. HTML5 for RIAS
Pamela Fox
 
PPT
Opening the mobile web mozilla and firefox os-chit thiri maung
Chit Thiri Maung
 
PDF
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
Frank Wienberg
 
PPTX
AIR - Framework ( Cairngorm and Parsley )
senthil0809
 
PPT
RIA Development via Adobe Flex + JRuby on Rails
kamal.fariz
 
PPT
Flex And Ria
ravinxg
 
PPT
Adobe® Flex™
Uday Shankar
 
PPT
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Eric Fickes
 
PDF
Silverlight - What Is It And How Can We Use It
Venketash (Pat) Ramadass
 
PDF
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
PPT
Silverlight
BiTWiSE
 
PPT
Flex_Basic_Training
guest25cec3
 
PPT
Ria Development With Flex And PHP
John Coggeshall
 
PPTX
Architecting WPF Applications
Paul Stovell
 
PPT
Buzzword, How'd They Build That?
dcoletta
 
PPT
Introduction to silver light
jayc8586
 
PPT
Silverlight Framework Architecture By Satyen
Satyen Pandya
 
Flex vs. HTML5 for RIAS
Pamela Fox
 
Opening the mobile web mozilla and firefox os-chit thiri maung
Chit Thiri Maung
 
PLASTIC 2011: "Enterprise JavaScript with Jangaroo"
Frank Wienberg
 
AIR - Framework ( Cairngorm and Parsley )
senthil0809
 
RIA Development via Adobe Flex + JRuby on Rails
kamal.fariz
 
Flex And Ria
ravinxg
 
Adobe® Flex™
Uday Shankar
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Eric Fickes
 
Silverlight - What Is It And How Can We Use It
Venketash (Pat) Ramadass
 
Building Desktop RIAs with PHP, HTML & Javascript in AIR
funkatron
 
Silverlight
BiTWiSE
 
Flex_Basic_Training
guest25cec3
 
Ria Development With Flex And PHP
John Coggeshall
 
Architecting WPF Applications
Paul Stovell
 
Buzzword, How'd They Build That?
dcoletta
 
Introduction to silver light
jayc8586
 
Silverlight Framework Architecture By Satyen
Satyen Pandya
 
Ad

Similar to Flex 4 Overview (20)

PPT
Flex 4 Deep Dive
Effective
 
PPT
Flex 4 Deep Dive
EffectiveUI
 
KEY
Migrating fx3tofx4
Jonathan Campos
 
PPT
Introduction to flex
Parambir Singh
 
PDF
A Look at Flex and PHP
elliando dias
 
PPT
Adobe Flex 4 Overview
Craig Dickson
 
PDF
A Look At Flex And Php
Michael Girouard
 
PDF
Moving from AS3 to Flex - advantages, hazards, traps
Florian Weil
 
PPT
Flex 3 - Introduction
rakhtar
 
PPT
Skinning in Flex 4
Saurabh Narula
 
PDF
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Skills Matter
 
PPTX
Basics of Flex Components, Skinning
Yukti Kaura
 
PDF
Mxml
rb4080
 
PDF
Visual Experience 360 Flex
Juan Sanchez
 
PDF
Silverlight 4
Supote Phunsakul
 
PPTX
Exploring Adobe Flex
senthil0809
 
PDF
Programming Flex 2 Chafic Kazoun Joey Lott
mogilciprawq
 
PPTX
Flex 4
imatrof
 
PDF
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
PDF
Flex4 Component Lifecycle
EffectiveUI
 
Flex 4 Deep Dive
Effective
 
Flex 4 Deep Dive
EffectiveUI
 
Migrating fx3tofx4
Jonathan Campos
 
Introduction to flex
Parambir Singh
 
A Look at Flex and PHP
elliando dias
 
Adobe Flex 4 Overview
Craig Dickson
 
A Look At Flex And Php
Michael Girouard
 
Moving from AS3 to Flex - advantages, hazards, traps
Florian Weil
 
Flex 3 - Introduction
rakhtar
 
Skinning in Flex 4
Saurabh Narula
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Skills Matter
 
Basics of Flex Components, Skinning
Yukti Kaura
 
Mxml
rb4080
 
Visual Experience 360 Flex
Juan Sanchez
 
Silverlight 4
Supote Phunsakul
 
Exploring Adobe Flex
senthil0809
 
Programming Flex 2 Chafic Kazoun Joey Lott
mogilciprawq
 
Flex 4
imatrof
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
Flex4 Component Lifecycle
EffectiveUI
 
Ad

More from RJ Owen (7)

PDF
Moral Design (Denver Startup Week)
RJ Owen
 
PDF
Moral designfinal
RJ Owen
 
PDF
Flex4 component lifecycle
RJ Owen
 
PPT
Obey The Rules: Implementing a Rules Engine in Flex
RJ Owen
 
PDF
Adobe Flex 3 Component Life Cycle
RJ Owen
 
PPT
Flex3 Deep Dive Final
RJ Owen
 
PDF
Adobe Flex Component Lifecycle
RJ Owen
 
Moral Design (Denver Startup Week)
RJ Owen
 
Moral designfinal
RJ Owen
 
Flex4 component lifecycle
RJ Owen
 
Obey The Rules: Implementing a Rules Engine in Flex
RJ Owen
 
Adobe Flex 3 Component Life Cycle
RJ Owen
 
Flex3 Deep Dive Final
RJ Owen
 
Adobe Flex Component Lifecycle
RJ Owen
 

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
Approach and Philosophy of On baking technology
30anthuong17
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Teaching material agriculture food technology
LiaRayya
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 

Flex 4 Overview

  • 1. Flex 4 Deep Dive: UI and Dev mostly development stuff | a little bit of design stuff
  • 2. 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.
  • 3. 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.
  • 4. Who are you? • Software designers and developers • Some Flex experience in Flex 3 • Interested in building better interfaces
  • 5. 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
  • 6. Flex T-Shirt Store Demo Built for Adobe R&D team in 2 weeks
  • 7. Changes in 2009 Some MXML languages changes to support the new features of Flex 4
  • 8. What’s new in Flex 4? •A lot: • • Spark components Skin components, dynamic layout We’ve got our FXG - declarative graphics work cut out • • Flash Catalyst integration for us. • 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
  • 9. Fundamental Changes • Designer / Developer Workflow Designer Developer Workflow
  • 10. Fundamental Changes • Graphics are 1st Tier Citizens • Flash Catalyst Integration • New “Spark” component architecture (old “Halo”) Flex 4 Component Model (Spark) Flex 3 Component Model (Halo)
  • 11. Changes in 2009: Namespaces • Duplicate components = duplicate tags. Public outcry over “FxButton” vs. “Button” • Improved Productivity • Fix things, tinker with things • The result: MXML 2009 Contains 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
  • 12. Flex Namespaces •x m ln s : f x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 9 ” Language tags (Script, Style, and more) Built in types (Array, String, Number, etc) •x m ln s : s = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / s p a r k ” All new classes introduced in Flex 4 RPC Graphics •x m ln s : m x = “ lib r a r y :/ / n s . a d o b e . c o m / f le x / h a lo ” All legacy Halo components States, Validators, RPC, etc. Anything that was in 2006 •x m ln s : m x = “ h t t p :/ / n s . a d o b e . c o m / m x m l / 2 0 0 6 ” The same as it was in Flex 3 - use this if you’re not going to use 2009 namespaces
  • 13. Changes in 2009: New Tags < f x : D e c la r a t io n s / > •A p la c e t o s t ic k y o u r <s:Application> s tuff <fx:Declarations> •A n <s:HTTPService … /> y t h in g t h a t ’ s n o t a </fx:Declarations> v is u a l c h ild o f a c o m p o n e n t b e lo n g s h e r e . <s:TextInput … /> … •S e r v ic e s , D a t a M o d e ls , </s:Application> s i n g l e t o n s …a n y t h i n g t h a t d o e s n ’ t s h o w u p in y o u r UI end s up here
  • 14. 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 • Newsyntax 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)
  • 15. Changes in 2009: Advanced Styles • Multiple Class Selectors: <Button id=“upButton” styleName=“default tiny” /> • ID Selectors: default and tiny are two #upButton { fontSize: 14 } separate distinct styles! • Descendant Selectors: s|Scrollbar #upButton { baseColor: #FF8888 } • Pseudo Selectors: s|Scrollbar #upButton:over { baseColor: #8888FF }
  • 16. 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.
  • 17. Changes in 2009: States - Fix it! • States <states> in Flex 4 are awesome <State name=”login"/> • Declare your states with a ‘State’ tag <State name=”register"/> <State name=”someOtherState” stateGroups=”group1”/> • Describe ‘alternate views’ of your markup </states> • Change values, bindings, event handlers <Group> • Include and exclude components as easily as <TextBox text=“username:” /> setting visibility <TextInput /> <TextBox text=“password:” /> • Unscoped entries specify the ‘default’ for all states <TextInput /> • States can be grouped into State Groups - see <Button label=“new user?” /> Flex documentation for more info <Checkbox includeIn=“register” label=“agree to terms” /> <Button label=“log in” label.register=“sign up” /> • <fx:Reparent> tag to move children between </Group> states • W A R N IN G : U s e N E W S TA T E S in 2 0 0 9 d o c u m e n t s – 2 0 0 6 s t ill s u p p o r t s le g a c y s t a t e s .
  • 18. MXML for Graphics and new Text rendering Flex 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.)
  • 19. MXML Graphics • MXML Graphics library providing rich primitive support Simple 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
  • 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. MXML Graphics • 1st class citizens G r a p h ic E le m e n Anything that can be set can be changed t Easy to animate with effects, states, transitions, code Freely mix and match with Spark components E llip s e • GraphicElement Focused on performance L in e optimized for fast rendering, low overhead One DisplayObject shared by many GraphicElements P a th Important to understand: Components are DisplayObjects GraphicElements draw into DisplayObjects B it m a p Im a g e
  • 22. MXML Graphics: DisplayObject sharing • Elements are “Drawn” into a DisplayObject (any Sprite - remember this.graphics.draw from Flex 3?) • DisplayObjectsare shared to optimize rendering, memory, performance, etc. • Sharingcan be affected by Rotation, Scale, 3D, Credit where it’s due: Ely Greenfield made this.
  • 23. 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
  • 24. 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)
  • 25. Text in Flex 4: New Text components • Spark Introduces 3 new ‘Primitive’ Text components: SimpleText (Label, sorta) RichText (Text, sorta) c a r e f u l - t h e s e d o N O T e x t e n d U IC o m p o n e n t !! RichEditableText (editable TextField) •2 new skinnable text Spark components (based on the primitives): TextInput TextArea (Creatively named identically to the current components.)
  • 26. Flex 4 Text: Old vs. New Flex 3 / Halo Flex 4 / Spark Based on TextField Based on Flash Text Engine Simple layout support Complex layout and editing support Uses D e f in e F o n t 3 Uses D e f in e F o n t 4 embedded embedded fonts fonts An important note: embedded fonts can’t be shared. (Adobe is working on resolving this issue)
  • 27. Effects and Animation We’re just going to touch on this, but it’s much improved over Flex 3.
  • 28. 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 • Animate Animates 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
  • 29. 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>
  • 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> More complex, <KeyFrame time=“300” value=“400” /> powerful than Flex 3 </MotionPath> </Animate>
  • 31. Effects and Animation • Animate different types of transforms with AnimateTransform • 3Danimations with AnimateTransformMove, AnimateTransformRotate, AnimateTransformScale Subclasses of AnimateTransform • Move, Zoom, Rotate animations • AnimateShaderTransition
  • 32. 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
  • 33. Containers and Layout Separating Containers from Layout to make both more powerful
  • 34. 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
  • 35. 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”
  • 36. MXML Graphics: Elements vs. Children Flex 3 / Halo Flex 4 / Spark Use the Container Child List Use the Group Elements list addChild(), removeChild(), etc. addElement(), removeElement(), etc. All children are UIComponents All elements are UIComponents or GraphicElements
  • 37. 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
  • 38. 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/
  • 40. 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
  • 41. Flex 3 Component Lifecycle Construction Configuration Birth Addition Initialization Invalidation Validation Life Interaction Removal Garbage Collection Death
  • 42. 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
  • 43. 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
  • 44. MVC in Button Component M label:String, selected:Boolean V text field, icon, background C mouse handlers, selection logic
  • 45. Halo M C V V Component Skin (background)
  • 46. Spark M C V Component Skin (entire view)
  • 47. 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!
  • 48. Skin-Component Relationship M C V Component Skin (entire view)
  • 49. 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
  • 50. 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
  • 51. Data • Datacan 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
  • 52. Styles • Colorize baseColor color contentBackgroundColor symbolColor rollOverColor selectionColor focusColor • Skins specify which elements are affected by which styles • Styles are limited because skinning is so easy.
  • 53. Components: Conclusion • Not all components have been built as Spark components • But, Spark extends Halo so both coexist Flex 4 Component Model (Spark) Flex 3 Component Model (Halo) • SkinnableComponent extends UIComponent • Flex Team working on more Spark components
  • 54. Any questions? Andy McIntosh RJ Owen andy.mcintosh@effectiveui.com rj.owen@effectiveui.com twitter: andymcintosh twitter: rjowen www.effectiveui.com careers@effectiveui.com
  • 55. Bibliography and More Reading • Ely Greenfield’s “Flex 4 Migration” talk from Adobe Max, 2008 • Mrinal Wadhwa’s talk on Component LifeCycle http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/ • Ryan Campbell’s blog post on Layout in Flex 4 http://www.bobjim.com/2009/06/16/heres-5-3d-layouts-for-flex-4/
  • 56. page heading samples! Some text goes into a paragraph, this is list heading what it looks like. Some text goes into a paragraph, this is what it looks like. Some • some text text goes into a paragraph, this is what it (line 2 indented) looks like. Some text goes into a paragraph, • goes in a list 3 this is what it looks like. • this is what it • looks like object Some text goes into a paragraph, this is what it looks like.