Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NyFUG Skinning Components In Flex 4


Published on

  • Be the first to comment

NyFUG Skinning Components In Flex 4

  1. 1. Skinning Components in Flex 4 Theo Rushin Jr Web Application Developer/Trainer Twin Technologies & DoubleBlack Technologies Monday, August 31, 2009
  2. 2. Agenda Halo vs Spark Components What is Skinning? Skinning Contracts Creating and Applying Skins Examples Q&A Monday, August 31, 2009
  3. 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. 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 defines the look and feel of the component. Monday, August 31, 2009
  5. 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. 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 defines the look and feel but can also define 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. 7. Skinning Contracts: What is it? The Skinning Contract simply defines how the component will display its skin. The skin class must: define the host component declare the skin states define the appearance of the skin’s parts The component class must: Define the skin class(es) that it uses Identify the skin parts Identify the skin states Monday, August 31, 2009
  8. 8. Skinning Contracts: Defining the Host Component Property By defining a hostComponent property on the skin class you can access public properties and styles of the host component. You define the hostComponent property using the <Metadata> tag: <Metadata> [HostComponent(“spark.components.Button”)] </Metadata> Monday, August 31, 2009
  9. 9. Skinning Contracts: Using the Host Component Property <Metadata> [HostComponent(“spark.components.Button”)] </Metadata> ... <s:SimpleText text=”{hostComponent.label}” ... /> NOTE: Only works with public properties defined in the host component. Monday, August 31, 2009
  10. 10. Skinning Contracts: Defining the skin states Skin states define the appearance of the skin when the component is in a particular state. Declare the skin state with the <states> tag. (optional) Specify the individual states using one or more <State> tags. <s:states> <s:State name=”up” /> <s:State name=”down” /> <s:State name=”over” /> </s:states> Monday, August 31, 2009
  11. 11. Skinning Contracts: Using the skin states <s:SparkSkin ...> ... <s:states> <s:State name=”up” /> <s:State name=”down” /> <s:State name=”over” /> </s:states> ... <s:SimpleText id=”labelElement” color.up=”0xff0000” color.down=”0x00ff00” color.over=”0x0000ff” text.up=”Up” text.down=”Down” text.over=”Over” /> ... </s:SparkSkin> Monday, August 31, 2009
  12. 12. Skinning Contracts: Defining the skin parts Some components define more than one skin part. For example, the NumericStepper declares three parts - up button, down button, and text. Parts defined 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. 13. Skinning Contracts: Using the skin parts Parts are identified by their id attribute thus the id of the skin part in the host component MUST match the skin part defined in the skin class. <s:TextBox id=”labelElement” ... /> Monday, August 31, 2009
  14. 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. 15. Creating and Applying Skins: Using the skinClass property in MXML Setting the skinClass in MXML only applies the skin to that component instance. <s:Button id=”btnMyButton” label=”My Button” skinClass=”mySkins.MyButtonSkin” /> Monday, August 31, 2009
  16. 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 specified class selector. .myButtonClass { skinClass:ClassReference(“mySkins.MyButtonSkin”); } Monday, August 31, 2009
  17. 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. 18. Creating and Applying Skins: Your Custom Skin Class Typically, the structure of your skin class include the following elements: <s:SparkSkin ...> root tag [hostComponent] metadata <s:states> declaration <fx:Script> block One or more graphic elements and/or controls The easiest way to get started is to copy and alter the source of an existing skin. You can also use a tool that outputs FXG and copy the output into your custom skin class. Monday, August 31, 2009
  19. 19. Creating and Applying Skins: Using FXG to Define Skins Flash XML Graphics (FXG) is a declarative, xml- based language used for interchanging graphics among application that support it. FXG can be exported from other Adobe tools such as Fireworks CS4, Adobe Photoshop CS4, and Adobe Illustrator CS4 FXG can be used in MXML or in a standalone document. Monday, August 31, 2009
  20. 20. EXAMPLES How to Skin a Spark Button How to Add Transitions and Effects How to Skin An ItemRenderer Monday, August 31, 2009
  21. 21. Q&A Theo Rushin Jr Monday, August 31, 2009