Invoice Script PHP jQuery

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

Posted by & 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

apply skinclass at runtime to application container at runtime in Flash builder 4.6

After Login

apply skinclass at runtime to application container at runtime in Flash builder 4.6

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.

apply mxml skinning at run time to application container in flash builder 4.6

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>
JavaScript
Copy

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>
JavaScript
Copy

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>
JavaScript
Copy

 

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

Get Access Now Instantly

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!

no thanks