SKINNING IN FLEX 4

Mike Orthhttp:/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

GraphicalArtwork, PNG, GIF <mx:Button upSkin="@Embed(source=‘up_skin.gif')”/>

ProgrammaticExtend ProgrammaticSkin, UIComponent,

Border, etc..Drawing APIoverride updateDisplayList

Types of skins

StatefulOne 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|Form s|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

GroupsLightweight, simply a mechanism to layout

visual childrenNot Skinnable

Spark ContainersUse as base class for skinning containersSkinnableComponent, SkinnableContainerLayout 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 ComponentSkin PartsSkin StatesA bowl of only Brown M&M’s

Skinning ContractsSkin Class Host Component

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 SkinStates metadata tag.

Identify the skin parts that it uses with the SkinPart metadata 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!