Upload
mike-orth
View
5.792
Download
1
Embed Size (px)
DESCRIPTION
Presentation on Skinning in Flex 4 from the Adobe User Group Tour, Nashville Flex / Flash Camp. This covers the basics of what has changed, new css styling support, and creating custom Spark skins.
Citation preview
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!