NyFUG Skinning Components In Flex 4

Click here to load reader

  • date post

    22-Apr-2015
  • Category

    Documents

  • view

    4.294
  • download

    2

Embed Size (px)

description

 

Transcript of NyFUG Skinning Components In Flex 4

  • 1. Skinning Components in Flex 4 Theo Rushin Jr Web Application Developer/Trainer Twin Technologies & DoubleBlack Technologies [email protected] http://therush.wordpress.com Monday, August 31, 2009
  • 2. Agenda Halo vs Spark Components What is Skinning? Skinning Contracts Creating and Applying Skins Examples Q&A Monday, August 31, 2009
  • 3. Halo vs Spark Components Halo components are the base set of components that are a part of the Flex 3 framework. These components have the look and feel of the component directly connected to the logic and methods of the component. Too much time spent in Actionscript code. Monday, August 31, 2009
  • 4. Halo vs Spark Components (cont.) Spark is the new component architecture found in the Flex 4 framework based on the Halo system. The look and feel have been pulled away from the logic and methods. An MXML-based skin class denes the look and feel of the component. Monday, August 31, 2009
  • 5. What is Skinning? Skinning (skin ning): transitive verb 1. to cover with or as with skin 2. the process of changing a component's appearance by modifying its visual elements Monday, August 31, 2009
  • 6. What is Skinning? (cont.) The process of skinning in Flex 4 is very different from how it was done in previous versions of Flex. The skin class not only denes the look and feel but can also dene the layout and allow the creation of transitions and effects. Flex 4 skinning is more powerful, easier, and more intuitive! Monday, August 31, 2009
  • 7. Skinning Contracts: What is it? The Skinning Contract simply denes how the component will display its skin. The skin class must: dene the host component declare the skin states dene the appearance of the skins parts The component class must: Dene the skin class(es) that it uses Identify the skin parts Identify the skin states Monday, August 31, 2009
  • 8. Skinning Contracts: Dening the Host Component Property By dening a hostComponent property on the skin class you can access public properties and styles of the host component. You dene the hostComponent property using the tag: [HostComponent(spark.components.Button)] Monday, August 31, 2009
  • 9. Skinning Contracts: Using the Host Component Property [HostComponent(spark.components.Button)] ... NOTE: Only works with public properties dened in the host component. Monday, August 31, 2009
  • 10. Skinning Contracts: Dening the skin states Skin states dene the appearance of the skin when the component is in a particular state. Declare the skin state with the tag. (optional) Specify the individual states using one or more tags. Monday, August 31, 2009
  • 11. Skinning Contracts: Using the skin states ... ... ... Monday, August 31, 2009
  • 12. Skinning Contracts: Dening the skin parts Some components dene more than one skin part. For example, the NumericStepper declares three parts - up button, down button, and text. Parts dened in a component can be optional and thus not required. Use the [SkinPart] metadata to declare a skin part on a component. [SkinPart(required=false)] public var labelElement:TextGraphicElement; Monday, August 31, 2009
  • 13. Skinning Contracts: Using the skin parts Parts are identied by their id attribute thus the id of the skin part in the host component MUST match the skin part dened in the skin class. Monday, August 31, 2009
  • 14. Creating and Applying Skins Skins are typically created using Spark skin classes, written in MXML. The MXML typically uses FXG to draw the graphical elements. You can also use embedded images. Skins can be applied to components in one of three ways: Using the skinClass property in MXML. Using the skinClass property in CSS. Using the setStyle() method and the skinClass property. Monday, August 31, 2009
  • 15. Creating and Applying Skins: Using the skinClass property in MXML Setting the skinClass in MXML only applies the skin to that component instance. Monday, August 31, 2009
  • 16. Creating and Applying Skins: Using the skinClass property in CSS Setting the skinClass in CSS enables you to apply the skin to all components that use the specied class selector. .myButtonClass { skinClass:ClassReference(mySkins.MyButtonSkin); } Monday, August 31, 2009
  • 17. Creating and Applying Skins: Using the skinClass property in ActionScript Setting the skinClass in ActionScript applies the skin to a component instance OR to all types of a particular component. ... import mySkins.* ... myButton.setStyle(skinClass, Class(MyButtonSkin)); ... NOTE: You must cast your skin class as a Class. Monday, August 31, 2009
  • 18. Creating and Applying Skins: Your Custom Skin Class