Design A Contact Form In Flex Part 3

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.


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:




Now for the validator strings:



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.



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:





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.



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



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:


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



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.



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.


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







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.trap17.com/flex/tutorial1//form.html

Tutorial 2

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

Live Demo

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

Tutorial 3

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

Live Demo

http://saint-michael.trap17.com/flex/tutorial3/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

This post has been edited by Saint_Michael: Dec 19 2008, 06:14 PM

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.

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