Tuesday, September 27, 2011

Understanding Spark Skinning - Part 2


This is the second part of the 3 part series to understand Skinning in Spark.
PART 1 - Introduction to Skinning

Skin Class
The Skin Class is the class that defines the look and feel (logic, graphical elements, states etc)of the component class. The Skin Class has the following elements

  • Skin root tag (or a subclass)
  • Host Component metadata
  • State declarations
  • Skin Parts
  • Script Block to define the logic
  • Graphical Elements and children
Skin Root Tag
The Skin Class uses a root tag which defines the entry point of the class. The root tag may be or or a subset of the


Host Component
The HostComponent is the component that uses the skin. This metadata is optional but recommended. Specifying this metadata allows the skin class to gain a reference to the component instance that uses the skin. Also, if specified the skin class can check in compile time for the skin parts and the skin states defined in the Host Component. You can specify this as below


<Metadata>
      [HostComponent{"spark.components.Button"}]
</Metadata>


State Declarations
The skin needs to change its visual appearance based on the states of the component. The skin states define the appearance w.r.t the elements in the skin and their display state. Thus for each state of the host component a state is defined for the skin, where in the display is changed. Skin states are defined as below,

<s:states>
      <s:state name="up"/>
      <s:state name="down"/>
</s:states>


Skin Parts
Skin Parts are the components defined in the skin class and the host component. These are a great way of binding the component data into the skin. Thus the host declares the part and the appearance is defined by the skin. If declared in the host component the skin has to implement it. 
To declare a skin part in the host component the [SkinPart] metadata has to be used

[SkinPart(required=true)]
public var textLabel:Label;

The Skin Class defines a label as the textLabel part;

Note that the id of the label defined in the skin class matches that of the variable in the host component.

These are the basic stuff required for skinning. In the next part we'll use these to put together a skinning example.

No comments :