Share on Google+Share on Google+

About Themes in Flex4

Advertisement
A theme is used for providing a look and feel of an application. Theme is a color scheme.

About Themes in Flex4:

A theme is used for providing a look and feel of an application. Theme is a color scheme. The default theme for flex 4 is Spark. The Spark theme is a combination of style and skin classes. In this example you can see how can i make and apply a theme using color scheme.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.events.IndexChangedEvent;

private function applyTheme(e:Event):void {

if (e.currentTarget.selectedItem == "Theme1") {

pan.setStyle("backgroundColor", 0x333333);

pan.setStyle("chromeColor", 0x555555);

pan.setStyle("baseColor", 0x4C4C4C);

pan.setStyle("color", 0xCCCCCC);

pan.setStyle("contentBackgroundColor", 0x555555);

pan.setStyle("symbolColor", 0xFFFFFF);

pan.setStyle("rollOverColor", 0x666666);

pan.setStyle("selectionColor", 0x999999);

pan.setStyle("focusColor", 0xEEEEEE);

pan.setStyle("fontFamily", "Arial");

} else if(e.currentTarget.selectedItem == "Theme2"){

pan.setStyle("backgroundColor", 0xCCCC99);

pan.setStyle("chromeColor", 0xFFFFCC);

pan.setStyle("baseColor", 0x999966);

pan.setStyle("color", 0x996600);

pan.setStyle("contentBackgroundColor", 0xFFFFCC);

pan.setStyle("symbolColor", 0x663300);

pan.setStyle("rollOverColor", 0xFFEE88);

pan.setStyle("selectionColor", 0xFFCC66);

pan.setStyle("focusColor", 0xCC9900);

pan.setStyle("fontFamily", "Helvetica");

} else{

pan.setStyle("backgroundColor", 0x003366);

pan.setStyle("chromeColor", 0x7578ef);

pan.setStyle("baseColor", 0x999966);

pan.setStyle("color", 0xFFFFFF);

pan.setStyle("contentBackgroundColor", 0x7578ef);

pan.setStyle("symbolColor", 0xFFFFFF);

pan.setStyle("rollOverColor", 0x2b36c4);

pan.setStyle("selectionColor", 0x366fef);

pan.setStyle("focusColor", 0x888888);

pan.setStyle("fontFamily", "Verdana");

}

}

]]>

</fx:Script>

<s:Panel id="pan" title="Creating themes Example" width="424" height="559">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:ApplicationControlBar width="422">

<s:Label text="Choose a Theme for apply:"/>

<s:DropDownList id="drp1" prompt="--Select Themes--" change="applyTheme(event)"

 width="137">

<s:dataProvider>

<s:ArrayList source="[Theme1,Theme2,Theme3]"/>

</s:dataProvider>

</s:DropDownList>

</mx:ApplicationControlBar>

<mx:Form width="421" height="487">

<mx:FormHeading label="Registration Form" fontSize="18" fontFamily="verdhana"/>

<mx:FormItem label="User Name:" required="true">

<mx:TextInput id="txt1" text="User Name" fontStyle="italic" styleName="image"/>

</mx:FormItem>

<mx:FormItem label="First Name:" >

<mx:TextInput id="txt2" text="First Name" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="Last Name:" >

<mx:TextInput id="txt3" text="Last Name" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="Email-ID:" required="true" >

<mx:TextInput id="txt4" text="Email ID" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="Password:" required="true" >

<mx:TextInput id="txt5" text="Password" displayAsPassword="true"/>

</mx:FormItem>

<mx:FormItem label="Confirm Password:" required="true" >

<mx:TextInput id="txt6" text="Confirm Password" displayAsPassword="true"/>

</mx:FormItem>

<mx:FormItem label="Gender:" >

<s:HGroup>

<s:RadioButton groupName="gen" label="Male" selected="true"/>

<s:RadioButton groupName="gen" label="Female"/>

</s:HGroup>

</mx:FormItem>

<mx:FormItem label="Marital Status:" >

<s:HGroup>

<s:RadioButton id="gen1" label="Single" selected="true"/>

<s:RadioButton id="gen2" label="Married"/>

</s:HGroup>

</mx:FormItem>

<mx:FormItem label="D.O.B.:" required="true" >

<mx:DateField text="Select Date" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="Address:" >

<mx:TextInput id="txt7" text="Address line 1" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem>

<mx:TextInput id="txt8" text="Address line 2" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="City:" >

<mx:TextInput id="txt9" text="City" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem label="State:" >

<s:DropDownList id="drp" width="161" prompt="Select State">

<s:ArrayCollection>

<fx:String>Uttar Predesh</fx:String>

<fx:String>Delhi</fx:String>

<fx:String>Hariyana</fx:String>

<fx:String>Maharastra</fx:String>

<fx:String>Punjab</fx:String>

</s:ArrayCollection>

</s:DropDownList>

</mx:FormItem>

<mx:FormItem>

<s:CheckBox label="I accept the term and conditions"/>

</mx:FormItem>

<mx:FormItem>

<s:HGroup>

<s:Button id="btn" label="Submit"/>

<s:Button id="btn1" label="Reset"/>

</s:HGroup>

</mx:FormItem>

</mx:Form>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Posted on: June 22, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.