You
use the <s:SkinnableContainer> tag to define
a SkinnableContainer container.
Specify an id value if you intend to refer to a
component elsewhere in your MXML, either in another tag or in an
ActionScript block.
The following example shows a SkinnableContainer container with
four Button controls as its children:
The default layout class of the SkinnableContainer class is BasicLayout.
In this example, the SkinnableContainer uses the HorizontalLayout
class to arrange the buttons in a single row.
If the SkinnableContainer uses BasicLayout, you can use a Rect
component as a child of the container to add a background color
and border. For an example, see Creating a Spark Group container.
However, the SkinnableContainer class lets you apply a skin to
define the visual characteristics of the container. For example,
the following skin defines a gray background and a one pixel border
for the container:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.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"
alpha.disabled="0.5">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<!-- Define the skin states. -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- Define a Rect to fill the area of the skin. -->
<s:Rect x="0" y="0"
radiusX="4" radiusY="4"
height="100%" width="100%">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
<s:fill>
<s:LinearGradient>
<s:entries>
<mx:GradientEntry color="0x999999"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- Define the content area of the container. -->
<s:Group id="contentGroup"
left="5" right="5" top="5" bottom="5">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Skin>
All SkinnableContainer skins must implement the view states defined
by the SkinnableContainer. Because the SkinnableContainer class
supports the normal and disabled view states, the skin must also
support them.
The Rect component adds the border and gray background to the
skin.
All the container’s children are added to the contentGroup skin
part of the skin. In this example, the contentGroup container
is a Group container with a vertical layout. Setting the layout property
of the SkinnableContainer overrides the layout specified in the
skin.
The advantage to defining a skin for the SkinnableContainer,
rather than adding the visual elements in the SkinnableContainer
definition, is that the skin is reusable. For example, you typically
define a consistent look for all SkinnableContainer containers in
an application. By encapsulating that look in a reusable skin class,
you can apply it to all containers in your application.
Use the skinClass property to apply the skin
to the SkinnableContainer, as the following example shows:
For more information on skinning, see Spark Skinning.
