Flex 4 Skinning - Nashville Flex Camp


Published on

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.

Published in: Sports, Business, Technology
1 Comment
1 Like
  • asdfasdfasdf

    <b>[Comment posted from</b> http://mikeorth.com/?cat=6]
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. Skinning in Flex 4<br />Mike Orth<br />http:/mikeorth.com<br />
    2. 2. 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 />
    3. 3. Concepts<br />Types of Skins / Spark vs. Halo<br />CSS<br />Creating/Applying Skins<br />Examples<br />QA<br />
    4. 4. 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 />
    5. 5. 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 />
    6. 6. 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 />
    7. 7. Types of skins<br />Graphical<br />Artwork, PNG, GIF<br />&lt;mx:ButtonupSkin=&quot;@Embed(source=‘up_skin.gif&apos;)”/&gt;<br />Programmatic<br />Extend ProgrammaticSkin, UIComponent, Border, etc..<br />Drawing API<br />override updateDisplayList<br />
    8. 8. 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 />
    9. 9. CSS – New Additions<br />Namespaces<br />ID Selectors<br />Descendant Selectors<br />Pseudo Selectors<br />
    10. 10. CSS<br />Namespaces<br />@namespace mx &quot;library://ns.adobe.com/flex/halo&quot;;<br />@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;<br />s|Button { <br /> color: #FF0000; }<br />mx|Panel { <br />styleName: “myStyle”;}<br />
    11. 11. CSS<br />ID selectors<br />#submitButton { color: blue;}<br />Descendant Selector<br />s|Forms|TextInput{ <br />font-weight: bold;}<br />Pseudo/State selectors <br />s|Button:over{ alpha: 1; }<br />
    12. 12. Examples<br />
    13. 13. Creating Spark Skins<br />
    14. 14. Spark Skinning<br />Spark Skins & Containers<br />Skinning Contracts<br />Applying Skins<br />
    15. 15. Spark Skinning<br />
    16. 16. 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 />
    17. 17. 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 />
    18. 18. 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 />
    19. 19. 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 />
    20. 20. Example Usage<br />&lt;s:Skin&gt;<br /> &lt;Metadata&gt; [HostComponent(&quot;spark.components.Button&quot;)] <br /> &lt;/Metadata&gt;<br /> …<br /> &lt;s:states&gt;<br /> &lt;s:State name=“up”/&gt;<br /> &lt;s:State name=“down”/&gt;<br /> …<br /> &lt;/s:states&gt;<br /> // Define appearance…<br />&lt;/s:Skin&gt;<br />
    21. 21. FXG<br />Graphics interchange format<br />Defines shapes using mark-up<br />Rect, Circle, Path<br />
    22. 22. Skin states<br />alpha=“.8” alpha.over=“1”<br />includeIn / excludeFrom<br />
    23. 23. References<br />http://mikeorth.com<br />http://livedocs.adobe.com/flex/gumbo/html/<br />http://danorlando.com/?p=374<br />
    24. 24. Thanks!<br />