It is a spark container in Flex 4. If user want to add a border for a component or want to change the background of the content area then Flex 4 provide a container for this requirement.

Spark BorderContainer in flex4:

It is a spark container in Flex 4. If user want to add a border for a component or want to change the background of the content area then Flex 4 provide a container for this requirement Flex defines the Spark BorderContainer container as a subclass of the SkinnableContainer. It is provides class properties to control border and background of the content area. In this example you can see how to use a BorderContainer container. The tag for use BorderContainer container is <s:BorderContainer >.

Example:

<?xml version="1.0" encoding="utf-8"?> <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="0xE5CE5A" cornerRadius="10" borderStyle="inset" borderWeight="4" width="380" height="174"> <s:layout> <s:VerticalLayout paddingLeft="25" paddingRight="5" paddingTop="25" paddingBottom="5"/> </s:layout> <mx:HBox width="341" height="38"> <s:Label text="User Name :"/> <s:TextInput id="username" width="200" height="30"/> </mx:HBox> <mx:HBox width="346" height="38"> <s:Label text="Password :" width="72"/> <s:TextInput id="password" displayAsPassword="true" width="200" height="30"/> </mx:HBox> <mx:HBox width="346" horizontalAlign="center"> <s:Button label="Submit"/> </mx:HBox> </s:BorderContainer> </s:Application>

In this example we have used <s:BorderContainer> tag for use BorderContainer container and <s:VerticalLayout> tag to apply layout for the set layout. We can set properties for the BorderContainer like backgroundColor, cornerRadius, borderStyle, borderWeight. BorderContainer container does not implement the IViewport interface.

Output:

Running Application:

Download this code

Related Tags for Spark BorderContainer in Flex4: