Skinning in Flex 4Mike Orthhttp:/mikeorth.com

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

ConceptsTypes of Skins / Spark vs. HaloCSSCreating/Applying SkinsExamplesQA

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 SkinningBrandingSets your application apart from othersUser ExperienceGreat skinning makes you forget it’s a Flex appCool != functional

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

Types of skinsGraphicalArtwork, PNG, GIF<mx:ButtonupSkin="@Embed(source=‘up_skin.gif')”/>ProgrammaticExtend ProgrammaticSkin, UIComponent, Border, etc..Drawing APIoverride updateDisplayList

Types of skinsStatefulOne 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 AdditionsNamespacesID SelectorsDescendant SelectorsPseudo Selectors

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

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

Examples

Creating Spark Skins

Spark SkinningSpark Skins & ContainersSkinning ContractsApplying Skins

Spark Skinning

Spark SkinningIn Flex 4, Skins are more powerful (you must decide to use it for good or for evil)Created in MXML, Skin includesTextImages FXG graphicsTransitionsFiltersStates

ContainersGroupsLightweight, simply a mechanism to layout visual childrenNot SkinnableSpark ContainersUse as base class for skinning containersSkinnableComponent, SkinnableContainerLayout children using contentGroup

Skinning ContractsA 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 ContractsHost ComponentSkin ClassSpecify the host component.Declare the skin states, and define their appearance.Define the appearance of the skin parts.Define the skin classIdentify 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>

FXGGraphics interchange formatDefines shapes using mark-upRect, Circle, Path

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

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

Thanks!