Share on Google+Share on Google+

Spark BorderContainer in Flex4

Advertisement
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:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Posted on: April 24, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.