Home » Flex 3 Tutorials, My Tutorials, Tutorials, Writing

Design A Contact Form in Flex Part II

19 January 2009 No Comment

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.

CODE

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

CODE

<mx:Style>

.Application {
backgroundColor: #006699;
themeColor: #006699;
color: #ffffff;
}
.Button {
color: #000000;
textRollOverColor: #006699;
textSelectedColor: #006699;
themeColor: #006699;
fontWeight: bold;
}

</mx:Style>

External Style Sheet

CODE

<?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:Application>

As for the other ways most of them use Actionscript classes such as

StyleManager
getStyle()
setStyle()
StyleSheet.parseCSS()

Of course, various ActionScripts make CSS even more dynamic.

CODE

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

public class CSSFormattingExample extends Sprite
{
var loader:URLLoader;
var field:TextField;
var exampleText:String = “<h1>This is a headline</h1>” +
“<p>This is a line of text. <span class=’bluetext’>” +
“This line of text is colored blue.</span></p>”;

public function CSSFormattingExample():void
{
field = new TextField();
field.width = 300;
field.autoSize = TextFieldAutoSize.LEFT;
field.wordWrap = true;
addChild(field);

var req:URLRequest = new URLRequest(“example.css”);

loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(req);
}

public function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(loader.data);
field.styleSheet = sheet;
field.htmlText = exampleText;
}
}
}

You can also style arrays as well, but I will not go too much into what you can do as there is a lot of information based on the different methods you can use to implement CSS into Flex.

Also I like to mention that just like regular external style sheets, Flex programmers highly recommend using external style sheets because then you don’t have to worry about recompiling the source code each time you make changes to your CSS. It does makes sense because just like html when your save your external style sheet and the fresh the browser in which your seeing a live version of your application you can see the changes automatically, but make sure your in the design phase or comment your scripts to disable them.

Before I even forget I like to set a reminder and if you looked at my first tutorial, don’t use id=”” for your css that is being used for identification in the verification aspect of the forum.

Ok, now on to the tutorial or in this case more information with some examples of how CSS works in Flex and then the complete source code for your learning needs.

To initiate CSS into your flex application you will need some tags and just like <style> </style> in HTML you will be using <mx:Style> </mx:Style>. Just like Normal CSS, this also uses class and ID’s to help set CSS however instead of using # and . all you need is a . to separate the global from the individual. With the . being for individual selectors while nothing there is for global styles.

To show an example I set up the buttons for both sets with this CSS

CODE

.sButtonStyle {
color: #ffffff;
textRollOverColor: #006699;
textSelectedColor: #006699;
themeColor: #006699;
fontWeight: bold;
}

Button {
color: #000000;
textRollOverColor: #006699;
textSelectedColor: #006699;
themeColor: #006699;
fontWeight: bold;
}

Here is what the buttons look like

CODE

<!-- Trigger submit. -->
<mx:Button styleName="sButtonStyle" label="Submit" />
<!-- Trigger reset. -->
<mx:Button label="Reset"/>

So as you can see you should have one button in white text and then one button in black text. Also you may have notice that the CSS properties seem to look like JavaScript or ActionScript in terms of using capital letters and to be quite honest I don’t remember the reason why. Strangely enough, they do not mention it in the Flex 3 Cook book, but if you understand the reason why they do that in the other languages then most likely that is the same reason they do it in flex.

another interesting I like to mention about CSS within flex that you can do CSS within CSS meaning that if you want to style a specific component then you would set a style identifier and then after you close you can stylize that component. The example below will give you a better idea what I am talking about.

CODE

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;
}

That way you can get really specific how you want your application to look by doing a second level tier styling, almost like doing a drop down menu with <li> and <ul> tags.

I believe I have covered everything that is needed to get you started on using CSS in Flex and so I giving you two versions of the CSS, external and internal and you can work it from there.

CODE

<?xml version="1.0" encoding="utf-8"?>
<mx:Application styleName="Application" xmlns:mx="http://www.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

CODE

.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://examples.adobe.com/flex3/consulting…eExplorer.html#

Flex tutorial

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

Part I On Forums
http://www.trap17.com/forums/design-contac…t-1-t60453.html

Part I
Design A Contact Form in Flex Part I

Live Demo
http://saint-michael.trap17.com/flex/tutorial1/form.html

Tutorial II On Forums
http://www.trap17.com/forums/design-contac…t-2-t60707.html

Part II
Design A Contact Form in Flex Part II

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

Part III On Forums
http://www.trap17.com/forums/design-contac…t-3-t60963.html

Part III
Design A Contact Form in Flex Part III

Live Demo
http://saint-michael.trap17.com/flex/tutorial3/form.html

Leave your response!

You must be logged in to post a comment.