Skin Styles

Skinning

The skinning concept in Adobe Flex is a technique of customizing the user interface (UI) appearance, look and feel of a UI Component completely. A Skin can define text, image, filters , transitions and states of a component. In Adobe Flex, the skins can be created as a separate MXML or ActionScript component. Every visual aspect of a UI components can be effectively controlled by the Skin.

The process of defining skin is same for all the UI component.

Step 1: Create a skin

Launch Create MXML Skin wizard using the option File > New > MXML Skin.

Adobe Flex Skin Wizard

Enter Package as com.tutorialspoint.skin, name as GradientBackgroundSkin and choose host component as existing Adobe Flex BorderContainer control spark.component.BorderContainer.

Now you've created a skin for a BorderContainer. Modify content of the mxml skin file src/com.tutorialspoint/skin/GradientBackgroundSkin.mxml. Update fill layer as follows:

<!-- fill -->

<s:Rect id="backgroundRect" left="0" right="0" height="100%" top="0">

   <s:fill>

      <s:LinearGradient rotation="90">

         <s:GradientEntry color="0x888888" ratio="0.2"/>

         <s:GradientEntry color="0x111111" ratio="1"/>

      </s:LinearGradient>

   </s:fill>

</s:Rect>           

Step 2: Apply skin

You can apply skin over a component using two ways

Apply skin in MXML script (statically)

Apply GradientBackgroundSkin to a BorderContainer with id mainContainer using its skinClass attribute.

<s:BorderContainer width="560" height="500" id="mainContainer"

   styleName="container">

   <s:VGroup width="100%" height="100%" gap="50"

   horizontalAlign="center" verticalAlign="middle"

   skinClass="com.tutorialspoint.skin.GradientBackgroundSkin">

Apply skin in ActionScript (dynamically)

Apply GradientBackgroundSkin to a BorderContainer with id mainContainer using its skinClass property.

protected function gradientBackground_clickHandler(event:MouseEvent):void

{

   mainContainer.setStyle("skinClass", GradientBackgroundSkin );

}

Adobe Flex Style with Skin Example

Let us follow the following steps to see skinning in action in a Adobe Flex application by creating a test application:

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/Adobe Flex/spark"

   xmlns:mx="library://ns.adobe.com/Adobe Flex/mx">

   <!-- host component -->

   <fx:Metadata>

      [HostComponent("spark.components.BorderContainer")]

   </fx:Metadata>

   <!-- states -->

   <s:states>

      <s:State name="disabled" />

      <s:State name="disabled" />

      <s:State name="normal" />

   </s:states>

   <!-- SkinParts

   name=contentGroup, type=spark.components.Group, required=false

   -->

   <!-- fill -->

   <s:Rect id="backgroundRect" left="0" right="0" height="100%" top="0">

      <s:fill>

         <s:LinearGradient rotation="90">

            <s:GradientEntry color="0x111111" ratio="0.2"/>

            <s:GradientEntry color="0x888888" ratio="1"/>

         </s:LinearGradient>

      </s:fill>

   </s:Rect>        

   <!-- must specify this for the host component -->

   <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

</s:Skin>

Following is the content of the modified HelloWorld.mxml file src/com/tutorialspoint/client/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   xmlns:s="library://ns.adobe.com/Adobe Flex/spark"

   xmlns:mx="library://ns.adobe.com/Adobe Flex/mx"

   width="100%" height="100%" minWidth="500" minHeight="500"

   initialize="application_initializeHandler(event)">

  <fx:Style source="/com/tutorialspoint/client/Style.css"/>

  <fx:Script>

  <![CDATA[

     import com.tutorialspoint.skin.GradientBackgroundSkin;

     import mx.controls.Alert;

     import mx.events.Adobe FlexEvent;

     import spark.skins.spark.BorderContainerSkin;                                            

     protected function btnClickMe_clickHandler(event:MouseEvent):void

     {

        Alert.show("Hello World!");                                                               

     }

     protected function application_initializeHandler(event:Adobe FlexEvent):void

     {

        lblHeader.text = "My Hello World Application";                                                         

     }

     protected function gradientBackground_clickHandler(event:MouseEvent):void

     {

         mainContainer.setStyle("skinClass", GradientBackgroundSkin );

     }

     protected function standardBackground_clickHandler(event:MouseEvent):void

     {

        mainContainer.setStyle("skinClass", BorderContainerSkin );

     }

   ]]>

   </fx:Script>

   <fx:Declarations>

      <s:RadioButtonGroup id="selectorGroup" />

   </fx:Declarations>

   <s:BorderContainer width="500" height="500" id="mainContainer"

      skinClass="spark.skins.spark.BorderContainerSkin"

      horizontalCenter="0" verticalCenter="0" cornerRadius="10">

      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"

      verticalAlign="middle">

         <s:Label id="lblHeader" fontSize="40" color="green"

         styleName="heading"/>

         <s:Button label="Click Me!" id="btnClickMe"

            click="btnClickMe_clickHandler(event)"/>

         <s:RadioButton color="gray" fontWeight="bold"

            group="{selectorGroup}" label="Standard Background"

            click="standardBackground_clickHandler(event)" selected="true"/>

         <s:RadioButton color="gray" fontWeight="bold"

            group="{selectorGroup}" label="Gradient Background"

            click="gradientBackground_clickHandler(event)"/>                                            

      </s:VGroup>                                              

   </s:BorderContainer>

</s:Application>