Changing the gap between form items in a Spark Form container in Flex Hero

The following example shows how you can set the gap between form items in a Spark Form container in Flex Hero by setting the gap property on the Form container’s layout object.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/29/changing-the-gap-between-form-items-in-a-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_FormLayout_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/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="gap:" backgroundAlpha="0.0">
                <s:HSlider id="sl" value="7" change="frmLay.gap = sl.value;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|FormHeading {
            backgroundColor: purple;
        }
 
        s|FormItem {
            backgroundColor: red;
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}">
        <s:layout>
            <s:FormLayout id="frmLay" gap="7" />
        </s:layout>
        <s:FormHeading label="Spark Form Heading" />
        <s:FormItem label="Username:">
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem label="Password:">
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem label="Confirm password:">
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

View source is enabled in the following example.

[GoogleAdsWide]

This entry is based on a beta version of the Flex Hero 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 Hero SDK.

3 thoughts on “Changing the gap between form items in a Spark Form container in Flex Hero

  1. A very useful example.

    Can you tell me how I could change the “padding” of a form item, also?

    Thank you.

  2. Hi,
    Thanks for the tip. I want a certain gap set for all the forms in my app. Do you know if there is a way to do this with CSS selectors?
    I tried…

    s|FormLayout
    {
    gap:-10;
    }

    No luck.

Comments are closed.