The Spark BorderContainer container

To change the visible appearance of a SkinnableContainer, create a custom skin. However, to make it simple to add a border or change the background of a container, Flex defines the Spark BorderContainer container as a subclass of the SkinnableContainer. The BorderContainer container provides a set of CSS styles and class properties to control the border and background of the container.

Note: Because you use CSS styles and class properties to control the appearance of the BorderContainer container, you typically do not create a custom skin for it. If you do create a custom skin, your skin class should apply any styles to control the appearance of the container.
The following example uses the backgroundColor, borderStyle, borderWeight, and cornerRadius styles of the BorderContainer container to control the appearance of the BorderContainer container: 
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderSimple.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:BorderContainer 
        backgroundColor="red" cornerRadius="10"
        borderStyle="inset" borderWeight="4" >
        <s:layout>
            <s:HorizontalLayout 
                paddingLeft="5" paddingRight="5" 
                paddingTop="5" paddingBottom="5"/>
        </s:layout>
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
        <s:Button label="Button 4"/>
    </s:BorderContainer> 
</s:Application>
The executing SWF file for the previous example is shown below:
Use the backgroundImage style to specify an image as the background of the container, as the following example shows: 
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderImage.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"> 
    
    <fx:Script> 
        <![CDATA[
            [Embed(source="/assets/logo.jpg")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </fx:Script> 
     
    <s:BorderContainer 
        backgroundImage="{imgCls}" 
        borderStyle="inset" borderWeight="2" 
        width="150" height="180">
    </s:BorderContainer> 
</s:Application>
The executing SWF file for the previous example is shown below:
The BorderContainer container defines two properties that also let you control the appearance of the container:

  • The backgroundFill property, of type IFill, defines the fill of the container. If you set the backgroundFill property, then the container ignores the backgroundAlpha, backgroundColor, backgroundImage, and backgroundImageResizeMode styles.

  • The borderStroke property, of type IStroke, defines the stroke of the border. If you set the borderStroke property, then the container ignores the borderAlpha, borderColor, borderStyle, borderVisible, and borderWeight styles.

The following example sets the backgroundFill and borderStroke properties: 
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderFillStroke.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:BorderContainer cornerRadius="10">
        <s:layout>
            <s:HorizontalLayout 
                paddingLeft="5" paddingRight="5" 
                paddingTop="5" paddingBottom="5"/>
        </s:layout>
        <s:backgroundFill>
            <s:SolidColor 
                color="red" 
                alpha="100"/>
        </s:backgroundFill>
        <s:borderStroke>
            <mx:SolidColorStroke 
                color="black" 
                weight="3"/>
        </s:borderStroke>
                
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
        <s:Button label="Button 4"/>
    </s:BorderContainer> 
</s:Application>
The executing SWF file for the previous example is shown below:

Because the BorderContainer container does not implement the IViewport interface, it does not directly support scroll bars. However, you can wrap the Scroller control inside the BorderContainer container to add scroll bars, as the following example shows:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkScrollBorder.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:BorderContainer width="100" height="100" 
        borderWeight="3" borderStyle="solid">
        <s:Scroller width="100%" height="100%">
            <s:Group
                horizontalScrollPosition="50" 
                verticalScrollPosition="50"> 
                <s:Image width="300" height="400" 
                    source="@Embed(source='/assets/logo.jpg')"/> 
            </s:Group>                 
        </s:Scroller>        
    </s:BorderContainer> 
</s:Application> 
The executing SWF file for the previous example is shown below: