Setting padding on a Spark VerticalLayout in Flex 4

The following example shows how you can set padding on a Spark VerticalLayout in Flex 4 by setting the paddingLeft, paddingRight, paddingTop and/or paddingBottom properties.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/20/setting-padding-on-a-spark-verticallayout-in-flex-gumbo/ -->
<s:Application name="Spark_VerticalLayout_padding_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="paddingLeft:">
                <s:HSlider id="sliderLeft"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <s:HSlider id="sliderRight"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <s:HSlider id="sliderTop"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <s:HSlider id="sliderBottom"
                           minimum="0"
                           maximum="50"
                           value="0" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel title="Spark Panel title"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="{sliderLeft.value}" paddingRight="{sliderRight.value}"
                    paddingTop="{sliderTop.value}" paddingBottom="{sliderBottom.value}" />
        </s:layout>
        <s:Button id="btn1"
                label="Red"
                baseColor="red"
                width="100%" height="100%" />
        <s:Button id="btn2"
                label="Orange"
                baseColor="haloOrange"
                width="100%" height="100%" />
        <s:Button id="btn3"
                label="Yellow"
                baseColor="yellow"
                width="100%" height="100%" />
        <s:Button id="btn4"
                label="Green"
                baseColor="haloGreen"
                width="100%" height="100%" />
        <s:Button id="btn5"
                label="Blue"
                baseColor="haloBlue"
                width="100%" height="100%" />
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

8 thoughts on “Setting padding on a Spark VerticalLayout in Flex 4

  1. Finally some Flex 4 apps that compile on the first try!

    I’ve been trying to fix Flex 4 apps that were posted since July of last year, and I’ve learned a bit, but your apps will help me learn even faster.

    Thanks for sharing Peter!

  2. lee probert,

    Yeah, it should work now, no problem:

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application name="Spark_Application_layout_VerticalLayout_padding_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 paddingLeft="{sliderLeft.value}"
                    paddingRight="{sliderRight.value}"
                    paddingTop="{sliderTop.value}"
                    paddingBottom="{sliderBottom.value}" />
        </s:layout>
     
        <mx:ApplicationControlBar width="100%" cornerRadius="0">
            <mx:FormItem label="paddingLeft:">
                <s:HSlider id="sliderLeft"
                        minimum="0"
                        maximum="50"
                        value="0"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <s:HSlider id="sliderRight"
                        minimum="0"
                        maximum="50"
                        value="0"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <s:HSlider id="sliderTop"
                        minimum="0"
                        maximum="50"
                        value="0"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <s:HSlider id="sliderBottom"
                        minimum="0"
                        maximum="50"
                        value="0"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:ApplicationControlBar>
     
        <s:Button label="btn"
                width="100%"
                height="100%" />
     
    </s:Application>

    Peter

  3. Hi there!
    I’m looking for a way to add padding to a TileLayout and it seems like it’s not possible… Any clue/tip?

    An option to be notified of follow-up comments would be awesome, by the way!
    Thanks for this nice blog and snippets.

  4. Wow I have actually managed to get this to work . I find Flex 4 is quite hard to grasp but usually worth the effort.

    1. @Steve,

      No real reason. The home page and RSS only show the text above that line, not the full entry, and I think I randomly started putting that instead of “Keep reading…”. Then again, that was a couple of blog themes ago.

      Peter

Comments are closed.