Form Layout Container in Flex4


 

Form Layout Container in Flex4

The Form Layout container is a MX container. There is no Spark equivalent. Flex uses the Form Layout container for making a Form.

The Form Layout container is a MX container. There is no Spark equivalent. Flex uses the Form Layout container for making a Form.

Form Layout Container in Flex4:

The Form Layout container is a MX container. There is no Spark equivalent.
Flex uses the Form Layout container for making a Form. The Form container controls the layout of form, required field option, validation and binding the data to the flex data model for checking a valid data. You can use the style sheet for better appearance of form. You can use the FormHeading component for show the form heading like Registration Form. The FormHeading component nested in the Form container. The FormItem component is used for form fields which is in your form like Name, Age and contact no. etc. You can use the verticalGap property for gap between two form items, indicator property for gap between field name and component. You can use the validator for validating a component value. The tag of Form container is <mx:Form>.

Example:

<?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"

minWidth="955" minHeight="600" height="634">

<fx:Style>

.field{

color:White;

font-weight:bold;

}

</fx:Style>

<fx:Declarations>

<mx:StringValidator source="{txt1}" property="text" minLength="4" maxLength="12"/>

<mx:PhoneNumberValidator source="{txt11}" property="text"/>

<mx:EmailValidator source="{txt4}" property="text"/>

<mx:ZipCodeValidator source="{txt10}" property="text"/>

</fx:Declarations>

<s:Panel title="Form Layout Container Example" width="599" height="572">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:Form backgroundColor="0x003366" width="598">

<mx:FormHeading label="Registration Form" fontSize="18" fontFamily="verdhana" color="white"/>

<mx:FormItem label="User Name:" required="true" labelStyleName="field">

<mx:TextInput id="txt1" text="User Name" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="First Name:" labelStyleName="field">

<mx:TextInput id="txt2" text="First Name" fontStyle="italic"/>

0

</mx:FormItem>

<mx:FormItem label="Last Name:" labelStyleName="field">

<mx:TextInput id="txt3" text="Last Name" fontStyle="italic"/>

1

</mx:FormItem>

<mx:FormItem label="Email-ID:" required="true" labelStyleName="field">

<mx:TextInput id="txt4" text="Email ID" fontStyle="italic"/>

2

</mx:FormItem>

<mx:FormItem label="Password:" required="true" labelStyleName="field">

<mx:TextInput id="txt5" text="Password" displayAsPassword="true"/>

3

</mx:FormItem>

<mx:FormItem label="Confirm Password:" required="true" labelStyleName="field">

<mx:TextInput id="txt6" text="Confirm Password" displayAsPassword="true"/>

4

</mx:FormItem>

<mx:FormItem label="Gender:" labelStyleName="field">

<s:HGroup>

5

<s:RadioButton groupName="gen" label="Male" selected="true" color="white"/>

<s:RadioButton groupName="gen" label="Female" color="white"/>

</s:HGroup>

6

</mx:FormItem>

<mx:FormItem label="Marital Status:" labelStyleName="field">

<s:HGroup>

7

<s:RadioButton id="gen1" label="Single" selected="true" color="white"/>

<s:RadioButton id="gen2" label="Married" color="white"/>

</s:HGroup>

8

</mx:FormItem>

<mx:FormItem label="D.O.B.:" required="true" labelStyleName="field">

<mx:DateField text="Select Date" fontStyle="italic"/>

9

</mx:FormItem>

<mx:FormItem label="Address:" labelStyleName="field">

<mx:TextInput id="txt7" text="Address line 1" fontStyle="italic"/>

0

</mx:FormItem>

<mx:FormItem>

<mx:TextInput id="txt8" text="Address line 2" fontStyle="italic"/>

1

</mx:FormItem>

<mx:FormItem label="City:" labelStyleName="field">

<mx:TextInput id="txt9" text="City" fontStyle="italic"/>

2

</mx:FormItem>

<mx:FormItem label="State:" labelStyleName="field">

<s:DropDownList id="drp" width="161" prompt="Select State">

3

<s:ArrayCollection>

<fx:String>Uttar Predesh</fx:String>

<fx:String>Delhi</fx:String>

4

<fx:String>Hariyana</fx:String>

<fx:String>Maharastra</fx:String>

<fx:String>Punjab</fx:String>

5

</s:ArrayCollection>

</s:DropDownList>

</mx:FormItem>

6

<mx:FormItem label="ZIP Code:" labelStyleName="field">

<mx:TextInput id="txt10" text="ZIP Code" fontStyle="italic"/>

</mx:FormItem>

7

<mx:FormItem label="Mobile No.:" required="true" labelStyleName="field">

<mx:TextInput id="txt11" text="+91 Mobile No" fontStyle="italic"/>

</mx:FormItem>

8

<mx:FormItem>

<s:CheckBox label="I accept the term and conditions" color="white"/>

</mx:FormItem>

9

<mx:FormItem>

<s:HGroup>

<s:Button id="btn" label="Submit"/>

0

<s:Button id="btn1" label="Reset"/>

</s:HGroup>

</mx:FormItem>

1

</mx:Form>

</s:Panel>

</s:Application>

2

 

In this example you can see how we can use a Form Layout Container control in Flex4.

Output:

3

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Get Adobe Flash player

Download this code

4

Ads