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