I’m Mike Orth, I’ve been doing Flex development for nearly 3 years now. I’m going to go over a lot of the new concepts and procedures for skinning in Flex 4. I have an hour slot but it may not take the whole time because since it’s so new, there’s limited information I can give you w/o it changing.
While it needs to look cool, it still has to be functional.
Halo has the “Flex look”,Halo containers are huge and contain complex logic for layout, measuring, borderMetrics, Scrollingsome style names have changedHalo is the old set of components
override updateDisplayList, implement getters/setters, create stylable properties-PROG - use the drawing api to draw shapes and lines. Gives you precise control over the way it looks.
We’ll go over Spark skinning later
Don’t have to use namespaces for class selectors (dot notation)
to style a particular component by it’s id, so it will style anything that matches that id Pseudo – Similar to Html/cssa:hover
Skin is base classSparkSkin is used by the framework for Spark Components, it adds some additional functionality such as the ability to exclude colors from filters.
Groups don’t provide scrollingChildren are put in contentGroup
Show SuperBasicButton example or create a new button
Similar to degrafa
Flex 4 Skinning - Nashville Flex Camp
Skinning in Flex 4<br />Mike Orth<br />http:/mikeorth.com<br />
Disclaimer<br />This is all based on Flex 4 Beta 1<br />Some things may change<br />spark.skins.default.* package changed to spark.skins.spark.* on Monday, June 15.<br />
Concepts<br />Types of Skins / Spark vs. Halo<br />CSS<br />Creating/Applying Skins<br />Examples<br />QA<br />
What is Skinning?<br />Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.<br />The skin controls all visual elements of a component, including layout.<br />
Importance of Skinning<br />Branding<br />Sets your application apart from others<br />User Experience<br />Great skinning makes you forget it’s a Flex app<br />Cool != functional<br />
Halo vs. Spark<br />The Halo theme has “the Flex look”<br />Mostly backwards compatible with Flex 3<br />Spark is the new theme<br />
Types of skins<br />Stateful<br />One file containing all states (up, down, disabled, etc…), usually a .swc file.<br />Create assets and package them (CS3 or 4)<br />Spark Skins are Stateful skins<br />
Spark Skinning<br />In Flex 4, Skins are more powerful (you must decide to use it for good or for evil)<br />Created in MXML, <br />Skin includes<br />Text<br />Images <br />FXG graphics<br />Transitions<br />Filters<br />States<br />
Containers<br />Groups<br />Lightweight, simply a mechanism to layout visual children<br />Not Skinnable<br />Spark Containers<br />Use as base class for skinning containers<br />SkinnableComponent, SkinnableContainer<br />Layout children using contentGroup<br />
Skinning Contracts<br />A skinning contract between a skin class and component class defines how the component displays its skins.<br />Valid contract contains:<br />Host Component<br />Skin Parts<br />Skin States<br />A bowl of only Brown M&M’s<br />
Skinning Contracts<br />Host Component<br />Skin Class<br />Specify the host component.<br />Declare the skin states, and define their appearance.<br />Define the appearance of the skin parts.<br />Define the skin class<br />Identify the skin states that it supports with the SkinStatesmetadata tag.<br />Identify the skin parts that it uses with the SkinPartmetadata tag. <br />