Skinning components
Requirements
User level
All
Required products
- 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
- Using skin states
- Accessing the host component
- Using transitions with skins
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>
Result
<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>
Result
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>
Result
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>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
