Apply Vertical or Horizontal Gradient Color to Application Container through MXML Skinning In Flash Builder 4.6

Posted 6:55 pm by muni & filed under ADOBE FLEX.

In this tutorial we are going to see how to apply vertical gradient color and horizontal gradient color to the application container using MXML skinning.

Step 1: Create Flex project by selecting New -> Flex project.

Step 2: Now in the package explorer (top left) look for project you have just created, right click on the main application name and New -> MXML Skin (it creates MXML skin for your main application).

( note :  Mostly when selecting the Host component by default Application container won’t showed in the list of option, so just type spark.components.Application in the Host component and uncheck the create as copy of option)

Step 3: Now just use below code for the skin class.

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

	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->

	<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" />

</s:Skin>

Step 4: You have created vertical gradient color MXML skinning class, so just apply that skinning to your main application using skinClass like in the below code.

<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=”VerticalSkin”>

<?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="VerticalSkin">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

Here is the horizontal gradient color MXML skinning class code, where only small difference between both vertical and horizontal skinning class that’s rotation property of the Linear Gradient class.

In horizontal class the rotation is zero degree, where as in vertical class the rotation is 90 degrees.

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

	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->

	<s:Rect top="0" left="0" right="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="0">
				<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" />

</s:Skin>

 .