Home » Flex 3 Tutorials, My Tutorials, Tutorials, Writing

Design A Contact Form in Flex Part III

19 January 2009 No Comment

Hopefully you have able to get a grasp on my first tutorials on how to design a flex form and then be able to stylize it with CSS. So now on to set up your form to validate and of course being able to reset your form as well., and before we get to the actual coding I break down the tags that will be used in this tutorial and what their roles are. Of course, since my newbieness really starts here I try my best to explain these tags.

The first tag I will cover for setting up the validation is the <mx:Model></mx:Model> tag, and since I don’t understand this tag as much as what I have covered so far I try to explain based on what is told about this tag. From what I understand about the model tag it is used as a temporary way to store data before it is sent through the server. Or another way to look at is that you can use the model tag to update your data that is stored through a database.

To get more of an idea on how this tag works I suggest reading the information provided by adobe to get a better understanding of it.

http://www.adobe.com/devnet/flex/quickstar…ng_data_models/

The next tag that is actually coded into flex is the validator tag and I can say that every coding format should have something list and it would make validation so much easier and I tell you why.

Because every aspect of the form can be validated from names to zip codes and you don’t have to mess around with coding like you would do in JavaScript, PHP and ASP. Interestingly enough you can even force country specific zip codes into form using a ZipCodeValidatorDomainType and right now all that I was able to find is forcing zip codes for US and Canada only so maybe in a future tutorial we can really deep and dirty with a form.

To get an idea what validators can be used go to this link http://livedocs.adobe.com/flex/2/langref/m…age-detail.html and see example code snippets on how these are set up. Of course, you get a good idea what can be done with these validators when you look at the source code in which I break down the different parts to this validator tags.

OK So let us get validating, the first part is setting up the model for the validation and you would want to set this up the way your form is to keep it organized and know where everything is and connected.

CODE

<mx:Model id="validate">
<User>
<FirstName>{fname.text}</FirstName>
<MiddleName>{mname.text}</MiddleName>
<LastName>{lname.text}</LastName>
<DOB>{dob.text}</DOB>
<Email>{email.text}</Email>
<Age>{age.text}</Age>
<SSN>{ssn.text}</SSN>
<City>{city.text}</City>
<Zip>{zip.text}</Zip>
<Phone>{phone.text}</Phone>
<Credit>{credit.text}</Credit>
</User>
</mx:Model>

If you notice it looks like a XML based tree with its own individual tags and within those tags are the ids of the forms and type of input it is, and in this case in text form. As for the <User> I believe that is in reference to user input or the person who is using the form at the time this is all running.

Also if you remember me mention about the location of the <mx:Model></mx:Model> tags it would look something like this:

CODE


<mx:Application styleName="Application" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="../src/global.css"/>
<mx:Model id="validate">
<User>
<FirstName>{fname.text}</FirstName>
<MiddleName>{mname.text}</MiddleName>
<LastName>{lname.text}</LastName>
<DOB>{dob.text}</DOB>
<Email>{email.text}</Email>
<Age>{age.text}</Age>
<SSN>{ssn.text}</SSN>
<City>{city.text}</City>
<Zip>{zip.text}</Zip>
<Phone>{phone.text}</Phone>
<Credit>{credit.text}</Credit>
</User>
</mx:Model>
<mx:Panel title="Sample Form" height="550" width="479" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="20" x="250">
<mx:Form width="430" height="462">
<mx:FormHeading label="Fill out all required information" width="389"/>

<mx:FormItem label=”First Name”>
<mx:TextInput id=”fname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Middle Name”>
<mx:TextInput id=”mname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Last Name”>
<mx:TextInput id=”lname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Date of Birth (mm/dd/yyyy)”>
<mx:TextInput id=”dob” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”E-mail Address”>
<mx:TextInput id=”email” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Age”>
<mx:TextInput id=”age” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”SSN”>
<mx:TextInput id=”ssn” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”City”>
<mx:TextInput id=”city” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”State”>
<mx:ComboBox id=”state”>
<mx:dataProvider>
<mx:Object label=”None” data=”None”/>
<mx:Object label=”Alabama” data=”Alabama”/>
<mx:Object label=”Alaska” data=”Alaska”/>
<mx:Object label=”Arizona” data=”Arizona”/>
<mx:Object label=”Arkansas” data=”Arkansas”/>
<mx:Object label=”California” data=”California”/>
<mx:Object label=”Colorado” data=”Colorado”/>
<mx:Object label=”Connecticut” data=”Connecticut”/>
<mx:Object label=”Delaware” data=”Delaware”/>
<mx:Object label=”District of Columbia” data=”District of Columbia”/>
<mx:Object label=”Florida” data=”Florida”/>
<mx:Object label=”Georgia” data=”Georgia”/>
<mx:Object label=”Hawaii” data=”Hawaii”/>
<mx:Object label=”Idaho” data=”Idaho”/>
<mx:Object label=”Illinois” data=”Illinois”/>
<mx:Object label=”Indiana” data=”Indiana”/>
<mx:Object label=”Iowa” data=”Iowa”/>
<mx:Object label=”Kansas” data=”Kansas”/>
<mx:Object label=”Kentucky” data=”Kentucky”/>
<mx:Object label=”Louisiana” data=”Louisiana”/>
<mx:Object label=”Maine” data=”Maine”/>
<mx:Object label=”Maryland” data=”Maryland”/>
<mx:Object label=”Massachusetts” data=”Massachusetts”/>
<mx:Object label=”Michigan” data=”Michigan”/>
<mx:Object label=”Minnesota” data=”Minnesota”/>
<mx:Object label=”Mississippi” data=”Mississippi”/>
<mx:Object label=”Missouri” data=”Missouri”/>
<mx:Object label=”Montana” data=”Montana”/>
<mx:Object label=”Nebraska” data=”Nebraska”/>
<mx:Object label=”Nevada” data=”Nevada”/>
<mx:Object label=”New Hampshire” data=”New Hampshire”/>
<mx:Object label=”New Jersey” data=”New Jersey”/>
<mx:Object label=”New Mexico” data=”New Mexico”/>
<mx:Object label=”New York” data=”New York”/>
<mx:Object label=”North Carolina” data=”North Carolina”/>
<mx:Object label=”North Dakota” data=”North Dakota”/>
<mx:Object label=”Ohio” data=”Ohio”/>
<mx:Object label=”Oklahoma” data=”Oklahoma”/>
<mx:Object label=”Oregon” data=”Oregon”/>
<mx:Object label=”Pennsylvania” data=”Pennsylvania”/>
<mx:Object label=”Rhode Island” data=”Rhode Island”/>
<mx:Object label=”South Carolina” data=”South Carolina”/>
<mx:Object label=”South Dakota” data=”South Dakota”/>
<mx:Object label=”Tennessee” data=”Tennessee”/>
<mx:Object label=”Texas” data=”Texas”/>
<mx:Object label=”Utah” data=”Utah”/>
<mx:Object label=”Vermont” data=”Vermont”/>
<mx:Object label=”Virginia” data=”Virginia”/>
<mx:Object label=”Washington” data=”Washington”/>
<mx:Object label=”West Virginia” data=”West Virginia”/>
<mx:Object label=”Wisconsin” data=”Wisconsin”/>
<mx:Object label=”Wyoming” data=”Wyoming”/>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label=”Zip”>
<mx:TextInput id=”zip” width=”200″/>
</mx:FormItem>
<mx:FormItem label=”Phone”>
<mx:TextInput id=”phone” width=”200″/>
</mx:FormItem>
<mx:FormItem label=”Card Type”>
<mx:ComboBox id=”cardType”>
<mx:dataProvider>
<mx:Object label=”None” data=”None”/>
<mx:Object label=”American Express” data=”American Express”/>
<mx:Object label=”Discover” data=”Discover”/>
<mx:Object label=”MasterCard” data=”MasterCard”/>
<mx:Object label=”Visa” data=”Visa”/>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label=”Credit Card Number”>
<mx:TextInput id=”credit”/>
</mx:FormItem>
<mx:HBox paddingLeft=”150″ paddingTop=”10″ width=”297″ height=”38″>
<!– Trigger submit. –>
<mx:Button styleName=”sButtonStyle” label=”Submit” />
<!– Trigger reset. –>
<mx:Button label=”Reset”/>
</mx:HBox>
</mx:Form>
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

Now for the validator strings:

CODE

<mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
<mx:StringValidator source="{mname}" property="text" minLength="4" maxLength="12"/>
<mx:StringValidator source="{lname}" property="text" minLength="4" maxLength="12"/>
<mx:StringValidator source="{credit}" property="text" minLength="16" maxLength="16"/>
<mx:PhoneNumberValidator source="{phone}" property="text"/>
<mx:DateValidator source="{dob}" property="text"/>
<mx:EmailValidator source="{email}" property="text"/>
<mx:NumberValidator source="{age}" property="text" minValue="18" maxValue="100"/>
<mx:SocialSecurityValidator source="{ssn}" property="text"/>
<mx:StringValidator source="{city}" property="text" minLength="4" maxLength="12"/>
<mx:ZipCodeValidator source="{zip}" property="text"/>

As you will notice the validator group is not incase in any tags to group them but instead are in their own individual tags, just in case you only want to validate one aspect of your flex form.

So let us break down the layout of each string to see what is all used here in the above code snippet.

<mx:StringValidator source=”{fname}” property=”text” minLength=”4″ maxLength=”12″/>

<mx:StringValidator

This part indicates what kind of validator it is which is a String Validator, basically meaning any string of text that is inputted within the form has to hold some sort of validation depending on other parameters you used.

source=”{fname}”

In this part of the validation, your placing an identifier on what this validation string is validation and in this case, it is set up to validation the First Name of your form.

property=”text”

This identifies what is going to be validated and in this instance it is the text within the Text Input container.

minLength=”4″ maxLength=”12″

Now this is part of the parameters aspect of the validation tag and with MinLength and maxLenth, your setting the text input to be no less than 4 characters in length and no more than 12 characters in its maximum length.

Along with those two parameters, you can also display error messages with the use of tooLongError and tooShortError. With these two strings, you can put some text within quotes giving a user error and letting them know they need to fix it.

Below is an example of what this would look like, but it is not used for this tutorial at this time.

CODE

<mx:StringValidator
maxLength="4"
minLength="12"
tooLongError="This string is longer than the maximum allowed length. This must be less than {12} characters long."
tooShortError="This string is shorter than the minimum allowed length. This must be at least {4} characters long."
/>

As for where you want to place these validation tags it don’t matter much so if you wanted to you could place them right after the model tag group and maybe use comments to properly identify each group like so:

CODE

<!--This is the Model for the Validating this form-->

<mx:Model id=”validate”>
<User>
<FirstName>{fname.text}</FirstName>
<MiddleName>{mname.text}</MiddleName>
<LastName>{lname.text}</LastName>
<DOB>{dob.text}</DOB>
<Email>{email.text}</Email>
<Age>{age.text}</Age>
<SSN>{ssn.text}</SSN>
<City>{city.text}</City>
<Zip>{zip.text}</Zip>
<Phone>{phone.text}</Phone>
<Credit>{credit.text}</Credit>
</User>
</mx:Model>
<!–This is the actual validation tag group used to validate the form–>

<mx:StringValidator source=”{fname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{mname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{lname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{credit}” property=”text” minLength=”16″ maxLength=”16″/>
<mx:PhoneNumberValidator source=”{phone}” property=”text”/>
<mx:DateValidator source=”{dob}” property=”text”/>
<mx:EmailValidator source=”{email}” property=”text”/>
<mx:NumberValidator source=”{age}” property=”text” minValue=”18″ maxValue=”100″/>
<mx:SocialSecurityValidator source=”{ssn}” property=”text”/>
<mx:StringValidator source=”{city}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:ZipCodeValidator source=”{zip}” property=”text”/>

Ok so now you should run a de bug test and see if you have errors and if you follow along this far then you should be good. So test out your form and in the first name just type in 3 characters and go to another field and once you do so your TextInput should have a red outline in it.

Flex Tutorial

Also in the image above is what the validation errors will look like and if you notice that the box turns red if your form is invalid. Of course, with a little CSS you can customize the way your errors look by using the following CSS

CODE

.errorTip {
borderColor: red;
color: white;
fontSize: 12;
fontWeight: normal;
}

TextInput {
errorColor: red;
borderThicknessLeft: 10;
borderThicknessTop: 10;
borderThicknessBottom: 10;
borderThicknessRight: 10;
}

This helps because of the fact when you actually get an error it is hard to see the default border, of course when click on the field that does have the error the above code will make the border a bit thicker and of course, if you get that error message. Now of course if I were to go a bit further I could have put in a validation error event when the submit button is click it will say form is valid or invalid. However, since my programming skills are not that good nor have I found anything l want to keep this simple as possible once I understand how to actually submit a flex form I might try to incorporate it.

Ok for the final part of this tutorial, we want to reset this form if there are some errors or in this case testing purposes, to see if we can reset this form.

The first tag I will cover is the <mx:Script> tag, this is what enables to use ActionScript within flex. Your also able to set up external ActionScripts as well and just like I showed you for external CSS it is set up the same way.

<mx:Script source=”file_name.as” />

The next part to this tag that most people will find interesting, is that the <mx:Script> tag is required to on top of of the application or MXML files, basically you would start your scripts on the third line when looking at the source code. Think about putting JavaScript and CSS within the <head> </head> tags, but you get better idea when you see the source code for this tutorial.

However, there is a catch though that in order to seperate ActionScript from XMl you need to use

<![CDATA[ ]]> within <mx:Script></mx:Script> tags and the reason is that this prevents the compiler from interpreting the contents of the script block as XML, and allows ActionScript to be properly generated. So basically it will cut down on the debugging and producing errors when it comes to running the application or debugging it.

You should be familiar with the <![CDATA[ ]]> tag due to the fact that XHTML uses this to coincide with using XML data, but think of the process as going into reverse since you will be surrounding that tag in ActionScript and not XML.

Ok, so how do we do this? Well you want your ActionScript to void out whatever is in that form like so:

CODE

<mx:Script>
<![CDATA[

private function resetForm(evt:MouseEvent):void {
fname.text = “”;
mname.text = “”;
lname.text = “”;
dob.text = “”;
email.text = “”;
age.text = “”;
ssn.text = “”;
city.text = “”;
State.selectedIndex = -1;
zip.text = “”;
phone.text = “”;
cardType.selectedIndex = -1;
credit.text = “”;
}
]]>
</mx:Script>

Then in order to trigger that script we need to add the actual trigger within the reset button with the function name resetForm(event) and it will look like this

CODE

<!-- Trigger submit. -->
<mx:Button label="Submit" />
<!-- Trigger reset. -->
<mx:Button label="Reset" click="resetForm(event)" />


You will notice that JavaScript uses something similar and obvious ActionScript does as well since both languages are based on the same core. However, there is two changes you have to make within your form in order to completely reset your form and it all has to do with this tag.

<mx:XMLList></mx:XMLList>

The Flex 3 Language Reference Guide Explains this tag like so, “The XMLList class contains methods for working with one or more XML elements. An XMLList object can represent one or more XML objects or elements (including multiple nodes or attributes), so you can call methods on the elements as a group or on the individual elements in the collection.”

So what that means those combo boxes that we set up in the first tutorial will take a major face lift as we have to alter the combo boxes we made and then use the <mx:XMLList></mx:XMLList> tags for the states and credits cards.

CODE

<mx:XMLList id="statesXMLList">
<state label="Alabama" data="Alabama"/>
<state label="Alaska" data="Alaska"/>
<state label="Arizona" data="Arizona"/>
<state label="Arkansas" data="Arkansas"/>
<state label="California" data="California"/>
<state label="Colorado" data="Colorado"/>
<state label="Connecticut" data="Connecticut"/>
<state label="Delaware" data="Delaware"/>
<state label="District of Columbia" data="District of Columbia"/>
<state label="Florida" data="Florida"/>
<state label="Georgia" data="Georgia"/>
<state label="Hawaii" data="Hawaii"/>
<state label="Idaho" data="Idaho"/>
<state label="Illinois" data="Illinois"/>
<state label="Indiana" data="Indiana"/>
<state label="Iowa" data="Iowa"/>
<state label="Kansas" data="Kansas"/>
<state label="Kentucky" data="Kentucky"/>
<state label="Louisiana" data="Louisiana"/>
<state label="Maine" data="Maine"/>
<state label="Maryland" data="Maryland"/>
<state label="Massachusetts" data="Massachusetts"/>
<state label="Michigan" data="Michigan"/>
<state label="Minnesota" data="Minnesota"/>
<state label="Mississippi" data="Mississippi"/>
<state label="Missouri" data="Missouri"/>
<state label="Montana" data="Montana"/>
<state label="Nebraska" data="Nebraska"/>
<state label="Nevada" data="Nevada"/>
<state label="New Hampshire" data="New Hampshire"/>
<state label="New Jersey" data="New Jersey"/>
<state label="New Mexico" data="New Mexico"/>
<state label="New York" data="New York"/>
<state label="North Carolina" data="North Carolina"/>
<state label="North Dakota" data="North Dakota"/>
<state label="Ohio" data="Ohio"/>
<state label="Oklahoma" data="Oklahoma"/>
<state label="Oregon" data="Oregon"/>
<state label="Pennsylvania" data="Pennsylvania"/>
<state label="Rhode Island" data="Rhode Island"/>
<state label="South Carolina" data="South Carolina"/>
<state label="South Dakota" data="South Dakota"/>
<state label="Tennessee" data="Tennessee"/>
<state label="Texas" data="Texas"/>
<state label="Utah" data="Utah"/>
<state label="Vermont" data="Vermont"/>
<state label="Virginia" data="Virginia"/>
<state label="Washington" data="Washington"/>
<state label="West Virginia" data="West Virginia"/>
<state label="Wisconsin" data="Wisconsin"/>
<state label="Wyoming" data="Wyoming"/>
</mx:XMLList>
<mx:XMLList id="cardsXMLList">
<card label="American Express" data="American Express"/>
<card label="Discover" data="Discover"/>
<card label="MasterCard" data="MasterCard"/>
<card label="Visa" data="Visa"/>
</mx:XMLList>

You will notice that we remove <mx:Object and set it up like an XML document with the use of <state> and <card> everything else remains the same. As for the combo boxes, this is what they will look like.

CODE

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

<mx:FormItem label=”Card Type”>
<mx:ComboBox id=”cardType” prompt=”Select a Credit Card…” selectedIndex=”-1″ dataProvider=”{cardsXMLList}” labelField=”@label” />
</mx:FormItem>

The only thing that stays the same is the FormItem and <mx:ComboBox> after that we add in a prompt which replaces the <mx:Object label=”None” data=”None”/> we used back in the beginning.

selectedIndex=”-1″ is use to tell the form when it resets to go back to its default position thus the prompt.

dataProvider=”{cardsXMLList}” is used to connect the XML lists we created for the combo box and connect that data when the flex form is running.

So on that note this is what your Flex form should look like

CODE

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

<!–This is the Model for the Validating this form–>

<mx:Model id=”validate”>
<User>
<FirstName>{fname.text}</FirstName>
<MiddleName>{mname.text}</MiddleName>
<LastName>{lname.text}</LastName>
<DOB>{dob.text}</DOB>
<Email>{email.text}</Email>
<Age>{age.text}</Age>
<SSN>{ssn.text}</SSN>
<City>{city.text}</City>
<Zip>{zip.text}</Zip>
<Phone>{phone.text}</Phone>
<Credit>{credit.text}</Credit>
</User>
</mx:Model>
<!–This is the actual validation tag group used to validate the form–>

<mx:StringValidator source=”{fname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{mname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{lname}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:StringValidator source=”{credit}” property=”text” minLength=”16″ maxLength=”16″/>
<mx:PhoneNumberValidator source=”{phone}” property=”text”/>
<mx:DateValidator source=”{dob}” property=”text”/>
<mx:EmailValidator source=”{email}” property=”text”/>
<mx:NumberValidator source=”{age}” property=”text” minValue=”18″ maxValue=”100″/>
<mx:SocialSecurityValidator source=”{ssn}” property=”text”/>
<mx:StringValidator source=”{city}” property=”text” minLength=”4″ maxLength=”12″/>
<mx:ZipCodeValidator source=”{zip}” property=”text”/>
<mx:Script>
<![CDATA[

private function resetForm(evt:MouseEvent):void {
fname.text = “”;
mname.text = “”;
lname.text = “”;
dob.text = “”;
email.text = “”;
age.text = “”;
ssn.text = “”;
city.text = “”;
State.selectedIndex = -1;
zip.text = “”;
phone.text = “”;
cardType.selectedIndex = -1;
credit.text = “”;
}
]]>
</mx:Script>
<mx:XMLList id=”statesXMLList”>
<state label=”Alabama” data=”Alabama”/>
<state label=”Alaska” data=”Alaska”/>
<state label=”Arizona” data=”Arizona”/>
<state label=”Arkansas” data=”Arkansas”/>
<state label=”California” data=”California”/>
<state label=”Colorado” data=”Colorado”/>
<state label=”Connecticut” data=”Connecticut”/>
<state label=”Delaware” data=”Delaware”/>
<state label=”District of Columbia” data=”District of Columbia”/>
<state label=”Florida” data=”Florida”/>
<state label=”Georgia” data=”Georgia”/>
<state label=”Hawaii” data=”Hawaii”/>
<state label=”Idaho” data=”Idaho”/>
<state label=”Illinois” data=”Illinois”/>
<state label=”Indiana” data=”Indiana”/>
<state label=”Iowa” data=”Iowa”/>
<state label=”Kansas” data=”Kansas”/>
<state label=”Kentucky” data=”Kentucky”/>
<state label=”Louisiana” data=”Louisiana”/>
<state label=”Maine” data=”Maine”/>
<state label=”Maryland” data=”Maryland”/>
<state label=”Massachusetts” data=”Massachusetts”/>
<state label=”Michigan” data=”Michigan”/>
<state label=”Minnesota” data=”Minnesota”/>
<state label=”Mississippi” data=”Mississippi”/>
<state label=”Missouri” data=”Missouri”/>
<state label=”Montana” data=”Montana”/>
<state label=”Nebraska” data=”Nebraska”/>
<state label=”Nevada” data=”Nevada”/>
<state label=”New Hampshire” data=”New Hampshire”/>
<state label=”New Jersey” data=”New Jersey”/>
<state label=”New Mexico” data=”New Mexico”/>
<state label=”New York” data=”New York”/>
<state label=”North Carolina” data=”North Carolina”/>
<state label=”North Dakota” data=”North Dakota”/>
<state label=”Ohio” data=”Ohio”/>
<state label=”Oklahoma” data=”Oklahoma”/>
<state label=”Oregon” data=”Oregon”/>
<state label=”Pennsylvania” data=”Pennsylvania”/>
<state label=”Rhode Island” data=”Rhode Island”/>
<state label=”South Carolina” data=”South Carolina”/>
<state label=”South Dakota” data=”South Dakota”/>
<state label=”Tennessee” data=”Tennessee”/>
<state label=”Texas” data=”Texas”/>
<state label=”Utah” data=”Utah”/>
<state label=”Vermont” data=”Vermont”/>
<state label=”Virginia” data=”Virginia”/>
<state label=”Washington” data=”Washington”/>
<state label=”West Virginia” data=”West Virginia”/>
<state label=”Wisconsin” data=”Wisconsin”/>
<state label=”Wyoming” data=”Wyoming”/>
</mx:XMLList>
<mx:XMLList id=”cardsXMLList”>
<card label=”American Express” data=”American Express”/>
<card label=”Discover” data=”Discover”/>
<card label=”MasterCard” data=”MasterCard”/>
<card label=”Visa” data=”Visa”/>
</mx:XMLList>

<mx:Panel title=”Sample Form” height=”550″ width=”479″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″ y=”20″ x=”250″>
<mx:Form width=”430″ height=”462″>
<mx:FormHeading label=”Fill out all required information” width=”389″/>

<mx:FormItem label=”First Name”>
<mx:TextInput id=”fname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Middle Name”>
<mx:TextInput id=”mname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Last Name”>
<mx:TextInput id=”lname” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Date of Birth (mm/dd/yyyy)”>
<mx:TextInput id=”dob” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”E-mail Address”>
<mx:TextInput id=”email” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Age”>
<mx:TextInput id=”age” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”SSN”>
<mx:TextInput id=”ssn” width=”200″ />
</mx:FormItem>

<mx:FormItem label=”City”>
<mx:TextInput id=”city” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”State”>
<mx:ComboBox id=”State” prompt=”Select a State…” selectedIndex=”-1″ dataProvider=”{statesXMLList}” labelField=”@label” />
</mx:FormItem>

<mx:FormItem label=”Zip”>
<mx:TextInput id=”zip” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Phone”>
<mx:TextInput id=”phone” width=”200″/>
</mx:FormItem>

<mx:FormItem label=”Card Type”>
<mx:ComboBox id=”cardType” prompt=”Select a Credit Card…” selectedIndex=”-1″ dataProvider=”{cardsXMLList}” labelField=”@label” />
</mx:FormItem>

<mx:FormItem label=”Credit Card Number”>
<mx:TextInput id=”credit”/>
</mx:FormItem>

<mx:HBox paddingLeft=”150″ paddingTop=”10″ width=”297″ height=”38″>
<!– Trigger submit. –>
<mx:Button label=”Submit” />
<!– Trigger reset. –>
<mx:Button label=”Reset” click=”resetForm(event)” />
</mx:HBox>
</mx:Form>
<mx:ControlBar>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

So that is it, you have now developed, styled and set up validation for your Flex form and with the information I have presented in these tutorials you should have a good idea what Flex is all about, or at least in form making that is.

Part I On Forums
http://www.trap17.com/forums/design-contac…t-1-t60453.html

Part I
Design A Contact Form in Flex Part I

Live Demo
http://saint-michael.trap17.com/flex/tutorial1/form.html

Tutorial II On Forums
http://www.trap17.com/forums/design-contac…t-2-t60707.html

Part II
Design A Contact Form in Flex Part II

Live Demo
http://saint-michael.trap17.com/flex/tutorial2/form.html

Part III On Forums
http://www.trap17.com/forums/design-contac…t-3-t60963.html

Part III
Design A Contact Form in Flex Part III

Live Demo
http://saint-michael.trap17.com/flex/tutorial3/form.html

Leave your response!

You must be logged in to post a comment.