Apply MXML skinClass at Runtime to Application Container in Flash Builder 4.6

Posted 7:37 pm by muni & filed under ADOBE FLEX.

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>

.