Monday, June 20, 2011

Creating Forms in Flex

Today we will start creating forms in Flex.

Forms can be found in pretty much every application that collects information from the user. A form can be created using a Form container, which you can later add form items to. You won't need to do much of layout design yourself, everything is done automatically, which really saves time.

The form container consists of 3 tags - a <mx:Form> tag, a <mx:FormHeading> tag and <mx:FormItem> tags for each of the form's items.

The mx:Form tag is the main container for the form. Inside it we put all the items we want.

Let's create an form example, that could be used for user registration on a website. The user will be asked to write their desired username, password, full name and age. We will split this information into two parts - Account information (username and password) and User information (full name, age). We will add a submit button that the user will press to finish registration.

So let's do it. First, we create the Form container.

<mx:Form>
</mx:Form>

Now for the first part of the information we're collecting - Account information. Add a Form Heading. We set its label value to display the text that we want it to:

<mx:FormHeading label="Account information" />

Next, we ask the user to enter their desired username. We create a FormItem object, and set its label to "Username". The label is what will appear on the left side of the form item. On the right side we add the text field that will actually be used for typing in the username. To add content to the right side of the form item, we include it between the FormItem tags.

<mx:FormItem label="Username"><s:TextInput id="username" /></mx:FormItem>

Similar with the password:

<mx:FormItem label="Password"><s:TextInput displayAsPassword="true" id="password" /></mx:FormItem>

Now the second part of the form - User information. Once again we add a form heading, and then each of the items.

<mx:FormHeading label="User information" />
<mx:FormItem label="First Name"><s:TextInput id="fname" /></mx:FormItem>
<mx:FormItem label="Last Name"><s:TextInput id="lname" /></mx:FormItem>
<mx:FormItem label="Age"><s:NumericStepper id="age" minimum="1" maximum="100" /></mx:FormItem>

Finally, we create a submit button. It isn't going to have any label in our form, like the other form items do.

<mx:FormItem><s:Button label="Register" id="registerbutton" /></mx:FormItem>

The full code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

<mx:Form>
<mx:FormHeading label="Account information" />
<mx:FormItem label="Username"><s:TextInput id="username" /></mx:FormItem>
<mx:FormItem label="Password"><s:TextInput displayAsPassword="true" id="password" /></mx:FormItem>
<mx:FormHeading label="User information" />
<mx:FormItem label="First Name"><s:TextInput id="fname" /></mx:FormItem>
<mx:FormItem label="Last Name"><s:TextInput id="lname" /></mx:FormItem>
<mx:FormItem label="Age"><s:NumericStepper id="age" minimum="1" maximum="100" /></mx:FormItem>
<mx:FormItem><s:Button label="Register" id="registerbutton" /></mx:FormItem>
</mx:Form>

</s:Application>

The result:



Thanks for reading!

No comments:

Post a Comment