7/27/2019 268 RJOwen Flex Components Advanced
1/48
www.cfunited.com
Flex 4 and Components
Speaker Name
7/27/2019 268 RJOwen Flex Components Advanced
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.)
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
5/48
7/27/2019 268 RJOwen Flex Components Advanced
6/48
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
8/48
8www.cfunited.com
Flex 4: fundamental changes toDesigner Developer Workflow
Designer
Developer
Workflow
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
10/48
7/27/2019 268 RJOwen Flex Components Advanced
11/48
11www.cfunited.com
Flex 3 Components (Halo)
M
VC
Component
Skin(background)
V
7/27/2019 268 RJOwen Flex Components Advanced
12/48
12www.cfunited.com
Flex 4 Components (Spark)
M
C
Component
Skin(entire view)
V
7/27/2019 268 RJOwen Flex Components Advanced
13/48
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
16/48
16www.cfunited.com
Anatomy of a Button
ButtonBase
Button
Icon Button
ButtonSkin
IconButtonSkin
7/27/2019 268 RJOwen Flex Components Advanced
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!
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
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/7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
22/48
7/27/2019 268 RJOwen Flex Components Advanced
23/48
7/27/2019 268 RJOwen Flex Components Advanced
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)
7/27/2019 268 RJOwen Flex Components Advanced
25/48
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
27/48
27www.cfunited.com
Attachment: Element Lists
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
31/48
7/27/2019 268 RJOwen Flex Components Advanced
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();
7/27/2019 268 RJOwen Flex Components Advanced
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()
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
36/48
7/27/2019 268 RJOwen Flex Components Advanced
37/48
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
39/48
39www.cfunited.com
FXG
7/27/2019 268 RJOwen Flex Components Advanced
40/48
7/27/2019 268 RJOwen Flex Components Advanced
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
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
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)
7/27/2019 268 RJOwen Flex Components Advanced
44/48
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
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.
7/27/2019 268 RJOwen Flex Components Advanced
47/48
47www.cfunited.com
States in Flex 4
7/27/2019 268 RJOwen Flex Components Advanced
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]Top Related