Setting padding on a Spark VerticalLayout in Flex 4

By Peter deHaan On May 20, 2009 · 8 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

8 Responses to Setting padding on a Spark VerticalLayout in Flex 4

Greg Lafrance says:

May 26, 2009 at 10:35 pm

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!

Reply
lee probert says:

June 11, 2009 at 1:41 am

does this work on the Application layout too? I remember trying this in Gumbo a couple of months ago and it didn’t work.

Reply

Peter deHaan says:

June 11, 2009 at 9:31 pm

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

Quentin says:

August 17, 2009 at 1:55 pm

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.

Reply
- Tomas Sancio says:
  
  December 3, 2010 at 8:20 am
  
  For the record, TileLayout doesn’t support padding=”0″. To achieve the same result, use horizontalGap and verticalGap.
  
  Reply
Jaclyn Vincent says:

November 13, 2009 at 2:58 am

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

Reply
Steve Frog says:

March 7, 2011 at 1:23 pm

Why do you have “Full code after the jump.” when there’s no break/jump/ads.

Reply
- Peter deHaan says:
  
  March 7, 2011 at 1:45 pm
  
  @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
  
  Reply