Post your need

Adobe Flex Tutorials

  • What is Adobe Flex?
  • Adobe Flex Development Components
  • Parts of Flex Application
  • Creating your First Application in Flex Environment
  • Flex Application Deployment
  • Adobe Flex Application Development Life Cycle
  • Using CSS Styles in Flex App
  • Skin Styles
  • Different Data Binding Techniques
  • Using Fundamental Controls
  • Implementing Form Controls
  • Implementing Complex Controls
  • Applying Visual Effects
  • Event Handling Techniques
  • Advanced and Custom Controls
  • RPC Services

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>

Interested about Adobe Flex?
Get in touch with training experts Get Free Quotes
Leave a comment