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.
2. 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.
3. Concepts Types of Skins / Spark vs. Halo CSS Creating/Applying Skins Examples QA
4. 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.
5. Importance of Skinning Branding Sets your application apart from others User Experience Great skinning makes you forget it’s a Flex app Cool != functional
6. Halo vs. Spark The Halo theme has “the Flex look” Mostly backwards compatible with Flex 3 Spark is the new theme
7. Types of skins Graphical Artwork, PNG, GIF <mx:ButtonupSkin="@Embed(source=‘up_skin.gif')”/> Programmatic Extend ProgrammaticSkin, UIComponent, Border, etc.. Drawing API override updateDisplayList
8. 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
9. CSS – New Additions Namespaces ID Selectors Descendant Selectors Pseudo Selectors
16. 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
17. 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
18. 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
19. 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.
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
