How to design Form Layout in Flex Using Container

The Adobe Flex is the combination of several languages designed for developing attractive projects without wasting so much time in coding or designing.

How to design Form Layout in Flex Using Container

How to design Form Layout in Flex Using Container

     

 

The Adobe Flex is the combination of several languages designed for developing attractive projects without wasting so much time in coding or designing. The MXML (magic extensible markup language) is similar to HTML, which includes CSS. It also takes support of several other languages like XML, PHP/MYSQL, Action Script, .NET and so on.

The following code shows how to build a contact form that supports XML list, some Action Script validation and then compile the whole application in swf format. In this tutorial we will add CSS to give some wonderful effects to the form and also validate the form to alert the user before submitting the form. Lets see the code first:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

In this Code the very first line tells about the version of XML that is used in the coding while the next line denotes about the MX Application code and layout. The entire coding is very similar to HTML coding as the whole code is written entirely with applying layout properties absolute that sets the position of the layout.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="Contact Form" styleName="Panel" height="600" width="550" paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10" y="20" x="250">

</mx:Panel>
</mx:Application>

The next step of the project is written for designing the Contact form. We have used the <mx:panel></mx:panel>code and also mentioned the height, width, title and stylename of the panel. In the stylename we have described the name of css as panel which has specific properties used for determining the size, colour and position of the panel.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel title="Contact Form" styleName="Panel" height="600" width="550" paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10" y="20" x="250">

<mx:Form width="100%" height="540">
<mx:FormHeading label="Enter the asking information" width="470" />

<mx:FormItem label="First Name :">
<mx:TextInput styleName="TextInput" id="fname" width="200" maxChars="10" restrict="A-Z" />
</mx:FormItem>

<mx:FormItem label="Last Name :">
<mx:TextInput id="lname" width="200" maxChars="10" restrict="A-Z" />
</mx:FormItem>

<mx:FormItem label="Date of Birth (mm/dd/yyyy) :">
<mx:TextInput id="dob" width="200" maxChars="10" restrict="0-9\\/-" />
</mx:FormItem>

<mx:FormItem label="E-mail Address :">
<mx:TextInput id="email" width="200" maxChars="30" restrict="a-z\\0-9\\@.-/" />
</mx:FormItem>

<mx:FormItem label="Residential Address :">
<mx:TextArea id="raddress" width="200" maxChars="30" restrict="a-z\\A-Z\\0-5000\\ \\@!./-=*" />
</mx:FormItem>

<mx:FormItem label="Age :">
<mx:TextInput id="age" width="200" restrict="0-60" />
</mx:FormItem>

<mx:FormItem label="City :">
<mx:TextInput id="city" width="200" restrict="A-Z//a-z" />
</mx:FormItem>

<mx:FormItem label="State">
<mx:ComboBox id="state">
<mx:dataProvider>
<mx:Object label="None" data="None"/>
<mx:Object label="Gujarat" data="Gujarat" />
<mx:Object label="Goa" data="Goa" />
<mx:Object label="Maharashtra" data="Maharashtra" />
<mx:Object label="Rajasthan" data="Rajasthan" />
<mx:Object label="Tamil Nadu" data="Tamil Nadu" />
<mx:Object label="Himachal Pradesh" data="Himachal Pradesh" />
<mx:Object label="Uttaranchal" data="Uttaranchal" />
<mx:Object label="Punjab" data="Punjab" />
<mx:Object label="Delhi " data="Delhi" />
<mx:Object label="Bihar " data="Bihar" />
<mx:Object label="Jharkhand " data="Jharkhand" />
<mx:Object label="Orissa " data="Orissa" />
<mx:Object label="West Bengal. " data="West Bengal." />
<mx:Object label="Karnataka " data="Karnataka " />
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>

<mx:FormItem label="Pin/Zip :">
<mx:TextInput id="pin" width="200" />
</mx:FormItem>

<mx:FormItem label="Contact No :">
<mx:TextInput id="contact" width="200" />
</mx:FormItem>

<mx:HBox paddingLeft="200" paddingTop="20" width="450" height="50">
<!--Press Submit-->
<mx:Button styleName="Button" label="Submit" />
<!--Press Reset-->
<mx:Button styleName="Button" label="Reset" click="ResetForm(event)" />
</mx:HBox>

</mx:Form>

</mx:Panel>
</mx:Application>

In this part of tutorial we have used several different tags and their properties <mx:form></mx:Form>, <mx:FormHeading />, <mx:FormItem> </mx:FormItem>, <mx:TextInput /> , <mx:ComboBox></mx:ComboBox>, <mx:dataProvider></mx:dataProvider> <mx:Object></mx:Object>, <mx:HBox></mx:HBox>.

<mx:form> tag in MXML is similar to <form> tag in html. The form container contains the number of tags like <mx:FormHeading /> which is used to give the heading of the form and then use the <mx:FormItem> tag to give the heading of the <mx:TextInput /> tag. <mx:TextInput /> tag is similar to the <input /> in html. In html if there are lots of categories we use dropdown button to set it in the form. Similar in flex we use ComboBox for the same. In the combo box you can use several tags to integrate several items in one field. The combo box combines the items in a group that can be arranged in an array which is called later in the coding. We have used three tags: <mx:dataProvider></mx:dataProvider> <mx:Object></mx:Object>. <mx:dataProvider> tag that contains all the desired information which we need.

Another important aspect about this form is that we can restrict the characters, numbers or symbols according to our choice. It depends what kind of information you are looking for and how much you want. In the First name input type i used the restrict A-Z, it means it will take only the capital letters.

For arranging the both buttons in one line we have used <mx:HBox></mx:HBox> and <mx:VBox></mx:VBox>tag. The first one is called horzontal box while later is called vertical. Here, we have described about the whole designing part and further we will describe about Stylesheet.

Use of External CSS

Panel {
padding-top:10;
padding-left:10;
padding-right:10;
padding-bottom:10;
borderColor: #7c8181;
border-thickness-left: 10;
border-thickness-top: 0;
border-thickness-right: 10;
border-thickness-bottom: 5;
rounded-bottom-corners: true;
borderAlpha: 1;
headerColors: #d7d7d7, #7c8181;
footerColors: #d7d7d7, #7c8181;
background-color: #ffffff;
shadow-direction: center;
title-style-name: "myPanelTitle";
}
.myPanelTitle {
color: #000000;
font-family: "Tahoma";
font-size: 12;
font-weight: bold;
}
Button {
font-family: "Tahoma";
font-size: 11;
color: #000000;
font-weight: bold;
text-roll-over-color: #ffffff;
text-selected-color: #000000;
theme-color: #7c8181;
fillAlphas: 1, 1, 1, 1;
fillColors: #d7d7d7, #d7d7d7, #7c8181, #7c8181;
}
ComboBox {
color: #000000;
border-color: #7c8181;
icon-color: #7c8181;
selection-color: #7c8181;
text-selected-color: #000000;
text-roll-over-color: #ffffff;
theme-color: #7c8181;
alternating-item-colors: #7c8181, #7c8181;
}
.errorTip {
borderColor: RED;
color: white;
fontSize: 12;
fontWeight: normal;
}

TextInput {
errorColor: RED;
color: #000000;
borderThicknessLeft: 10;
borderThicknessTop: 10;
borderThicknessBottom: 10;
borderThicknessRight: 10;
}

I hope you have learnt the implementation of components in flex. Now we start discussing about how to create css and how to implement into application. CSS in flex is little bit complex because of containg limitations. We can use CSS in several ways similar to html like Internal CSS, External CSS, Inline CSS or in <script>tag as well.

But i would like to suggest you to prefer External CSS because it enables the designers or developers to modify the whole numbers of pages at one shot through making changes in external CSS. So go to your src folder and do right click on the folder and make a new folder called assets and right click on that and make another folder called css. For making style click one time more on css folder.

After creating all the folders you can start describing properties in the style of different-different tags such as Panel, Button, ComboBox, TextInput. If you are fresher you can use a customized software - style explorer. After that mention style name to each tag where you need.

Use of Validation.

<!--Using Model tag for Validation-->
<mx:Model id="validation">
<User>
<FirstName>{fname.text}</FirstName>
<LastName>{lname.text}</LastName>
<DateofBirth>{dob.text}</DateofBirth>
<EmailAdd>{email.text}</EmailAdd>
<ResiAdd>{raddress.text}</ResiAdd>
<Age>{age.text}</Age>
<City>{city.text}</City>
<PinZip>{pin.text}</PinZip>
<ContactNo>{contact.text}</ContactNo>
</User>
</mx:Model>

<!--Using real validation tag for Validation-->

<mx:StringValidator source="{fname}" property="text" minLength="3" maxLength="10" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 10" />
<mx:StringValidator source="{lname}" property="text" minLength="3" maxLength="15" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 10" />
<mx:DateValidator source="{dob}" property="text" />
<mx:EmailValidator source="{email}" property="text" />
<mx:StringValidator source="{raddress}" property="text" minLength="10" maxLength="30" tooShortError="Your text must not be less than 10" tooLongError="Your text must not be more than 30" />
<mx:NumberValidator source="{age}" property="text" minValue="18" maxValue="60" />
<mx:StringValidator source="{city}" property="text" minLength="3" maxLength="20" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 20" />
<mx:ZipCodeValidator source="{pin}" property="text" />
<mx:PhoneNumberValidator source="{contact}" property="text" />

Here, we have used two types of validation tag - <mx:Model ></Model> and <mx:StringValidator />. The validating tag in MXML is very similar to XML based tree that contains its own individual tags and the ids of the form and input type are defined in those tags. We use <User> tag to indicate that this is the part for users to fill up it.

The second type of validation is used when you want to validate the required field of your flex form in chronological order.

<mx:StringValidator source="{fname}" property="text" minLength="3" maxLength="10"/>

<mx:StringValidator

The StringValidator is used for validating the inputted string according to set parameters which you need.

source="{fname}"

The source validator recognize the input string and validate it according to set parameters. For example: The id fname recognized the First Name inputted by the user and validate it according to set parameters. 0

After defining the source validator, we will have to set the properties type of this field like text or string and its length too. If the user input the fill according to the set properties, it accept the input, otherwise generate error codes.

property="text", minLength="3" maxLength="10", tooShortError tooLongError

We have set the property of First Name field as text and also determined the length of the text between 3 to 10 which means it only accept the text between the length of 3 to 10 characters. If the user input more or less characters in the field an error occured displaying the message too short or too long depending upon the input text.
Use of ActionScript 1

<mx:Script>
<![CDATA[
private function ResetForm(evt:MouseEvent):void
{
fname.text = "";
lname.text = "";
dob.text = "";
email.text = "";
raddress.text = "";
age.text = "";
city.text = "";
pin.text = "";
contact.text = "";
states.selectedIndex = -1;
}
]]>
</mx:Script>

Here, we would describe how to use ActionScript in the contact form. First mention a tag <mx:Script> then a CDATA section. A CDATA section is a section of element of content marked for preventing the compiler from debugging the code as markup. The CDATA section enables the code to be parsed by the parser ignoring the text between the CDATA section.

Within the CDATA section we can write the prime code of the program as we have called the private function ResetForm(evt:MouseEvent): by setting properties.

Changes in Combo Box 2

<mx:FormItem label="State :">
<mx:ComboBox styleName="ComboBox" id="state" prompt="--Select a State--" selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />
</mx:FormItem>

The properties of 'changes in ComboBox' has been set in such a way that whenever the user makes changes in the name of the state, the ComboBox identifier recognizes the new input and display it in the text box by replacing the previous selected data.

Use of XML

<mx:XMLList id="statesXMLList">
<state label="None" data="None" />
<state label="Gujarat" data="Gujarat" />
<state label="Goa" data="Goa" />
<state label="Maharashtra" data="Maharashtra" />
<state label="Rajasthan" data="Rajasthan" />
<state label="Tamil Nadu" data="Tamil Nadu" />
<state label="Himachal Pradesh" data="Himachal Pradesh" />
<state label="Uttaranchal" data="Uttaranchal" />
<state label="Punjab" data="Punjab" />
<state label="Delhi " data="Delhi " />
<state label="Bihar " data="Bihar " />
<state label="Jharkhand " data="Jharkhand " />
<state label="Orissa " data="Orissa " />
<state label="West Bengal. " data="West Bengal. " />
<state label="Karnataka " data="Karnataka " />
</mx:XMLList>

For using the XML List we have to define the label according to requirement as we have set the label of the state with the name of the state and the data as well. 3

Compilation of all the languages

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="assets/css/style.css" />

<!--Using Model tag for Validation-->
<mx:Model id="validation">
<User>
<FirstName>{fname.text}</FirstName>
<LastName>{lname.text}</LastName>
<DateofBirth>{dob.text}</DateofBirth>
<EmailAdd>{email.text}</EmailAdd>
<ResiAdd>{raddress.text}</ResiAdd>
<Age>{age.text}</Age>
<City>{city.text}</City>
<PinZip>{pin.text}</PinZip>
<ContactNo>{contact.text}</ContactNo>
</User>
</mx:Model>

<!--Using real validation tag for Validation-->

<mx:StringValidator source="{fname}" property="text" minLength="3" maxLength="10" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 10" />
<mx:StringValidator source="{lname}" property="text" minLength="3" maxLength="15" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 10" />
<mx:DateValidator source="{dob}" property="text" />
<mx:EmailValidator source="{email}" property="text" />
<mx:StringValidator source="{raddress}" property="text" minLength="10" maxLength="30" tooShortError="Your text must not be less than 10" tooLongError="Your text must not be more than 30" />
<mx:NumberValidator source="{age}" property="text" minValue="18" maxValue="60" />
<mx:StringValidator source="{city}" property="text" minLength="3" maxLength="20" tooShortError="Your text must not be less than 3" tooLongError="Your text must not be more than 20" />
<mx:ZipCodeValidator source="{pin}" property="text" />
<mx:PhoneNumberValidator source="{contact}" property="text" />

<mx:Script>
<![CDATA[
private function ResetForm(evt:MouseEvent):void
{
fname.text = "";
lname.text = "";
dob.text = "";
email.text = "";
raddress.text = "";
age.text = "";
city.text = "";
pin.text = "";
contact.text = "";
states.selectedIndex = -1;
}
]]>
</mx:Script> 4


<mx:XMLList id="statesXMLList">
<mx:Object label="None" data="None" />
<state label="Gujarat" data="Gujarat" />
<state label="Goa" data="Goa" />
<state label="Maharashtra" data="Maharashtra" />
<state label="Rajasthan" data="Rajasthan" />
<state label="Tamil Nadu" data="Tamil Nadu" />
<state label="Himachal Pradesh" data="Himachal Pradesh" />
<state label="Uttaranchal" data="Uttaranchal" />
<state label="Punjab" data="Punjab" />
<state label="Delhi " data="Delhi " />
<state label="Bihar " data="Bihar " />
<state label="Jharkhand " data="Jharkhand " />
<state label="Orissa " data="Orissa " />
<state label="West Bengal. " data="West Bengal. " />
<state label="Karnataka " data="Karnataka " />
</mx:XMLList>


<mx:Panel title="Contact Form" styleName="Panel" height="600" width="550" paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10" y="20" x="250">
<mx:Form width="100%" height="540">
<mx:FormHeading label="Enter the asking information" width="470" />

<mx:FormItem label="First Name :">
<mx:TextInput styleName="TextInput" id="fname" width="200" maxChars="10" restrict="A-Z" />
</mx:FormItem>

<mx:FormItem label="Last Name :">
<mx:TextInput id="lname" width="200" maxChars="10" restrict="A-Z" />
</mx:FormItem>

<mx:FormItem label="Date of Birth (mm/dd/yyyy) :">
<mx:TextInput id="dob" width="200" maxChars="10" restrict="0-9\\/-" />
</mx:FormItem>

<mx:FormItem label="E-mail Address :">
<mx:TextInput id="email" width="200" maxChars="30" restrict="a-z\\0-9\\@.-/" />
</mx:FormItem>

<mx:FormItem label="Residential Address :">
<mx:TextArea id="raddress" width="200" maxChars="30" restrict="a-z\\A-Z\\0-5000\\ \\@!./-=*" />
</mx:FormItem>

<mx:FormItem label="Age :">
<mx:TextInput id="age" width="200" restrict="0-60" />
</mx:FormItem>

<mx:FormItem label="City :">
<mx:TextInput id="city" width="200" restrict="A-Z//a-z" />
</mx:FormItem>

<mx:FormItem label="State :">
<mx:ComboBox styleName="ComboBox" id="state" prompt="--Select a State--" selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />
</mx:FormItem>

<mx:FormItem label="Pin/Zip :">
<mx:TextInput id="pin" width="200" />
</mx:FormItem>

<mx:FormItem label="Contact No :">
<mx:TextInput id="contact" width="200" />
</mx:FormItem>

<mx:HBox paddingLeft="200" paddingTop="20" width="450" height="50">
<!--Press Submit-->
<mx:Button styleName="Button" label="Submit" />
<!--Press Reset-->
<mx:Button styleName="Button" label="Reset" click="ResetForm(event)" />
</mx:HBox>

</mx:Form>
</mx:Panel>
</mx:Application>

 

  5