Monday, October 17, 2011

Understanding Spark Skinning - Part 3

This is the third and final part of the 3 part series to understand Skinning in Spark.
PART 1 - Introduction to Skinning

Skinning a Button Component

In this part we'll take a simple Spark Button and see if we can do something interesting with it. So let us take a moment to figure out what we want to do with the button. What I am planning to do is to give my button a custom shape and change the colors. The code below just does that. We use the Spark Skin class and extend it to create our custom skin.
The final product looks something like this. 
Default

On Hover


I hope I have added enough comments.. :) 

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="40" minHeight="40">

        <!-- Add the HostComponent for the skin -->
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>

        <!-- Define the states for the component -->
<s:states>
<s:State name="up"/>
<s:State name="down"/>
<s:State name="over"/>
<s:State name="disabled"/>
</s:states>

        <!-- 
                 The Path tag allows to draw custom shapes. This currently draws a star.
                 With the filters we add the background for the button
                 This draws the default skin that will be used for all states
        -->
<s:Path data="M 50 0 L 70 30 H 100 L 80 60 L 100 100 L 50 80 L 0 100 L 20 60 L 0 30 H 30 L 50 0">
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" alpha="0.5" distance="11" angle="90"/>
</s:filters>
<s:stroke>
<s:LinearGradientStroke weight="1">
<s:GradientEntry color="0x0000FF" ratio=".25"/>
<s:GradientEntry color="0xFFFFFF"/>
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"/>
<s:GradientEntry color="0x0000FF"/>
</s:LinearGradient>
</s:fill>
</s:Path>


        <!-- 
                 The Path tag allows to draw custom shapes. This currently draws a star.
                 With the filters we add the background for the button
                 This draws a custom layout for the "over" state
        -->
<s:Path data="M 50 0 L 70 30 H 100 L 80 60 L 100 100 L 50 80 L 0 100 L 20 60 L 0 30 H 30 L 50 0" includeIn="over">
<s:stroke>
<s:LinearGradientStroke weight="1">
<s:GradientEntry color="0x0000FF" ratio=".25"/>
<s:GradientEntry color="0xFFFFFF"/>
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"/>
<s:GradientEntry color="0x0000FF" ratio=".25"/>
</s:LinearGradient>
</s:fill>
</s:Path>


        <!--
                 The label is added to add the text for the button
        -->
<s:Label id="labelDisplay" horizontalCenter="0" verticalCenter="-5"/>

</s:SparkSkin>

No comments :