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">
		<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!