Arul Blog

Flex runtime spacer

I am using Flex 4 for one of my Flex project. That project needs some dynamic spacing between the components. Here is the example code for the runtime spacer. I am using spark components here.

Code:

[xml]
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Spacer_Test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<s:controlBarContent>
<s:Label text="Space (px):" />
<s:HSlider id="sl" minimum="0" maximum="600" value="200" />
</s:controlBarContent>
<s:HGroup top="20" horizontalCenter="0">
<s:VGroup>
<s:Button id="button1" label="Me" />
</s:VGroup>
<s:VGroup id="vSpacer" width="{sl.value}" >
<s:Rect width="{sl.value}" height="0" />
</s:VGroup>
<s:VGroup>
<s:Button id="button2" label="You" />
</s:VGroup>
</s:HGroup>
</s:Application>
[/xml]

Running example:

Comments