Flex 4 BorderContainer – Quick and Useful Spark Component

One very useful component offered in the Flex 4 SDK is the Spark BorderContainer. You may also know this as the Spark Border if you’re one of those cutting-edge people already building apps in Flex 4, but it recently underwent a final name change to ‘BorderContainer‘.

The BorderContainer extends SkinnableContainer and offers you a quick way to set borders and backgrounds on a container in your application without having to create a custom skin. You can use CSS properties and class properties to style it much like the Halo components, such as setting the cornerRadius for rounded corners, borderColor, borderStyle, borderWeight and even backgroundColor, backgroundImage and backgroundFill.

There are numerous ways to customize your BorderContainer with the given properties and I’ll show a few simple examples here. If there is something about your container that you can’t control through the style and class properties then you should choose to use a SkinnableContainer with your own custom skin instead.

Here is an example of a BorderContainer that has a gradient background going left to right and some border settings:

      <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
			<!-- 0 rotation creates left to right gradient -->
			<s:LinearGradient rotation="0">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
		<s:Label text="Left to Right Gradient" horizontalCenter="0" verticalCenter="0"/>

Here is a screen shot of what this container would look like:

The code below shows how you can make the gradient go right to left. The rotation attribute on the LinearGradient will determine the gradient effect. If you use a value of 90 or 270 it will go top to bottom and bottom to top.

     <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
			<!-- 180 rotation creates right to left gradient -->
			<s:LinearGradient rotation="180">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
		<s:Label text="Right to Left Gradient" horizontalCenter="0" verticalCenter="0"/>

And the screen shot of the above code:

This next bit of code shows how you can include a repeatable background image in your container, with some other custom border settings as shown below:

       <s:BorderContainer horizontalCenter="0" verticalCenter="0" width="420" height="305" cornerRadius="7" 
					   borderWeight="2" backgroundImage="@Embed('adobelogo.jpg')" 
					   backgroundImageFillMode="repeat" borderColor="red"/>

Below is the screenshot of this container:

The backgroundImageFillMode can be set to repeat, scale or clip depending on what you would like your image to do. They are pretty self-explanatory, clip will cause it to be sized as is and if it doesn’t fit within the container it will be clipped and scale will cause the image to scale within the container.

If you want to set both a background image and a background color however, you will either need to use a SkinnableContainer object with a custom skin instead of BorderContainer, or use the BorderContainer with something like the following:

          <s:BorderContainer width="300" height="300" cornerRadius="7" backgroundColor="red">
                    <s:Rect width="100%" height="100%">
                                         <s:BitmapFill source="@Embed('adobelogo.jpg')" alpha="0.2"/>

You can also set a borderAlpha and backgroundAlpha on your BorderContainer as desired.

This last example shows how you can create a gradient border:

         <s:BorderContainer width="400" height="300" backgroundColor="0XDEAEFF" verticalCenter="0" horizontalCenter="0">
			<s:LinearGradientStroke weight="10" rotation="270">
				<s:GradientEntry color="0xF655E5"/>
				<s:GradientEntry color="0x6600CC"/>
		<s:Label horizontalCenter="0" verticalCenter="0" text="My very girly BorderContainer"/>

And the screenshot of this:

The examples above are just simple code snippets to show you the options available beyond what might be in the Adobe docs. These samples are being added to Tour de Flex along with more Flex 4 samples so stay tuned!


6 Responses to “Flex 4 BorderContainer – Quick and Useful Spark Component”

  1. Thanks for this – very helpful!

    The “girly” panel surprised me and then made me laugh. I’ve never seen a pink programming example before.

  2. Hi Holly.
    I am wondering if there is a good example of how to set all these styles related to BorderContainer (like borderStroke, backgroundFile(color and alpha and others) not in MXML but in CSS ? I need to apply the same look and feel to multiple containers, so…
    Thanks in advance.

  3. devgirl Says:

    Hi Luiz! Yes, you can set those globally in CSS such as:

    @namespace s “library://ns.adobe.com/flex/spark”;
    @namespace mx “library://ns.adobe.com/flex/mx”;
    borderColor: #336699;
    borderStyle: solid;
    borderWeight: 4;
    cornerRadius: 8;

    Or if you don’t want to apply to all then you can define a style name for the attributes and set the styleName property to it on the BorderContainer.

    Hope it helps!

  4. Thanks Holly! This was very helpful in my multi-touch exhibit I’m working on for dealing with various screens.

    I appreciate you.


    Don Kerr
    Space City AUG

  5. Dustin Tosh Says:

    An excellent blog post, there is little documentation on Flex 4 thus far, but this is great!

    Do you know if there is a way to define the background so that all of the nested containers will inherit the default color scheme of the parent border container?


  6. Nice and Excellent looks, its mean that we make cool GUI with spark controls/components rather then MX.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: