Flex 4 でボタンにアイコンを表示する

Flex 4 (Gumbo) フレームワークのスキンにも少し慣れてきたので、Mac の Mail のようなツールバーをスキンで作ってみる。

見た目はちょっと手抜きだけど、出来上がりはこんな感じ↓

This movie requires Flash Player 10

割と似たものが簡単にできたかな。

ソースは以下。

まずは、spark.components.Button を継承して、ToolBarButton っていうクラスを作ります。
このクラスではメタタグで「icon」スタイルを定義して、スキンクラスを指定しているだけ。

アイコンをスキンファイルに直接記述するなら新しくボタンのサブクラスを作る必要はないんだけど、スキンは汎用的じゃなきゃ意味がないので、今回は専用のクラスを作ります。

jp/playwell/controls/ToolBarButton.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package jp.playwell.controls
{
    import jp.playwell.skins.ToolBarButtonSkin;
 
    import spark.components.Button;
 
    [Style(name="icon", type="Class", inherit="no")]
 
    public class ToolBarButton extends Button
    {
        public function ToolBarButton()
        {
            super();
            setStyle("skinClass", ToolBarButtonSkin);
        }
    }
}

で、次にこのクラスのスキンを作ります。
おなじみの spark.skins.SparkSkin を継承した MXML ファイルです。

jp/playwell/skins/ToolBarButtonSkin.mxml

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<?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"
    minWidth="21" minHeight="21"
    alpha.disabled="0.5">
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("jp.playwell.controls.ToolBarButton")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            static private const exclusions:Array = ["labelElement"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: fill -->
    <s:Rect top="0" height="23" horizontalCenter="0" width="45"
            radiusX="11.5" radiusY="11.5">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE6E7E8"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
                <s:GradientEntry color="0xC7CBCE"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
                <s:GradientEntry color="0xD9DCE0"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: border -->
    <s:Rect top="1" horizontalCenter="0"
            width="45" height="23"
            radiusX="11.5" radiusY="11.5">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" alpha="0.4"/>
        </s:stroke>
    </s:Rect>
    <s:Rect top="0" horizontalCenter="0"
            width="45" height="23"
            radiusX="11.5" radiusY="11.5">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.4"/>
                <s:GradientEntry color="0x000000" alpha="0.1"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 3: icon -->
    <s:BitmapImage source="{hostComponent.getStyle('icon')}"
        horizontalCenter="0" top="2"/>
 
    <!-- layer 4: text -->
    <s:SimpleText
        fontSize="11.5"
        textAlign="center" color="#FFFFFF"
        verticalAlign="middle" alpha="0.4"
        horizontalCenter="0" text="{hostComponent.label}"
        left="10" right="10" top="29" />
    <s:SimpleText id="labelElement"
        fontSize="11.5"
        textAlign="center"
        verticalAlign="middle"
        horizontalCenter="0"
        left="10" right="10" top="28" />
 
</s:SparkSkin>

ちょっと長いけど、アイコンに関係してるのは66行目だけ。ここでアイコンを適用しています。

これで完成！

後は、ToolBarButton を使うだけ。例えば MXML ならこんな感じで使えます↓

1
2
3
4

<controls:ToolBarButton label="Get Mail" icon="@Embed(source='assets/mail.png')"/>
<controls:ToolBarButton label="New Message" icon="@Embed(source='assets/mail_new.png')"/>
<controls:ToolBarButton label="Delete" icon="@Embed(source='assets/delete.png')"/>
<controls:ToolBarButton label="Junk" icon="@Embed(source='assets/mail_junk.png')"/>

それにしても Flex 4 のサンプルコードってまだまだ少ないな。
ネットで探しても古いベータ版の Flex 4 SDK を元にしてたりしてなかなか参考になる情報がない。
この記事も次のベータではまったく使えなくなるかもしれないけど。

Categories: Flex 4 (Gumbo)

Tags: , , , , , , , , ,

Permalink | 2009/09/09 12:50 | Posted by nariyu

Leave a Reply