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.
|
<?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> |

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.