no text exists for this slide

Review the Spark Component Model
Review the Spark Component Model
Describe the roles of a component, layout and skin
What goes in a skin
SkinState and SkinParts
Component / Skin communications
Explore a few real skinned components

Jeff Tapper (jtapper@digitalprimates.net)
Jeff Tapper (jtapper@digitalprimates.net)
Senior Consultant – Digital Primates
Building Internet Applications since 1995
Authored 11 books on internet technologies
Adobe Certified Instructor for all Flex, AIR, Flash, and ColdFusion courses
http://blogs.digitalprimates.net/jefftapper
Twitter: jefftapper

Developers who:
Developers who:
Have some experience with Flex
Want to understand more about Flex 4 skinning
Have a sense of humor
If this isn’t you, you should just leave

Component – what does it do
Component – what does it do
Skin – what does it look like
Layout – how are children arranged

Raw Logic
Raw Logic
No Layout
No UI
Component delegates layout and look to other classes
Ponder the List (mx.controls.List vs spark.components.List)

Component Agnostic
Component Agnostic
Responsible for positioning children
Optionally implementing virtualization
updateDisplayList checks useVirtualLayout
VerticalLayoutSample:
if (useVirtualLayout)
updateDisplayListVirtual();
else
updateDisplayListReal();

Responsible for entire look and feel of component
Responsible for entire look and feel of component
Component specific
Component dictates required elements (skinparts / skinstates)

In Flex 3, far more control was available from style sheets
In Flex 3, far more control was available from style sheets
Flex 4 components expose less control to CSS
Assumptions are that more will be done in skins
Font related styles still available from CSS
Your skins can expose additional styles
More info: http://www.jamesward.com/2010/07/30/how-to-define-styles-on-skins-in-flex-4/

Add metadata to the component
Add metadata to the component
[Style(name="backgroundColor", type="uint", format="Color")]
Leverage getStyle() in the skin
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="{getStyle('backgroundColor')}"/>
</s:fill>
</s:Rect>

Design
Design
Borders
Backgrounds
Dropshadow
Etc.
Controls (ie. Components)
States

Host component has a state, which can (optionally) be passed to skin
Host component has a state, which can (optionally) be passed to skin
To notify skin of state change use invalidateSkinState()
Be sure to override getCurrentSkinState()
UI State changes done in skin, not in component
Functional changes done in component, not skin

Definition of skin properties which can be addressed from component
Definition of skin properties which can be addressed from component
override partAdded/partRemoved method in component
Used to allow component to control skin without knowing details of its internals

Component passes values to skinparts
Component passes values to skinparts
Best done in partAdded method
Skin can address component through “hostCompoment” property, but shouldn’t
It just makes you feel icky in the morning
Skin parts broadcast events, to which component listens
Listeners added in partAdded, removed in partRemoved

ShoppingList Component
ShoppingList Component
Review component code
Review skinparts
ShoppingList Skin
Labels, button and DataGroup
DataGroup has itemRenderer

Skinnable Clock
Skinnable Clock
One clock component can have vastly different views

Clock provides base functionality
Clock provides base functionality
switch between 12/24 hours
Has “clockFace” skinpart (IClockFace)
Separate skins for Digital and Analog Clocks
Each provides a clockFace

Has background image and DigitalClockFace
Has background image and DigitalClockFace
DigitalClockFace is a SkinnableComponent
Requires skinParts for hour, minute and second indicators
Uses DigitalClockFaceSkin
DigitalClockFaceSkin
Renders hour, minute and second indicators

Has background image and AnalogClockFace
Has background image and AnalogClockFace
AnalogClockFace is a SkinnableComponent
Requires skinparts for hands
Knows how to position hands, for either 12/24 hours
Uses AnalogClockFaceSkin
AnalogClockFaceSkin
Renders analog face
Uses a datagroup for numbers
Datagroup has custom layout
Label Item Renderer

Spark component model offers a separation of functionality, layout, and visual appearance
Spark component model offers a separation of functionality, layout, and visual appearance
Skins contain all visual information
May contain other skinnable components which have their own skins
Make use of layouts
SkinParts are used to facilitate a component populating the elements in a skin