Home Tutorial Flex Flex4 Components About Themes in Flex4

 
 

Share on Google+Share on Google+
About Themes in Flex4
Posted on: June 22, 2010 at 12:00 AM
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

Advertisement

Related Tags for About Themes in Flex4:


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.

Posted on: June 22, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com