How To Design A Contact Form In Flex Part Duex Part 1

[Saint_Michael 3]

How to Design a Contact Form in Flex Part Duex Part 1

 

Well if you had read my first three tutorials on how to design a contact form, you learn some basics on MXML and of course design a contact form. Yeah I promise a part 4 to that series, that is why I renamed this one to Part Duex, since the form is completely different, and using a different way to populate my combo boxes with data. Although, I might have found something to get the php going for this, but I save that for another time.

 

Now because I am using the flex editor to design my contact form, I will be referring to it, but the source code can still be used if you know how to use the SDK. So lets start up by opening flex and then opening up the flex that you first created when you created version 1 of the of form. It should be listed under the Flex Navigator Menu, which is usually on the left side of the flex Design software. Now click on the src folder and then click on form.mxml and it should up in the source code viewer. Now, the reason I want you to have the first form open is that it will do several things; first it will save you the time by copying and pasting all the form fields and what not to the new form. Two you will be able to compare the source code for each file just to see what way you might go next.

 

Now right click on src folder and then select New and then either select new application, component, or module and depending on you will use this its up to you, but now I am choosing application. Then you will get a new window to name your file and go ahead and put in form2. Now to make the design process we will be working in the design view the whole time and thus the reason why you want the first form open in order to copy and paste.

 

Step #1

 

Ok to begin, click on Window menu and then select Components and pay attention to where it will show up, usually the bottom half of the left side as tab that is next to the Outline tab.

 

 

Step #2

 

Now click on the Layout folder and it should expand and click and drag Panel on to your canvas there, Next we need to set up its dimensions and so on the right side of your screen you will see flex properties and at the bottom you will see layout and then a bunch of options. Set your Width to 410 and your Height 456 and as for your XY coordinates that all depends where your using this but since we are just working on the form, X=450 and Y=150. Also make sure to hit the enter key after you put in each number to set it in the source code.

 

Next click somewhere on the top of the Panel and you should get a text option for the title of your Panel, put in there Contact Form v2, and press enter.

 

 

Step #3

 

Now if anyone who is reading this tutorial might have come across websites with collapsible menus and with our form that is what we are going to use and it is called Accordion. So click on your Navigators folder in the Components menu and then click and drag and drop According on to the panel you just created. Now set the height of the Accordion to 390x380 to give plenty of room for a submit and reset button.

 

So let’s add those buttons in and so in order to do this, go to the components window and select controls and then drag and drop two buttons in that small gap we created for them. Then Click on each button and type in Submit and Reset. Next, we are going to add some XY coordinates to our buttons and so for the submit button put in the following:

 

X:132.5

y:388

 

As for the Reset button

 

x:206.5

y:388

 

 

Step #4

 

Now select that first accordion tab you made and if you look on the right side and look at flex properties, in the Label type in Basic Info. Now you should see a + / - box in the upper corner and so click on the + in order to add another accordion tab and name it Contact info and now do this three more times with the following tabs:

 

Forum Registration

Payment Options

Comments

 

 

At this time, I would recommend that you save your form before continuing as it took many hours of adjustments to get this form to not scrollbar on me (lol).

 

Step #5

 

Now we can begin the process of creating our form, so go to the components window once again, select the Layout folder and then click on form, and then drag it on top of Basic Info tab. Then set the width to 388 and height to 274 to prevent the scrollbar effect from happening.

 

Now go to the Design view and then select the following text boxes:

 

First Name

Middle Name

Last Name

Date of Birth

Age

SSN

 

You will notice that the text boxes are either touching the borders or over lapping and so we will make the following adjustments to them. Hold the ctrl button down and select all the text fields and then go the Layout and change the width to 150. Next, we are going to add gender to the basic info and so head over to the Component window once again and select the Layout folder and select HBox and then drag it under SSN. Then adjust the left box to 150 in Layout and then replace Label with Gender. Now head over to Controls folder in the Component Window, select RadioButton, and drag it into that left box in which you adjusted the size to 150. Do it one more time, change both radio buttons to Male and Female, go ahead, and save once again.

 

 

Step #6

 

Except for Forum Registration and Comments copy everything over and using the same width adjustments into their respective places, check the following images on where to move what.

 

 

Step #7

 

Ok Click on the Forum Registration Tab, add a form container, then insert three Text Inputs with a width of 150, and then Label them with the following:

 

Forum Name

Password

Re-Type Password

 

Now select both Password Re-Type Password Text Input, in Flex Properties go to Display as password, and set it to true. Now if you run the form through a browser and you type something in there you get ******** to protect your secret password and what not.

 

 

Now outside the Form container we are going to add a checkbox that a person would have to click on to agree to Forum TOS or anything else that they must agree to. You will see how that works out later in the validation process. So go to the Controls Folder once again select the CheckBox and put it at the following coordinates:

 

x:123.5

y:242

 

Step #8

 

Ok go ahead and click on the comment tab and then we are going to do three things, add some text, add a image and then add a comment box for someone to type in their comments. Let us start with the text by going to Controls Folder and then select Text and then drag it to the top of the Comments container or coordinates x:10 and y:5.

 

As for the image you can think of as the html tag version and in the design view you have the option of dragging an image onto the canvas of the Comment tab and if you know the source type it in or browse for it by clicking on that folder icon. Just a reminder that there is a different Flex Properties window for an image then the rest of the controls that I talked about so far (it will be bordered in the following image).

 

Now with the Controls folder still open select TextArea and drag it below the image with the following properties:

 

Width:370

height:120

x:10

y:147

 

 

Step #9

 

Ok at this time, it is recommended that you save form and take a five minute break after creating a form just using the design view of the Flex builder. Also at this stage it is recommend that your run this form and check everything out to make sure you get no scrollbars or anything, and you shouldn't, but if you do make adjustments as need be and then check out in various browsers.

 

As of writing this tutorial I know Firefox 3, IE7, Opera 9.62, Google Chrome 0.3.154.9 have this form working properly at 1024x768, I was told that in Firefox 2 that the scrollbar effect is in place and so if you’re running Firefox 2 adjust accordingly.

 

So that is it for this part of the tutorial now the source code is provided below for those who don't want to go through all that nonsense and want it now. In part two, I will teach you how to use bindable arrays to populate Combo boxes and of course add some more validation techniques to your form so look out for that in the near future.

 

LIVE DEMO

 

http://forums.xisto.com/no_longer_exists/

 

SOURCE CODE

 

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="adobe.com/2006/mxml; layout="absolute" verticalAlign="middle" pageTitle="Form v2">	<mx:Panel x="459" y="117" width="410" height="456" layout="absolute" horizontalAlign="center" title="Contact Form v2">		<mx:Accordion x="0" y="0" width="390" height="380">			<mx:Canvas label="Basic Info" width="100%" height="100%">				<mx:Form x="0" y="0" width="388" height="274">					<mx:FormItem label="First Name">					         	<mx:TextInput id="fname" width="150" toolTip="Enter your First Name" tabIndex="1" />					     	</mx:FormItem>					<mx:FormItem label="Middle Name">					   	<mx:TextInput id="mname" width="150" toolTip="Enter your Middle Name" tabIndex="2" />					</mx:FormItem>					<mx:FormItem label="Last Name">					   	<mx:TextInput id="lname" width="150" toolTip="Enter your Last Name" tabIndex="3" />					</mx:FormItem>					<mx:FormItem label="Date of Birth (mm/dd/yyyy)">					   	<mx:TextInput id="dob" width="150" toolTip="Enter your birthday mm/dd/yyyy" tabIndex="4" />					</mx:FormItem>					<mx:FormItem label="Age">					   	<mx:TextInput id="age" width="150"  toolTip="Enter your Age"  tabIndex="6" />					</mx:FormItem>					<mx:FormItem label="SSN">					   	<mx:TextInput id="ssn" width="150"  toolTip="Enter your Social Security Number xxx-xx-xxxx" tabIndex="7"  />					</mx:FormItem>					<mx:FormItem label="Gender">						<mx:HBox width="150">							<mx:RadioButton label="Male"/>							<mx:RadioButton label="Female"/>						</mx:HBox>					</mx:FormItem>				</mx:Form>			</mx:Canvas>			<mx:Canvas label="Contact Info" width="100%" height="100%">				<mx:Form x="0" y="0" width="388" height="274">					<mx:FormItem label="E-mail Address">					   	<mx:TextInput id="email" width="150" toolTip="Enter your E-mail Address" tabIndex="5" />					</mx:FormItem>					<mx:FormItem label="City">					   	<mx:TextInput id="city" width="150" toolTip="Enter the city you live in" tabIndex="8" />					</mx:FormItem>					<mx:FormItem label="State" id="State1">						<mx:ComboBox id="StateCombo" toolTip="Choose your State" prompt="Select State..." dataProvider="{state}"></mx:ComboBox>					</mx:FormItem>					<mx:FormItem label="Zip">						<mx:TextInput id="zip" width="150" toolTip="Enter your zip code" tabIndex="10" />					</mx:FormItem>					<mx:FormItem label="Phone">					         	<mx:TextInput id="phone0" width="150" toolTip="Enter your phone number 000-000-0000" tabIndex="11" />					     	</mx:FormItem>				</mx:Form>			</mx:Canvas>			<mx:Canvas label="Forum Registration" width="100%" height="100%">				<mx:Form x="0" y="0" width="388" height="142">					<mx:FormItem label="Forum Name">					         	<mx:TextInput id="forumname0" width="150" toolTip="Enter your First Name" tabIndex="1" />					     	</mx:FormItem>					<mx:FormItem label="Password">					         	<mx:TextInput id="forumname1" width="150" toolTip="Enter your First Name" tabIndex="1"  displayAsPassword="true"/>					     	</mx:FormItem>					<mx:FormItem label="Re-Type Password">					         	<mx:TextInput id="forumname2" width="150" toolTip="Enter your First Name" tabIndex="1"  displayAsPassword="true"/>					     	</mx:FormItem>				</mx:Form>				<mx:CheckBox label="Agree To Forum TOS" x="123.5" y="242"/>			</mx:Canvas>			<mx:Canvas label="Payment Options" width="100%" height="100%">				<mx:Form x="0" y="0" width="388" height="100">					<mx:FormItem label="Credit Card" id="creditbox">						<mx:ComboBox id="CreditCombo" toolTip="Choose your Credit card" prompt="Select a Credit Card..." dataProvider="{credit}"></mx:ComboBox>					</mx:FormItem>					<mx:FormItem label="Credit Card Number">					   	<mx:TextInput id="credit1" toolTip="Enter your credit card number" tabIndex="13"  width="150"/>					</mx:FormItem>				</mx:Form>			</mx:Canvas>			<mx:Canvas label="Comment" width="100%" height="100%">				<mx:TextArea x="10" y="147" width="370" height="120"/>				<mx:Text x="10" y="5" text="Type any comments about how to improve are site or why you joined are website and forums." width="368" height="35" fontSize="12" textAlign="left" fontWeight="normal"/>			
<mx:Image source="" height="96" x="98.5" y="47" width="191"/>			</mx:Canvas>		</mx:Accordion>		<mx:Button label="Submit" x="132.5" height="22" y="388"/>		<mx:Button label="Reset" x="206.5" height="22" y="388"/>	</mx:Panel>	</mx:Application>

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

[acricket 0]

hi michael it is very very good tutorial in deed, you guys are rocks