Flex 4 BorderContainer – Quick and Useful Spark Component

December 3, 2009By 14 Comments

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">
		<s:backgroundFill>
			<!-- 0 rotation creates left to right gradient -->
			<s:LinearGradient rotation="0">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
			</s:LinearGradient>
		</s:backgroundFill>
		<s:Label text="Left to Right Gradient" horizontalCenter="0" verticalCenter="0"/>
	</s:BorderContainer>

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">
		<s:backgroundFill>
			<!-- 180 rotation creates right to left gradient -->
			<s:LinearGradient rotation="180">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
			</s:LinearGradient>
		</s:backgroundFill>
		<s:Label text="Right to Left Gradient" horizontalCenter="0" verticalCenter="0"/>
	</s:BorderContainer>

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:fill>
                                         <s:BitmapFill source="@Embed('adobelogo.jpg')" alpha="0.2"/>
                                  </s:fill>
                     </s:Rect>
          </s:BorderContainer>

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:borderStroke>
			<s:LinearGradientStroke weight="10" rotation="270">
				<s:GradientEntry color="0xF655E5"/>
				<s:GradientEntry color="0x6600CC"/>
			</s:LinearGradientStroke>
		</s:borderStroke>
		<s:Label horizontalCenter="0" verticalCenter="0" text="My very girly BorderContainer"/>
	</s: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!

Filed in: Adobe FlexFlex 4Flex/AIR Tags:

About the Author ()

Comments (14)

Trackback URL | Comments RSS Feed

  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. Luiz says:

    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”;
    s|BorderContainer{
    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!
    Holly

  4. Don Kerr says:

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

    I appreciate you.

    Don

    Don Kerr
    Space City AUG
    http://spacecityaug.com

  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?

    Thanks,
    Dustin

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

    Thanks

  7. Pablo says:

    Hi Holly, thanks for the post. Following up the question asked by Luiz, is there a way to set in CSS the background gradient colors?
    Thanks
    Pablo

  8. RichMcGillicuddy says:

    How would you dynamic load a background in the borderContainer? Playing with the 4.5 preview and the backgroundImage property doesn’t seem to be exposed.

  9. RichMcGillicuddy says:

    Nevermind, found it..

  10. RichMcGillicuddy says:

    Spoke too soon. Using all the examples that do a

    bcTest.setStyle(“backgroundImage”, img);

    Where img is above…I’ve tried an image, loader and bitmap. What type of object do I need to place there in order for a background image to show up?

  11. hurka says:

    Thanks, nice tutorial!

  12. dyfire says:

    i find so long, thanks !!it is useful to me!

  13. MauCruz says:

    Your work is as beautiful as you!!

  14. gumus alyans says:

    stupid question may be, but how can I position the window? it only allows width and height, but no X and Y.

Leave a Reply