Setting the custom layout on a Spark FormItem control in Flex Hero

The following example shows how you can set a custom layout on a Spark FormItem control in Flex Hero by setting the layout property on the FormItem container to a HorizontalLayout 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/28/setting-the-custom-layout-on-a-spark-formitem-control-in-flex-hero/ -->
<s:Application name="Spark_FormItem_layout_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:Form defaultButton="{submitBtn}">
        <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 “Setting the custom layout on a Spark FormItem control in Flex Hero

    1. I’m interested in that too !
      I reduced the gap of FormLayout but the FormItems are still too big.

  1. I set the paddingLeft=”-20″ of the FormItem Layout. Its not nice but so far the only way I found out. I dont understand where this default 20 ident is hidden in the framework :)

Comments are closed.