About container children

All Spark containers can take as children visual components that implement the IVisualElement interface. All Spark and MX components implement the IVisualElement interface and can therefore be used as container children.

The following example uses the Spark SkinnableContainer to hold Spark Button components:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkContainerSimple.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:SkinnableContainer>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
        <s:Button label="Button 4"/>
    </s:SkinnableContainer> 
</s:Application>
The executing SWF file for the previous example is shown below:

The Spark Group, SkinnableContainer, and subclasses can take as children any subclass of the GraphicElement class. This lets you add graphical elements as children of the container. The following example shows a SkinnableContainer with a Line component between two Button components:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkContainerGraphic.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:SkinnableContainer>
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:Button label="Button 1"/>
        <s:Line 
            xFrom="0" xTo="100">
            <s:stroke>
                <s:LinearGradientStroke weight="2"/>
            </s:stroke>
        </s:Line>        
        <s:Button label="Button 2"/>
    </s:SkinnableContainer>
</s:Application>
The executing SWF file for the previous example is shown below:

The DataGroup and SkinnableDataContainer classes are designed primarily to display data items as children. The following example shows a SkinnableDataContainer displaying an Array of Strings as children:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkDataContainerSimple.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:SkinnableDataContainer itemRenderer="spark.skins.spark.DefaultItemRenderer"> 
        <mx:ArrayList>
            <fx:String>Dave Jones</fx:String> 
            <fx:String>Mary Davis</fx:String>
            <fx:String>Debbie Cooper</fx:String>
        </mx:ArrayList>  
    </s:SkinnableDataContainer> 
</s:Application>
The executing SWF file for the previous example is shown below: