Design A Contact Form In Flex Part 1

[Saint_Michael 3]

Design a Flex Form Part 1

 

Well this is my first tutorial on Adobe Flex 3 which is a great program if youâre interested in designing applications for the web 2.0 era. Adobe flex is the way to go as it combines several different programming languages in order to make the most out of this program. This includes HTML, CSS, XML, PHP/MySQL, XML, ActionScript, Ruby on Rails and ASP and this is all possible by the use of MXML or Magic eXtensible Markup Language because it is a user interface markup language.

 

My three part tutorials for this form include designing the form, adding CSS to stylize the form and the third tutorial will to be adding form validation and resetting of the form. Also a 4th tutorial will most likely come out that uses PHP to actually send an email if I can find the right information and put it to use. I will say this though and mention it again in the CSS tutorial that flex is very limited in what you can use in CSS and HTML. I haven't got too much on what is actually used in terms of HTML and CSS but you can't develop full functioning websites without doing a lot of scripting and using various technologies, but with word of Flex 4 slated for a release n 2009 it could be possible that CSS and HTML will be used more effectively. Ok letâs get things going by telling you what you will need to follow this tutorial.

 

Medium to Strong Skills in the following languages

 

-CSS

-HTML

-Javascript

-PHP

-Actionscript

-XML

-MXML

 

Medium to Strong Skills in the following programs

 

-Flash

-Flex

-Html Editors

 

Now the reason I say that your skills need to be at this caliber of a level because you will be relearning as you code in flex, because you will be mixing elements of all those languages to make a simple form application. Since I am a practically a beginner at this, I be trying my best in explaining everything and I will be using the Adobe Flex 3 Cook book to help me explain everything as I guide you through in making a Flex form.

 

Before I begin though I am using the full version of Adobe Flex Pro and if youâre a student or teacher you can get this for free and you can do that by going to the following link.. Therefore if youâre using the SDK you might be able to follow along with this and might not that is up to your skill level to determine that.

 

The first step in this process is creating a new flex project which you can do two ways, the first being through the File manager File > New > Flex Project. The other is by right clicking on the flex Navigator and selecting New > Flex Project.

 

Now you should be in the project window and you are giving options to name the project, the location of the project folder, options for using it as a web application or desktop application and the application server type. So to keep things moving the project name is Form the application type will be web application and the server type is going to be none. Of course if you running a server off your computer such as IIS or XAMPP, then you would select ASP.net or PHP and then fill out the info for the server location.

 

Click next and you be brought to a Configure Output window in which the location folder wold hold your compiled SWF (flash) file. Leave the default folder to bin-debug and click next.

The next two windows are options so you can click finish and your done, but for a beginners tutorial I go into a little detail about these two screens. The window is set up with a tab system which includes Source Path and Library Path and basically these two windows are used for making any last minute changes or additions before completing the flex project.

 

Go ahead and click finish and you are ready to do some coding. Like I mentioned earlier that flex uses various programming languages along with the same core concepts as well coming from those programming languages.

 

You should now be in the source tab which is where you will be doing your programming in and if you hit the Design type you will see what your application will look like as you do your coding. Of course you can cut out much of the coding process by designing your application first and then tighten up the coding in the source afterwards. Either method is good but we will be coding in the source tab throughout this tutorial and I will mention from time to time to look at your form.

 

Ok so in your source tab you should see the following:

 

 

 

 

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

 

As you will notice in this little code snippet you know what version of XML is being used and the encoding and you will see your first MXML coding in the form of the <mx:application> tag. If you notice in that line it uses the same premise as the DOC Type declaration in a HTML file. As for the <mx:application></mx:Application> tag itself think of it like the <HTML> </HTML> and that it basically contains everything and with the use of browser it will interpret the coding and display accordingly. As for the layout="absolute", think CSS when it comes to positioning div's and px. It is the same idea but instead of px your using xy coordinates to position everything.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&%2334;layout="absolute"><mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> </mx:Panel> </mx:Application>

 

Now we are ready to design the look of the form that separates it from the background with the use of the <mx:Panel> tag. This is like a combination of a div and table put together or as described by adobe flex language reference, âa Panel container consists of a title bar, a caption, a border, and a content area for its children. Typically, you would use the Panel containers to wrap top-level application modules. For example, you could include a shopping cart in a Panel container.

 

So if you click on the design tab you get a better idea what it looks like. Ok lets break down the coding a bit, the title="" is obvious enough what you can use with this tag and the same goes with height and width. However, I like to point out that unlike HTML and CSS you don't need to use px to determine the size of your containers. You could say it is like designing in flash and using old school HTML 4.01 where px doesn't really matter.

 

The next part is where the CSS comes in or rather one form of using CSS styles, the other being using external style sheets or having the CSS within the <head> tags. You will notice though that this CSS looks like JavaScript, ActionScript and PHP when setting up identifiers, if that makes any sense. However, you won't see the affects of the padding until you start working on the form and so this could be optional until you get into CSSing your form and what not.

 

If you want to get a little taste of what the CSS looks like in Flex here is the same example

 

<mx:Style> Panel { paddingTop: 10; paddingLeft: 10; paddingRight: 10; paddingBottom: 10; }</mx:Style>

 

I will go more into the CSS when I write the CSS tutorial but remember that style tag and it will make more sense later.

 

T he last part to this panel is the XY coordinates which basically is the position of the panel relative to your browser and screen resolution. Before I continue I would like to mention about the run and debug functions; The Run button will display your flex project in the default browser and of course the debug function is used to find any errors within your coding.

 

Letâs create our form, now you can create your form using the design tab which would be a lot quicker but since your only adding the buttons and text input blocks itâs not much for properly setting up a form in Flex in the code structure.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&%2334;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> </mx:Form> </mx:Panel> </mx:Application>

 

Like any form, regardless if it is HTML, PHP ASP, you need to declare it with a tag and of course contain all the form elements within it and so you will use <mx:Form></mx:Form> to make that declaration. Or to make it simple, "The Form container lets you control the layout of a form, mark form fields as required or optional, handle error messages, and bind your form data to the Flex data model to perform data checking and validation. It also lets you use style sheets to configure the appearance of your forms." So if you go to the design tab you will see an outline of where your form is going to be.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&%2334;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Enter values into the form."/> </mx:Form> </mx:Panel> </mx:Application>

 

The first part of the form is the header and usually you would do this with the <h1> tags in HTML, PHP, but with this being Flex it has its own tag for some good organization, separation and to prevent any errors later on. Like any form you need text and that is where the label comes in, basically a label is used for data binding or when youâre getting into actual coding it will be used as a string and you will see its importance when we get to the validation tutorial.

 

Ok let's put in some Tex Input fields into our form with the introduction of two new tags, <mx:FormItem> and <mx:TextInput>.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&%2334;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Fill out all required information" width="461"/> <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:Form> </mx:Panel> </mx:Application>

 

A <mx:FormItem> is basically a container for the label and everything else that is used in the form structure, like a Text Input field, combo drop down, radio buttons, check boxes and buttons to name a few. The next tag is the <mx:TextInput> which is the same thing as a text field in HTML in which people will be typing their data in there for it to be submitted. Ok the next part that everyone should be familiar with is the ID tag and that basically helps identify the piece of code when it comes time to adding CSS to it or using the ID for scripting.

 

Since we are doing a contact form and got everything for location I am going to use a combo box/drop down menu to select the state that the user is from. In this combo box three tags are introduced <mx:ComboBox>, <mx:dataProvider> and <mx:Object>

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Fill out all required information" width="461"/> <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:Form> </mx:Panel> </mx:Application>

 

The <mx:ComboBox> and <mx:Object> tag is self-explanatory but I will talk about the <mx:dataProvider> tag though. The <mx:dataProvider> basically groups the <mx:Object> tag's and so you can set up arrays or if you select country you be prompted with another combo box to select the state.

 

Ok so letâs add a few more things to our form and we are set.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Fill out all required information" width="461"/> <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:Form> </mx:Panel> </mx:Application>

 

Although it seems like a lot of info I can tell you it isn't as I could go into a lot more detail if I took my time with this, but I am a beginner at flex and I will cover what is needed at the moment. For the most part we have a form but we are missing two things, a submit button and a reset button for our form.

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Fill out all required information" width="461"/> <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:Button label="Submit" /> <mx:Button label="Reset"/> </mx:Form> </mx:Panel> </mx:Application>

 

If you click on the design tab you will notice that these two buttons are on top of each other instead of side by side. Of course you would think that the <mx:FormItem> tag would fix this or just adjusting through the Design tab, but alas that won't fix it.

 

<mx:HBox paddingLeft="150" paddingTop="10" width="437" height="38">				  <mx:Button label="Submit" /> 				  <mx:Button label="Reset"/>		</mx:HBox>

However, another container that is used in flex will fix that and that is the <mx:HBox> tag which is basically saying that anything within this box will be in a straight horizontal line. Of course the <mx:HBox> tag is the offspring of <mx:Box> and of course its little sister is the <mx:VBox> tag which puts everything in a vertical line.

 

Ok the last thing I am going to cover in this tutorial is comments tags <!-- --> they are usable and very effective, even though I didn't use them in setting up this tutorial, but I think when it comes to the validating tutorial I will comment it up. It is also useful when it comes to CSS as you will be able to disable the CSS styles if you want to some comparison of your form or whatever application your using.

 

Ok to sum up your form should look like this

 

IMAGE-DEAD

 

with the following code

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml;layout="absolute"> <mx:Panel title="Sample Form" height="590" width="532" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" y="10" x="420"> <mx:Form width="100%" height="527"> <mx:FormHeading label="Fill out all required information" width="461"/> <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="437" height="38"> <!-- Trigger submit. --> <mx:Button label="Submit" /> <!-- Trigger reset. --> <mx:Button label="Reset" /> </mx:HBox> </mx:Form> </mx:Panel> </mx:Application>

 

So that is the end of Part one of my three part tutorial on creating, styling and validating a flex form. In the next part I will be covering the CSS and of course introduce your to a Flex explorer that will make setting up CSS in flex a lot quicker and more efficiently.

 

Edited December 19, 2016 by OpaQue (see edit history)