How to Design Text/Edit Input Boxes Neatly using FormLayout

Designing text input dialogs and data editors should be easy, and Flex 4.5 provides FormLayout exactly for this purpose. Your labels and input/edit components will align nicely and re-layout automatically when the application is resized, when the user rotates the device orientation from portrait to landscape and vice versa.

Make sure to wrap the Group with FormLayout inside the Scroller Spark component, so the form items can use touch scrolling by swiping your finger on the screen. It's also necessary because forms that look great on portrait orientation may need to be scrolled vertically on landscape orientation.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for using FormLayout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Manual posting of article, for development mode -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Post an article">
    <s:actionContent>
        <s:Button label="Randomize" click="randomizeBtn_clickHandler(event)"/>
        <s:Button label="Post" click="postBtn_clickHandler(event)"/>
    </s:actionContent>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
           
            import mx.binding.utils.BindingUtils;
            //var article:Object = {title: "Computer available", body: "Lenovo is releasing new laptop."};
            [Bindable] private var article:Article = new Article("Computer available", "Lenovo has released Y450 laptop.");
           
            protected function randomizeBtn_clickHandler(event:MouseEvent):void
            {
                var companies:Array = ["Microsoft", "Intel", "Google", "Apple"];
                article.title = companies[Math.floor(Math.random() * companies.length)] + " profits $" + Math.floor(Math.random() * 1000) + " millions";
            }
           
            protected function postBtn_clickHandler(event:MouseEvent):void
            {
                //validateNow();
                Persistence.instance.article.create(article);
            }
           
        ]]>
    </fx:Script>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:Group width="100%">
            <s:layout>
                <s:FormLayout/>
            </s:layout>
            <s:FormItem label="Title" width="100%">
                <s:TextInput text="@{article.title}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Summary" width="100%">
                <s:TextInput text="@{article.summary}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Body" width="100%">
                <s:TextArea text="@{article.body}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Published" width="100%">
                <s:TextInput text="@{article.pubDateStr}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="Author" width="100%">
                <s:TextInput text="@{article.author}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="URL" width="100%">
                <s:TextInput text="@{article.url}" width="100%"/>
            </s:FormItem>
        </s:Group>
    </s:Scroller>
</s:View>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).