Tag Archives: Skinning

Skinning a Spark Button in Flex 4

Posted on by
4

The more I work with Flex 4, the more I understand why certain choices were made regarding the new component architecture, especially in regard to skinning. I stumbled, at first, as the skinning model is quite different and can appear much more cumbersome at first glance. Like most Flex devs, I was used to just modifying the CSS to style Halo components quickly and easily. The Spark model is more complex- but holds a lot more power as demonstrated below.

Example:
How to turn this button…

<s:Button label="Resources"/>

Into This button…

<s:Button label="Resources" skinClass="CustomButton"/>

The only difference being the addition of the CustomButton skin class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?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" 
      minWidth="21" minHeight="21"
      alpha.disabled="0.5">
 
    <fx:Metadata>
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- background -->
    <s:Rect left="0" right="0" top="0" bottom="0"
          radiusX="0" radiusY="0" topLeftRadiusX="2" topLeftRadiusY="2" topRightRadiusX="20" topRightRadiusY="80" height="30" width="69">
        <s:stroke>
            <s:SolidColorStroke color="0x001a0a" />
        </s:stroke>
        <s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x00522d" />
				<s:GradientEntry color="0x003019" />
			</s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- label -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="bottom"
			 paddingLeft="5" paddingRight="10" 
             maxDisplayedLines="1" top="2" left="10" bottom="4" right="10" horizontalCenter="0" verticalCenter="0" color.up="#A0BAA6" color.over="#F0FFF0">
    </s:Label>
</s:Skin>

As you can see, you can pretty much use any sort of visual wizardry you like in here: Solids, Gradients, Bitmaps, Strokes, what-ever!


Super easy to get started too, as you can have Flash Builder duplicate an existing skin to get you started. Just rename and recode. Once within the new skin, you can use the Appearance panel to modify things as you would through Halo (CSS styling) in previous versions of Flex, or get into the nitty-gritty as I’ve done here.

Cool.