My favorite Flex 2 Feature du jour: Scale9

I’ve seen lots of posts about the scale9 functionality of flash 8 and flex 2, but it wasn’t until I needed it for a project that I realized just how
cool and useful it really is.

I’d always disregarded it as just another "design feature" of flash, but when a client asked for a custom background element in a ListBox
and DataGrid, I finally had a use for scale9, and saw the power of it. The background was a gradient rounded rectangle, and needed to fill
all the available space in the cell. Using scale9, it was a breeze. All I had to do was determine which parts of the graphic should always
stay the same, and which parts should stretch. In my case, I needed the left and right edges (which contained the curves of the box) to be fixed,
so that stretching the control didnt stretch the curves, and the middle to stay fixed. One limitation with scale9 in flex is that the image must be
embedded. I havent used scale9 in a pure flash app, so i dont know if the same restriction applies there

Here is a simplified version which shows the scale9 at work in a flex app:

MainApp.mxml
—-

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute"

creationComplete="initApp()">

<mx:Script>

<![CDATA[

private var aPeople:Array = new Array("Jeff","Lisa","Kali");

private function initApp():void{

list.dataProvider=aPeople;

}

]]>

</mx:Script>

<mx:VBox width="50%">

<mx:List id="list" width="100%" itemRenderer="BlueBar" />

</mx:VBox>

</mx:Application>

BlueBar.mxml
——–

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

<mx:Script>

<![CDATA[

[Bindable]

[Embed(source='assets/selector2.png', scaleGridLeft='8', scaleGridRight='240', scaleGridTop='1', scaleGridBottom='18')]

private var theImage:Class;

]]>

</mx:Script>

<mx:Image id="image" source="{theImage}" x="0" width="95%" maintainAspectRatio="false"/>

<mx:Label id="txt" text="{data}" width="{image.width-50}" x="5" y="0" color="#000000" />

</mx:Canvas>

Notice how the embed tag for the graphic specifies the scale 9 coordinates, in this case, we are fixing in place the the left and right 8 pixels
(note, you need to specify some valid coordinate for top and bottom, since the graphic was 18×248, I specified 1 and 18, to fix the top and
bottom row of pixels in place).
The other trick I found was that the maintainAspectRatio had to be set to false, or it would try to scale the whole image.
Now, as the application runs, regardless how big or small the List box is, the background image has the same rounded corners.