
TUTORIALS POINT
Simply Easy Learning Page 38
Apply skin in MXML script (statically)
Apply GradientBackgroundSkin to a BorderContainer with id mainContainer using its skinClassattribute.
<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 skinClassproperty.
protected function gradientBackground_clickHandler(event:MouseEvent):void
{
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
Flex Style with Skin Example
Let us follow the following steps to see skinning in action in a Flex application by creating a test application:
Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in
the Flex - Create Application chapter.
Create skin GradientBackgroundSkin.mxml under a package com.tutorialspoint.skin as explained
above. Keep rest of the files unchanged.
Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
Compile and run the application to make sure business logic is working as per the requirements.
Following is the content of
the GradientBackgroundSkin.mxml filesrc/com/tutorialspoint/skin/GradientBackgroundSkin.mxml.
<?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.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<!-- SkinParts
Commentaires sur ces manuels