by Adobe

adobe_logo_bio

Created

22 March 2010

 Requirements
 
User level
Required products
All Flex (Download trial)
In the Flex 4 skinning model, the skin controls all visual elements of a component, including layout. The new architecture gives developers greater control over what their components look like a structured and tool-friendly way.
 
Spark skins can contain multiple elements, such as graphic elements, text, images, and transitions. Skins support states, so that when the state of a component changes, the skin changes as well. Skin states integrate well with transitions so that you can apply effects to one or more parts of the skins without adding much code.
 
You typically write Spark skin classes in MXML. You do this with MXML graphics tags (or FXG components) to draw the graphic elements, and specify child components (or subcomponents) using MXML or ActionScript.
 
Spark components and their skins have a contract that defines the rules that each member must follow so that they can communicate with one another. The rules for the skinning contract are as follows:
 
  • To have access to the host component from the skin, you must declare [HostComponent] metadata in the skin.
  • To access properties of the host component, declare the property public on the host component.
  • To use states, add a state to the skin's <s:states> block and declare [SkinState] metadata in the host component.
  • To use skin parts, use an id to specify a skin part in the skin class, and declare a public variable of the same name in the host component.
This Quick Start covers the following topics:
 

 
Creating a simple custom skin

When creating skins, you generally do not subclass existing skin classes. Instead, it is often easier to copy the source of an existing skin class and create another class from that.
 
The following example is a simplified version of the ButtonSkin class. You can create it by opening the source file for the spark.skins.spark.ButtonSkin class. You can then add and remove elements, as long as you do not violate the skinning contract.
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components\SimpleButtonSkin.mxml --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="21" minHeight="21"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <!-- Specify one state for each SkinState metadata in the host component's class --> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> <s:stroke> <s:SolidColorStroke color="0x000000" weight="1"/> </s:stroke> </s:Rect> <s:Label id="labelDisplay" fontWeight="bold" horizontalCenter="0" verticalCenter="4" left="10" right="10" top="2" bottom="2"> </s:Label> </s:Skin>
The following application applies the SimpleButtonSkin custom skin class to one of the Button controls:
 
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components/SimpleButtonExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:HGroup> <s:Button id="myButton1" label="Default Skin"/> <s:Button id="myButton2" label="Custom Skin" skinClass="SimpleButtonSkin"/> </s:HGroup> </s:Application>

 
Using skin states

Skins can react to the state of the component. You must first define the states that the skin recognizes in a states block at the top of the skin class:
 
<s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states>
These states must match states that are declared with the SkinState metadata in the host component as part of the skinning contract.
 
In the skin class, you can then set properties based on the current state by using dot-notation syntax. For example, to set the alpha property of an element in the up state, you set the value of the alpha.up property.
 
The following example is a custom skin class that sets the alpha values of the label based on the state of the Button control:
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components\AlphaButtonSkin.mxml --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="21" minHeight="21"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <!-- Specify one state for each SkinState metadata in the host component's class --> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> <s:stroke> <s:SolidColorStroke color="0x000000" weight="1"/> </s:stroke> </s:Rect> <s:Label id="labelDisplay" alpha.up="1" alpha.down=".1" alpha.over=".25" fontWeight="bold" horizontalCenter="0" verticalCenter="4" left="10" right="10" top="2" bottom="2"> </s:Label> </s:Skin>
The following application applies the AlphaButtonSkin custom skin class to one of the Button controls:
 
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components/AlphaButtonExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:HGroup> <s:Button id="myButton1" label="Default Skin"/> <s:Button id="myButton2" label="Custom Skin" skinClass="AlphaButtonSkin"/> </s:HGroup> </s:Application>

 
Accessing the host component

Spark skin classes typically specify the host component on them. The host component is the component that uses the skin. By specifying the host component, Spark skins can gain a reference to the component instance that uses the skin.
 
The following example is a simplified version of the ButtonSkin class. It accesses properties of the host component to set the size of the label.
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components\HostComponentButtonSkin.mxml --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="21" minHeight="21"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <!-- Specify one state for each SkinState metadata in the host component's class --> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> <s:stroke> <s:SolidColorStroke color="0x000000" weight="1"/> </s:stroke> </s:Rect> <s:Label id="labelDisplay" fontSize="{hostComponent.getStyle('fontSize')}" fontSize.over="{hostComponent.getStyle('fontSize') + 10}" fontSize.down="{hostComponent.getStyle('fontSize') + 10}" alpha.up="1" alpha.down=".1" alpha.over=".25" fontWeight="bold" horizontalCenter="0" verticalCenter="4" left="10" right="10" top="2" bottom="2"> </s:Label> </s:Skin>
The following application applies the HostComponentButtonSkin custom skin class to one of the Button controls:
 
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components/HostComponentButtonExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:HGroup> <s:Button id="myButton1" label="Default Skin"/> <s:Button id="myButton2" label="Custom Skin" skinClass="HostComponentButtonSkin"/> </s:HGroup> </s:Application>

 
Using transitions with skins

You can use transitions to add visual appeal to your Spark skins. Transitions are triggered off of state changes, which are explicitly supported in Spark skins. All the visuals for a transition should be defined in the skin class and not on the component.
 
You can use transitions in Spark skins in the same way you would use them in your application. You add a <s:transitions> tag as a child tag of the skin's root tag. You then define the transitions and which states they apply to with the toState and fromState on the <s:Transition> child tags. Because the skin is notified of state changes from the host component, you do not have to add any logic to support state changes to the skin.
 
The following example is a simplified version of the ButtonSkin class. It adds a transition to the font size change from the previous example.
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components\TransitionButtonSkin.mxml --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="21" minHeight="21"> <s:transitions> <s:Transition fromState="up" toState="over"> <s:Resize target="{labelDisplay}"/> </s:Transition> <s:Transition fromState="over" toState="up"> <s:Resize target="{labelDisplay}"/> </s:Transition> </s:transitions> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <!-- Specify one state for each SkinState metadata in the host component's class --> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect id="buttonBorder" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> <s:stroke> <s:SolidColorStroke color="0x000000" weight="1"/> </s:stroke> </s:Rect> <s:Label id="labelDisplay" fontSize="{hostComponent.getStyle('fontSize')}" fontSize.over="{hostComponent.getStyle('fontSize') + 10}" fontSize.down="{hostComponent.getStyle('fontSize') + 10}" alpha.up="1" alpha.down=".1" alpha.over=".25" fontWeight="bold" horizontalCenter="0" verticalCenter="4" left="10" right="10" top="2" bottom="2"> </s:Label> </s:Skin>
The following application applies the TransitionButtonSkin custom skin class to one of the Button controls:
 
<?xml version="1.0" encoding="utf-8"?> <!-- skinning_components/TransitionButtonExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:HGroup> <s:Button id="myButton1" label="Default Skin"/> <s:Button id="myButton2" label="Custom Skin" skinClass="TransitionButtonSkin"/> </s:HGroup> </s:Application>

 
For more information