4 replies to this topic

[Saint_Michael]

Design A Contact Form In Flex Part 3

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.

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

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

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

Now I Show you a live Demo of the form you just created along with the forms from the first two tutorials.

Tutorial 1

http://www.trap17.com/forums/design-contac...t-1-t60453.html

Live Demo

http://saint-michael...ial1//form.html

Tutorial 2

http://www.trap17.com/forums/design-contac...t-2-t60707.html

Live Demo

http://saint-michael...ial2//form.html

Tutorial 3

http://www.trap17.com/forums/design-contac...t-3-t60963.html

Live Demo

http://saint-michael...rial3/form.html



SOURCES

http://livedocs.adobe.com/flex/3/html/help...lidators_5.html

http://blog.flexexamples.com/2007/09/01/cu...ls-error-color/

http://blog.flexexamples.com/2007/08/13/va...idator-classes/

Adobe Flex 3 Help Guilde

Adobe Flex 2 Reference Library

Adobe Flex 3 Reference Library

Flex 3 Cookbook

Edited by Saint_Michael, 19 December 2008 - 06:14 PM.

[freeflashclocks]

Interesting, really interesting topic, mainly because i have just downloaded the flex builder fro mthe adobe website (429 MB, i really thought it would not be so big in size, but it is worth every MB).

You made an incredible tutorial of 3 parts SM, you really took the time to create something that someone else did not at trap17, so congratulations for it, it is a great, complete, interesting, easy to understand, easy to read and to the point tutorial about designing a contact form in flex.

I did not read it all the tutorial, i did not read all the 3 parts, i really do not have time for it now, only later at night or perhaps tomorrow night, but i am sure i will like it from what i have seen in a flash.

Thank you for your effors creating this good tutorial, i apreciate the 3 parts tutorial because like i said, i am just starting flex and this is way good for me to start.

[shadowx]

Now i was going to post my tutorial here in a reply but it turned out longer than i was thinking! I noticed you said:

Quote

once I understand how to actually submit a flex form I might try to incorporate it.

And last night i found out how to do this, and i just saw you wasnt sure how to do it so i made a tutorial, i was going to PM it but hey i get the credits this way and the rest of T17 (or Open Discussion as it currently seems to be!) can learn from it. The link is: http://www.trap17.com/forums/submitting-fo...tut-t61026.html (at the time of writing it is still waiting to be approved) So feel free to check it out and give me some feedback. I had problems working out how to do it because, like i think you said, most resources are flex2 which can be a pain. If you see any errors or anything let me know, i havent been using flex for long and its probably shoddy code! But it DOES work!

Ps the CSS tutorial is really useful too

[corgan1003@gmail.com]

Flex includes some great out of the box stuff for creating contact forms but I have found a couple tips to be very useful.
One great tip is reduce the size of the validation tool tips to allow you to create smaller forms. Here is the a link on how to implement that: http://bit.ly/mrFy6
Another great tip is to use one validator on multiple fields. This can help DRY up your code. I posted a solution here http://bit.ly/Lk84C and I hope the Adobe team adds it to the docs as it is useful information.
Finally, if you plan to use a combo box with dynamic data it is a good idea to truncate your combo box. That solution is here: http://bit.ly/OCSm

I hope Flex continues to concentrate on improving out-of-the-box validation. I find it to be the absolute most boring code to write and I am sure millions of people have pretty much the same code.

shadowx, on Sep 23 2008, 06:13 PM, said:

Now i was going to post my tutorial here in a reply but it turned out longer than i was thinking! I noticed you said:


And last night i found out how to do this, and i just saw you wasnt sure how to do it so i made a tutorial, i was going to PM it but hey i get the credits this way and the rest of T17 (or Open Discussion as it currently seems to be!) can learn from it. The link is: http://www.trap17.com/forums/submitting-fo...tut-t61026.html (at the time of writing it is still waiting to be approved) So feel free to check it out and give me some feedback. I had problems working out how to do it because, like i think you said, most resources are flex2 which can be a pain. If you see any errors or anything let me know, i havent been using flex for long and its probably shoddy code! But it DOES work!

Ps the CSS tutorial is really useful too

[SilentCD]

Interesting, absolutely absorbing topic, mainly because i accept just downloaded the angle architect fro mthe adobe website (429 MB, i absolutely anticipation it would not be so big in size, but it is account every MB).You fabricated an absurd tutorial of 3 locations SM, you absolutely took the time to actualize something that anyone abroad did not at trap17, so congratulations for it, it is a great, complete, interesting, simple to understand, simple to apprehend and to the point tutorial about designing a acquaintance anatomy in flex.