About Themes in Flex4


 

About Themes in Flex4

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

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

0

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

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

} else{

1

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

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

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

2

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

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

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

3

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

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

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

4

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

}

}

5

]]>

</fx:Script>

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

6

<s:layout>

<s:VerticalLayout/>

</s:layout>

7

<mx:ApplicationControlBar width="422">

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

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

8

 width="137">

<s:dataProvider>

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

9

</s:dataProvider>

</s:DropDownList>

</mx:ApplicationControlBar>

0

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

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

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

1

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

</mx:FormItem>

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

2

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

</mx:FormItem>

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

3

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

</mx:FormItem>

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

4

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

</mx:FormItem>

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

5

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

</mx:FormItem>

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

6

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

</mx:FormItem>

<mx:FormItem label="Gender:" >

7

<s:HGroup>

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

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

8

</s:HGroup>

</mx:FormItem>

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

9

<s:HGroup>

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

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

0

</s:HGroup>

</mx:FormItem>

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

1

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

</mx:FormItem>

<mx:FormItem label="Address:" >

2

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

</mx:FormItem>

<mx:FormItem>

3

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

</mx:FormItem>

<mx:FormItem label="City:" >

4

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

</mx:FormItem>

<mx:FormItem label="State:" >

5

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

<s:ArrayCollection>

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

6

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

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

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

7

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

</s:ArrayCollection>

</s:DropDownList>

8

</mx:FormItem>

<mx:FormItem>

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

9

</mx:FormItem>

<mx:FormItem>

<s:HGroup>

0

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

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

</s:HGroup>

1

</mx:FormItem>

</mx:Form>

</s:Panel>

2

</s:Application>

Output:

Running Application:

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

3

Download this code

Ads