How to create a component skin using FXG

January 24th, 2011 by aabhaanjan

In this tutorial, we  will  create a component skin using FXG.

Step 1: Create a new Button skin file.

Create new MXML file for skin. Choose name and host component type. Your code

Will appear like Step2.

Step 2: Review the skin class.

You will get the states as you have selected host component type button.

[xml]

<?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>

[/xml]

[HostComponent(“spark.components.Button”)]

[xml]

</fx:Metadata>

<!– states –>

<s:states>

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>disabled” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>down” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>over” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>up” />

</s:states>

<!– SkinParts

name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false

–>

</s:Skin>

[/xml]

Step 3: Review the graphics code.

This file was created by drawing in Fireworks and then selecting Commands > Export to FXG. You can also create FXG files using Illustrator or Photoshop.

Paste this FXG file into your src folder. It will look like this.

[xml]

<?xml version=”1.0″ encoding=”UTF-8″?>

<Graphic version=”1.0″ xmlns=”http://ns.adobe.com/fxg/2008″ xmlns:fw=”http://ns.adobe.com/fxg/2008/fireworks”  viewHeight= “25” viewWidth= “25”>

<Library>

</Library>

<Group fw:type=”page”>

<Group fw:type=”state”>

<Group fw:type=”layer”>

<Path winding=”evenOdd” data=”M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z ” blendMode=”normal” alpha=”1″>

<fill>

<SolidColor color=”#000000″ alpha=”1″/>

</fill>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”3″/>

</stroke>

</Path>

<Path winding=”evenOdd” data=”M 13 6 L 13 18″ blendMode=”normal” alpha=”1″>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”2″/>

</stroke>

</Path>

<Path winding=”evenOdd” data=”M 7 12 L 19 12″ blendMode=”normal” alpha=”1″>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”2″/>

</stroke>

</Path>

</Group>

</Group>

</Group>

</Graphic>

[/xml]

Step 4: Add the graphics to the skin.

In buttonSkin.mxml add xmlns:local and <local:BiggerButton/> This tells the compiler where to find this class.

Now your code will look like this :

[xml]

<?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” xmlns:local = “*”>

<!– host component –>

<fx:Metadata>

[/xml]

[HostComponent(“spark.components.Button”)]

[xml]

</fx:Metadata>

<!– states –>

<s:states>

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>disabled” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>down” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>over” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>up” />

</s:states>

<local:BiggerButton/>

<!– SkinParts

name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false

–>

</s:Skin>

[/xml]

Step 5: Add the skin to the button.

Here I have added the skinClass to my  button in the testSkin.mxml file.

[xml]

<?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:local=”*”>

<s:Buttonfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>biggerBtn” skinClass=”buttonSkin” x=”38″ y=”28″/>

</s:Application>

[/xml]

Tags: , , , , , , , , , ,