Architecture of a Skinning component

January 25th, 2011 by aabhaanjan

In this tutorial we are going to discuss new component architecture with the Spark library for skinning:

With the  new component architecture with the Spark library provides :

1. Building custom components a lot easier

2. Modifying custom components a lot easier

3.  Designing custom components a lot easier

4. Internal state management

5. Decoupled visual appearance.

Here it is explained now :

Internal State Management

By this now it is possible to create multiple skins for a single component by using the event handler.

The code for the skin itself should have the following structure:

[xml]

<!– states –>

<s:states>

<s:State name=”disabled” />

<s:State name=”down” />

<s:State name=”over” />

<s:state name=”up” />

</s:states>

[/xml]

A single state change could include the attachment of a new skin class.

Host components

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 by using the  host Component  property. The following example defines the Spark Button as the host component:

[xml]

<!– host component –>

<fx:Metadata>

[HostComponent(“spark.components.Button”)]

</fx:Metadata>

[/xml]

Decoupled Visual Appearance

A component state is not dependent upon the skin state it can change without the skin state changing. In other words, component states are decoupled from skin states. Component states define changes to the behavioral state of a component, while Skin states define changes to the display state of the component that they are attached to.

Example :

Create a ButtonSkin skin file and incorporate it with the TestButton.mxml

ButtonSkin.MXML

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark” alpha.disabled=”.5″>

<!– states –>

<s:states>

<s:State name=”up” />

<s:State name=”over” />

<s:State name=”down” />

<s:State name=”disabled” />

</s:states>

<!– border and fill –>

<s:Rect id=”rect” radiusX=”4″ radiusY=”4″ top=”0″ right=”0″ bottom=”0″ left=”0″>

<s:fill>

<s:SolidColor color=”0x77CC22″ />

</s:fill>

<s:stroke>

<s:SolidColorStroke color=”0x131313″ weight=”2″/>

</s:stroke>

</s:Rect>

<!– text –>

<s:Label text=”Button!” color=”0x131313″

textAlign=”center” verticalAlign=”middle”

horizontalCenter=”0″ verticalCenter=”1″

left=”12″ right=”12″ top=”6″ bottom=”6″

/>

</s:Skin>

TestButton.MXML

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:Button verticalCenter=”0″ horizontalCenter=”0″ skinClass=”ButtonSkin”

click=”trace(‘something’)” />

</s:Application>

[/xml]

Tags: , , , , , , , ,