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).
