Design A Contact Form In Flex Part 2

[Saint_Michael 3]

Design A Contact Form In Flex Part 2

 

I hope that you learn a little bit of the Flex format with my first tutorial because that was the easy stuff until you get to the actual programming such as ActionScript and any other languages. Of course, I think this is by far the easiest part of designing forms or applications and that is using CSS. I will like to point out that CSS in Flex is a enigma and I will tell you why, because CSS in flex acts like regular CSS in html however it is very limited in what you can use and yet CSS in Flex is very complex because of how you can incorporate CSS.

 

backgroundGradientAlphas backgroundGradientColors borderAlpha borderColor borderSides borderThickness cornerRadius dateHeaderColor dateRollOverColor dropShadowEnabled fillAlphas fillColors footerColors headerColors highlightAlphas highlightColor roundedBottomCorners selectedDateColor shadowDirection shadowDistance strokeWidth themeColor todayColor

 

disabledColor headerHeight horizontalAlign horizontalGap paddingBottom paddingLeft paddingRight paddingTop rollOverColor selectionColor tabHeight tabWidth textRollOverColor textSelectedColor verticalAlign verticalGap color fontFamily fontSize fontStyle fontWeight leading textAlign textDecoration textIndent

Basically you won't be able to create a layout using just CSS, of course since Flex has WebKit support there are a few more CSS properties that you can use such as -webkit-border-horizontal-spacing or -webkit-line-break. Like I mentioned earlier that there are several ways to incorporate CSS in flex, two of those ways everyone should be familiar with or at least the ideas.

 

Internal Style Sheet

 

<?xml version="1.0" encoding="utf-8"?><mx:Application styleName="Application" xmlns:mx="adobe.com/2006/mxml; layout="absolute"><mx:Style>	.Application {   backgroundColor: #006699;   themeColor: #006699;   color: #ffffff;}.sButtonStyle {   color: #ffffff;   textRollOverColor: #006699;   textSelectedColor: #006699;   themeColor: #006699;   fontWeight: bold;}Button {   color: #000000;   textRollOverColor: #006699;   textSelectedColor: #006699;   themeColor: #006699;   fontWeight: bold;}Panel {   borderColor: #006699;   borderThicknessLeft: 10;   borderThicknessTop: 0;   borderThicknessBottom: 2;   borderThicknessRight: 10;   roundedBottomCorners: true;   headerColors: #006699, #ffffff;   footerColors: #006699, #ffffff;   backgroundColor: #006699;   shadowDirection: center;   titleStyleName: "mypanelTitle";}.mypanelTitle {   color: #ffffff;   fontFamily: Times New Roman;   fontSize: 12;   fontWeight: bold;}ComboBox {   color: #006699;   borderColor: #006699;   iconColor: #006699;   selectionColor: #006699;   textSelectedColor: #0b333c;   rollOverColor: #0066cc;   themeColor: #006699;   alternatingItemColors: #cccccc, #ffffff;}TextInput {    color:#000000;   }</mx:Style>	<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>

Stand Alone CSS

 

.Application {   backgroundColor: #006699;   themeColor: #006699;   color: #ffffff;}.sButtonStyle {   color: #ffffff;   textRollOverColor: #006699;   textSelectedColor: #006699;   themeColor: #006699;   fontWeight: bold;}Button {   color: #000000;   textRollOverColor: #006699;   textSelectedColor: #006699;   themeColor: #006699;   fontWeight: bold;}Panel {   borderColor: #006699;   borderThicknessLeft: 10;   borderThicknessTop: 0;   borderThicknessBottom: 2;   borderThicknessRight: 10;   roundedBottomCorners: true;   headerColors: #006699, #ffffff;   footerColors: #006699, #ffffff;   backgroundColor: #006699;   shadowDirection: center;   titleStyleName: "mypanelTitle";}.mypanelTitle {   color: #ffffff;   fontFamily: Times New Roman;   fontSize: 12;   fontWeight: bold;}ComboBox {   color: #006699;   borderColor: #006699;   iconColor: #006699;   selectionColor: #006699;   textSelectedColor: #0b333c;   rollOverColor: #0066cc;   themeColor: #006699;   alternatingItemColors: #cccccc, #ffffff;}TextInput {    color:#000000;   }

Therefore, that is it for this tutorial as for any questions you might have on this tutorial ask away and I try my best and below is an example of what the form will look like. Also if you really want to save time with the CSS aspect of Flex then I recommend using the style explorer and there you can design everything that is designable and then just copy and paste into your flex files.

 

http://www.adobe.com/devnet/flex.html#

 

 

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://forums.xisto.com/topic/60453-design-a-contact-form-in-flex-part-1/

 

Live Demo

 

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

 

Tutorial 2

 

http://forums.xisto.com/topic/60707-design-a-contact-form-in-flex-part-2/

 

Live Demo

 

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

 

Tutorial 3

 

http://forums.xisto.com/topic/60963-design-a-contact-form-in-flex-part-3/

 

Live Demo

 

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

 

 

SOURCES

 

Adobe Flex Help File

 

Flex 3 cook Book

Edited December 19, 2008 by Saint_Michael (see edit history)