Interview Questions
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>
Get in touch with training experts Get Free Quotes