Applying MXML skinclass at runtime increases your application attractiveness in the great way. In this tutorial I’m three files Gradient.mxml, VerticalSkin.mxml and EllipseSkin.mxml.
Before Login
After Login
Step 1: To create new application New ->Flex project.
Step 2: Then create skin class to the main application by right click on main application name then New -> MXML Skin.
Now i’m applying skinclasses to the application container using skinClass property like skinClass=”ElipseSkin”. To apply skinclass at runtime i’m using action script code with script block in mxml application like one in the below code.
this.setStyle(‘skinClass’, Class(VerticalSkin));
Here is the application and two skin class code.
Gradient.mxml application code here
<?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" skinClass="ElipseSkin"> <fx:Script> <![CDATA[ public function login_btn_click():void{ viewstack.selectedChild=chat; //var skin:Application= new Application; this.setStyle('skinClass', Class(VerticalSkin)); } ]]> </fx:Script> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <mx:ViewStack id="viewstack" left="10" right="10" top="10" bottom="10" selectedIndex="0"> <mx:Canvas width="100%" height="100%" id="login"> <s:Panel width="362" height="260" color="#FF00EA" fontFamily="Verdana" fontWeight="bold" horizontalCenter="0" title="::Sam Chat::" verticalCenter="-10"> <s:Label horizontalCenter="0" verticalCenter="-60" text="Login"/> <s:TextInput x="116" y="74"/> <s:Button x="145" y="114" label="Button" click="login_btn_click()"/> </s:Panel> </mx:Canvas> <mx:Canvas width="100%" height="100%" id="chat"> <s:Panel width="695" height="537" color="#FF00EA" fontFamily="Verdana" fontWeight="bold" horizontalCenter="0" title="::Sam Chat::" verticalCenter="-10"> <s:TextArea width="379" height="370" x="10" y="30"/> </s:Panel> </mx:Canvas> </mx:ViewStack> </s:Application>
VerticalSkin.mxml skinClass code is here
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- host component --> <fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata> <!-- states --> <s:states> <s:State name="disabled" /> <s:State name="normal" /> </s:states> <s:Rect top="0" left="0" right="0" bottom="0"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry alpha="0.5" color="#0000ff"/> <s:GradientEntry alpha="0.0" color="#0000ff"/> </s:LinearGradient> </s:fill> </s:Rect> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> <!-- SkinParts name=contentGroup, type=spark.components.Group, required=false name=controlBarGroup, type=spark.components.Group, required=false --> </s:Skin>
Ellipse.mxml skinClass code is here
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- host component --> <fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata> <!-- states --> <s:states> <s:State name="disabled" /> <s:State name="normal" /> </s:states> <s:Ellipse top="0" left="0" right="0" bottom="0"> <s:fill> <s:LinearGradient rotation="90"> <s:entries> <s:GradientEntry color="0x0000FF" ratio="0.00" alpha="0.5"/> <s:GradientEntry color="0x0000ff" ratio="0.5" alpha="0.5"/> </s:entries> </s:LinearGradient> </s:fill> </s:Ellipse> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> <!-- SkinParts name=contentGroup, type=spark.components.Group, required=false name=controlBarGroup, type=spark.components.Group, required=false --> </s:Skin>