Flex 4 Skinning - Nashville Flex Camp

Skinning in Flex 4
Mike Orth
http:/mikeorth.com

Disclaimer
This is all based on Flex 4 Beta 1
Some things may change
spark.skins.default.* package changed to spark.skins.spark.* on Monday, June 15.

Concepts
Types of Skins / Spark vs. Halo
CSS
Creating/Applying Skins
Examples
QA

What is Skinning?
Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.
The skin controls all visual elements of a component, including layout.

Importance of Skinning
Branding
Sets your application apart from others
User Experience
Great skinning makes you forget it’s a Flex app
Cool != functional

Halo vs. Spark
The Halo theme has “the Flex look”
Mostly backwards compatible with Flex 3
Spark is the new theme

Types of skins
Graphical
Artwork, PNG, GIF
<mx:ButtonupSkin="@Embed(source=‘up_skin.gif')”/>
Programmatic
Extend ProgrammaticSkin, UIComponent, Border, etc..
Drawing API
override updateDisplayList

Types of skins
Stateful
One file containing all states (up, down, disabled, etc…), usually a .swc file.
Create assets and package them (CS3 or 4)
Spark Skins are Stateful skins

CSS – New Additions
Namespaces
ID Selectors
Descendant Selectors
Pseudo Selectors

CSS
Namespaces
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
s|Button {
color: #FF0000; }
mx|Panel {
styleName: “myStyle”;}

CSS
ID selectors
#submitButton { color: blue;}
Descendant Selector
s|Forms|TextInput{
font-weight: bold;}
Pseudo/State selectors
s|Button:over{ alpha: 1; }

Examples

Creating Spark Skins

Spark Skinning
Spark Skins & Containers
Skinning Contracts
Applying Skins

Spark Skinning

Spark Skinning
In Flex 4, Skins are more powerful (you must decide to use it for good or for evil)
Created in MXML,
Skin includes
Text
Images
FXG graphics
Transitions
Filters
States

Containers
Groups
Lightweight, simply a mechanism to layout visual children
Not Skinnable
Spark Containers
Use as base class for skinning containers
SkinnableComponent, SkinnableContainer
Layout children using contentGroup

Skinning Contracts
A skinning contract between a skin class and component class defines how the component displays its skins.
Valid contract contains:
Host Component
Skin Parts
Skin States
A bowl of only Brown M&M’s

Skinning Contracts
Host Component
Skin Class
Specify the host component.
Declare the skin states, and define their appearance.
Define the appearance of the skin parts.
Define the skin class
Identify the skin states that it supports with the SkinStatesmetadata tag.
Identify the skin parts that it uses with the SkinPartmetadata tag.

Example Usage
<s:Skin>
<Metadata> [HostComponent("spark.components.Button")]
</Metadata>
…
<s:states>
<s:State name=“up”/>
<s:State name=“down”/>
…
</s:states>
// Define appearance…
</s:Skin>

FXG
Graphics interchange format
Defines shapes using mark-up
Rect, Circle, Path

Skin states
alpha=“.8” alpha.over=“1”
includeIn / excludeFrom

References
http://mikeorth.com
http://livedocs.adobe.com/flex/gumbo/html/
http://danorlando.com/?p=374

Thanks!

http://mikeorth.com	1407
http://www.slideshare.net	62
http://webcache.googleusercontent.com	2
http://cache.baidu.com	1
http://209.85.229.132	1
http://translate.googleusercontent.com	1

Flex 4 Skinning - Nashville Flex Camp

by Mike Orth

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,474

Statistics

Flex 4 Skinning - Nashville Flex Camp Presentation Transcript