Setting the vertical gap in a vertical layout in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/23/setting-the-vertical-gap-in-a-vertical-layout-in-flex-gumbo/ -->
<s:Application name="Spark_Application_layout_VerticalLayout_gap_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout gap="{slider.value}" />
    </s:layout>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="VerticalLayout gap:">
                <s:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:Rect width="100%" height="40">
        <s:fill>
            <s:SolidColor color="red" />
        </s:fill>
    </s:Rect>
 
    <s:Rect width="100%" height="40">
        <s:fill>
            <s:SolidColor color="haloOrange" />
        </s:fill>
    </s:Rect>
 
    <s:Rect width="100%" height="40">
        <s:fill>
            <s:SolidColor color="yellow" />
        </s:fill>
    </s:Rect>
 
    <s:Rect width="100%" height="40">
        <s:fill>
            <s:SolidColor color="haloGreen" />
        </s:fill>
    </s:Rect>
 
    <s:Rect width="100%" height="40">
        <s:fill>
            <s:SolidColor color="haloBlue" />
        </s:fill>
    </s:Rect>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/23/setting-the-vertical-gap-in-a-vertical-layout-in-flex-gumbo/ -->
<s:Application name="Spark_Application_layout_VerticalLayout_gap_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.core.FlexGlobals;
            import mx.graphics.SolidColor;
            import mx.styles.StyleManager;
            import spark.components.HSlider;
            import spark.layouts.VerticalLayout;
            import spark.primitives.Rect;
 
            private var vLayout:VerticalLayout;
            private var slider:HSlider;
 
            private function init():void {
                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 20;
                slider.setStyle("liveDragging", true);
                slider.addEventListener(Event.CHANGE, slider_change);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "VerticalLayout gap:"
                formItem.addElement(slider);
 
                var form:Form = new Form();
                form.styleName = "plain";
                form.addElement(formItem);
 
                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addElement(form);
                addElementAt(appControlBar, 0);
 
                vLayout = new VerticalLayout();
                vLayout.gap = slider.value;
                FlexGlobals.topLevelApplication.layout = vLayout;
 
                var rect1:Rect = new Rect();
                rect1.percentWidth = 100;
                rect1.height = 40;
                rect1.fill = new SolidColor(StyleManager.getColorName("red"));
                addElement(rect1);
 
                var rect2:Rect = new Rect();
                rect2.percentWidth = 100;
                rect2.height = 40;
                rect2.fill = new SolidColor(StyleManager.getColorName("haloOrange"));
                addElement(rect2);
 
                var rect3:Rect = new Rect();
                rect3.percentWidth = 100;
                rect3.height = 40;
                rect3.fill = new SolidColor(StyleManager.getColorName("yellow"));
                addElement(rect3);
 
                var rect4:Rect = new Rect();
                rect4.percentWidth = 100;
                rect4.height = 40;
                rect4.fill = new SolidColor(StyleManager.getColorName("haloGreen"));
                addElement(rect4);
 
                var rect5:Rect = new Rect();
                rect5.percentWidth = 100;
                rect5.height = 40;
                rect5.fill = new SolidColor(StyleManager.getColorName("haloBlue"));
                addElement(rect5);
            }
 
            private function slider_change(evt:Event):void {
                FlexGlobals.topLevelApplication.layout.gap = slider.value;
            }
        ]]>
    </fx:Script>
 
</s:Application>