nariyu memo » Flex 4 (Gumbo) http://nariyu.playwell.jp メモ Wed, 18 Aug 2010 09:19:00 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 Flex 4 でボタンにアイコンを表示する http://nariyu.playwell.jp/2009/09/how-to-use-a-button-with-icon-in-flex4-like-mac-mail/ http://nariyu.playwell.jp/2009/09/how-to-use-a-button-with-icon-in-flex4-like-mac-mail/#comments Wed, 09 Sep 2009 03:50:31 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=401 Flex 4 (Gumbo) フレームワークのスキンにも少し慣れてきたので、Mac の Mail のようなツールバーをスキンで作ってみる。

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

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

ソースは以下。

まずは、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 を元にしてたりしてなかなか参考になる情報がない。
この記事も次のベータではまったく使えなくなるかもしれないけど。

]]> http://nariyu.playwell.jp/2009/09/how-to-use-a-button-with-icon-in-flex4-like-mac-mail/feed/ 0 Flex 4 でコンテナにスクロールバーを表示する http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/ http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/#comments Tue, 08 Sep 2009 10:15:35 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=361 Flex 4 (Gumbo) フレームワークでは、コンテナ内にたくさんの子コンポーネントを配置しても自動的にスクロールバーを表示する処理を行いません。

コンテナにスクロールバーを表示させるためには次の二つの方法があります。

方法1）スキンを利用する。

スクロールバーを表示するためにはコンテナのスキンに spark.components.Scroller を追加します。

まずは MXML でスキンを作成します。

skins/ApplicationSkin.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

<?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"
    alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata>
 
    <!-- ビューステート -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <!-- 背景とか -->
    <s:Rect top="0" bottom="0" left="0" right="0">
        <s:fill>
            <s:SolidColor color="{hostComponent.backgroundColor as uint}"/>
        </s:fill>
    </s:Rect>
 
    <!-- コンテナを Scroller でラップ -->
    <s:Scroller top="0" bottom="0" left="0" right="0">
 
        <!-- 子コンポーネントを内包するためのコンテナ -->
        <s:Group id="contentGroup" top="0" bottom="0" left="0" right="0"/>
    </s:Scroller>
 
</s:SparkSkin>

これはデフォルトのスキン「spark.skins.ApplicationSkin」に <s:Scroller> を追加しているだけです。（25行目、29行目）

あとは、Application にスキンを適用するだけ。

1
2
3
4
5
6
7
8
9

<?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"
    skinClass="skins.ApplicationSkin">
        ・
        ・
        ・
</s:Application>

これで子コンポーネントが多い場合にはスクロールバーが表示されます。

方法2）スキンを使わずコンテナに Scroller を追加して、その中に子コンポーネントを配置する

こちらは手っ取り早くスキンを使わないで、コンテナに Scroller を直接配置する方法です。

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

<?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">
 
    <s:Scroller width="100%" height="100%">
        <s:Group width="100%" height="100%">
            ・
            ・
            ・
        </s:Group>
    </s:Scroller>
 
</s:Application>

やっていることは方法1と同じですが、こうすると1段 DisplayObject の階層が深くなるのでスキンを利用する方がベターかなと思います。

Flex 3 まではスクロールバーが必要なくても内部的には実装されてたけど、Flex 4 は必要な場合には自分で追加するって感じ。

標準のコンポーネントから余分なコードがなくなってちょっとすっきりしたかな。

]]> http://nariyu.playwell.jp/2009/09/how-to-add-a-scrollbar-to-containe/feed/ 0