nariyu memo » MXML http://nariyu.playwell.jp メモ Wed, 18 Aug 2010 09:19:00 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 Flex と Twitter と Google Maps と http://nariyu.playwell.jp/2009/09/tweets-map/ http://nariyu.playwell.jp/2009/09/tweets-map/#comments Mon, 14 Sep 2009 12:30:58 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=446 Flex, Twitter, Google Maps を組み合わせる練習。

大きく表示

ホントは Google Maps 上につぶやきをポップアップ表示したかったけど、つぶやきの座標はとれないみたい（プライバシー保護的にあたりまえ）なので、右のエリアに表示します。 緯度経度情報のあるつぶやきだけ地図上に載せました（2009/9/17 追記）

地図をドラッグすると周囲のつぶやきを表示します。

コメント中の「@ユーザ名」とか URL とかをリンクにする処理は省略。 つけました（2009/9/15 追記）

なんだか途中で飽きてしまってとっても中途半端で意味のないものになったけど、せっかくなので載せておく。

[2009/9/15 追記]
検索範囲を示す円を描いてみた。
そして地図のポイントをブックマークできるようにした。（大崎半径5km以内のつぶやき）

[2009/9/16 追記]
経度／緯度情報のあるつぶやきだけ地図上にアイコンをマッピングしてみたよ。

[2009/9/17 追記]
地図内につぶやきを表示するようにしたよ。
検索もできるようにしたよ。（大崎半径50km以内の「falsh」を含むつぶやき）
ジオコーディングを使って経度緯度情報がなくてもアイコンが出せるようになったよ。わお！

[2009/9/18 追記]
地図のリンクを使いやすくしたよ。

]]> http://nariyu.playwell.jp/2009/09/tweets-map/feed/ 4 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 Flex でビュー（デザイン）とロジックの分離 http://nariyu.playwell.jp/2009/09/separation-of-view-and-logic/ http://nariyu.playwell.jp/2009/09/separation-of-view-and-logic/#comments Fri, 04 Sep 2009 03:31:34 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=311 呼んだ？呼んだよね？
さあ今日はね。 Flex アプリでレイアウトや配色などのデザイン（ビュー）とロジックを分離するやり方を考えてみようよ。

なに？大丈夫だよ。絶対できるって。
じゃあ始めるよ。

すごく簡単なウェブアプリなら「 Flex ってこんなに簡単にできちゃうよー」ってサンプルを紹介するサイトなんかにあるように MXML だけでもできちゃうことがあるけど、ちょっと複雑になってくるとそうはいかないよね。

ってゆうか、そんな「MXML だけで作れちゃうウェブアプリ」のサンプルはエラーハンドリングを実装していない場合がほとんどだしね。
だって Flex を布教するためにはエラーハンドリングみたいな地味で面白くもない技術を紹介してもしょうがないもん。
仕方ないよね。うん。

・・・で、ちょっと複雑になると <mx:Script> タグを使って MXML に実装を書くこともあるけど、規模が大きくなってくると「やっぱりビューとロジックは分けるべきじゃない？」って言い出す人がいるよね。

面倒だけど仕方ないよ。

そんな訳でここらへんでビューとロジックの分離方法についておさらいしておこうね。

やり方はたくさんあると思うけど、今回はよく使われる二つの方法を復習するよ。
いいかい。ちゃんとついてきてよ。

方法1）IMXMLObject を使ったビューとロジックの分離

IMXMLObject は Flex SDK に含まれる Adobe が推奨する方法（？）だね。

パッケージ名を含む完全なクラス名は mx.core.IMXMLObject だよ。
mx.core！ なんか大切そうな感じだね。

でも中身はかなりシンプルなんだ。コメントを除くとこれだけだよ↓

1
2
3
4
5
6
7

package mx.core
{
public interface IMXMLObject
{
    function initialized(document:Object, id:String):void;
}
}

これの使い方は簡単。
まずは views/MyCustomComponent.mxml っていうファイルを作って、こんな風に書く↓

1
2
3
4
5
6
7

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="400" height="300"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

これはただの白い四角形の中にボタンが置いてあるだけの簡単なカスタムコンポーネントだよ。
これがレイアウトや配色等のデザイン、つまり「ビュー」ってことになるんだ。

で、このボタンをクリックするとメッセージが表示されるようにロジックを実装してみるよ。

そのためにさっき出てきた IMXMLObject を実装したクラスを作る。ここではこれをヘルパーと呼ぶことにしよう。

ファイル名は views/helpers/MyCustomComponentHelper.as という ActionScrtipt ファイルだ。
そこに次のように書く↓

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

package views.helpers
{
    import flash.events.MouseEvent;
 
    import mx.controls.Alert;
    import mx.core.IMXMLObject;
    import mx.events.FlexEvent;
 
    import views.MyCustomComponent;
 
    public class MyCustomComponentHelper implements IMXMLObject
    {
        private var view:MyCustomComponent;
 
        public function MyCustomComponentHelper()
        {
        }
 
        public function initialized(document:Object, id:String):void
        {
            view = document as MyCustomComponent;
            view.addEventListener(FlexEvent.CREATION_COMPLETE,
                creationCompleteHandler);
        }
 
        private function creationCompleteHandler(event:FlexEvent):void
        {
            view.button.addEventListener(MouseEvent.CLICK,
                button_clickHandler);
        }
 
        private function button_clickHandler(event:MouseEvent):void
        {
            Alert.show("ボタンがクリックされたよ");
        }
    }
}

急に長くなってきたけど、これだけではまだ動かないから最初に作った MXML ファイルにこのヘルパーを追記するよ。

こんな感じだ。

views/MyCustomComponent.mxml

1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:helpers="views.helpers.*"
    width="400" height="300"
    horizontalAlign="center" verticalAlign="middle">
    <helpers:MyCustomComponentHelper id="helper"/>
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

4行目と7行目が追加されたヘルパーだ。

これでカスタムコンポーネントが完成した。ビューである MyCustomCompoent.mxml にはロジックは書かれていない。

ここまでのパッケージ構成はこんな感じになる↓

separate-of-view-and-logic-1

あとは、アプリケーションにビューを追加すればOK。

1
2
3
4
5
6
7

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:views="views.*"
    layout="absolute"
    <views:MyCustomComponent/>
</mx:Application>

これで目的は達成できたね。

だけど、ちょっと待って。ヘルパーの中に「view.addEventListener(ほにゃらら」とか 「view.button.addEventListener(ほにゃらら」ってのが出てきてる。

規模が大きくなってくるとなんだかいちいち「view.」って書くのが面倒だよね。

それに別のクラスからヘルパーのメソッドを呼ぶときには「myCustomComponent.helper.メソッド()」って書かなきゃいけない。
「myCustomComponent.helper.ほにゃらら」ってなにそれ長い！面倒！

そこで最近よく使っているのが次の方法なんだ。

方法2）ロジックでビューを継承しちゃおうよ法（仮称）

これはこの名前の通り、「ビューを規定クラスにして、ロジックをそのサブクラスとして実装する」っていう方法だ。

まずは規定クラスになるビューを MXML で作るよ。

views/mxml/MyCustomComponentView.mxml

1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="400" height="300">
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

これでビューは完成だよ。ヘルパーなんて面倒なものは書かなくていいよ。

次にロジックをビューのサブクラスとして ActionScript ファイルで作るんだ。

views/MyCustomComponent.as

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

package views
{
    import flash.events.MouseEvent;
 
    import mx.controls.Alert;
    import mx.events.FlexEvent;
 
    import views.mxml.MyCustomComponentView;
 
    public class MyCustomComponent extends MyCustomComponentView
    {
        public function MyCustomComponent()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE,
                creationCompleteHandler);
        }
 
        private function creationCompleteHandler(event:FlexEvent):void
        {
            button.addEventListener(MouseEvent.CLICK,
                button_clickHandler);
        }
 
        private function button_clickHandler(event:MouseEvent):void
        {
            Alert.show("ボタンがクリックされたよ");
        }
    }
}

これだけで完成だよ。簡単でしょ？簡単だよね？
あとは MyCustomComponent をアプリケーションに追加すればいいよ。
MXML ファイルのほうじゃなくて ActionScript ファイルのほうだよ。

このパッケージ構成はこんな感じになるよ↓

separate-of-view-and-logic-2

これならロジックを実装したクラスに「view.ほにゃらら」とかつけなくてよくなりかなりすっきり！
しかもビューのなかにヘルパーとか書かなくてもいい！行数も短くなってすっきりすっきり！

そしてこれの一番いいところは MXML の中に <mx:Script> タグでロジックを実装しちゃった昔の Flex アプリも簡単にビューとロジックを分離した構造に修正できるってことなんだ。
つまり、規模が小さいうちは MXML の中にロジックを書いて、規模が大きくなってきたらビューとロジックを分離するっていうやりかたも比較的簡単にできちゃうってこと。

わお、ステキだね！

さあ君もやってみよう。

（オフロスキーって知ってますか？）

]]> http://nariyu.playwell.jp/2009/09/separation-of-view-and-logic/feed/ 2 Flex のロギング http://nariyu.playwell.jp/2009/05/flex-trace/ http://nariyu.playwell.jp/2009/05/flex-trace/#comments Thu, 28 May 2009 11:28:07 +0000 nariyu http://www.playwell.jp/blog/nariyu/?p=47 ずっと前から言われてることだけど、trace() の処理は重い。
かなり重い。とにかく重い。

一方 Flex のロギング API は軽い。trace() と比べると断然軽い。しかもリリースビルドして AIR にログを送ることもできるので便利。

簡単な例を作ってみた。

flexlogger

AIR アプリ: FlexLogger.air
ソース: FlexLogger.zip

上の AIR アプリをインストールして、下のボタンを押すと押すとログが取得できます。

デモとソースは以下。

jp/playwell/logging/LoggingTarget.as

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

package jp.playwell.logging
{
    import flash.events.StatusEvent;
    import flash.net.LocalConnection;
 
    import mx.core.mx_internal;
    import mx.logging.ILogger;
    import mx.logging.Log;
    import mx.logging.LogEvent;
    import mx.logging.targets.LineFormattedTarget;
 
    use namespace mx_internal;
 
    public class LoggingTarget extends LineFormattedTarget
    {
        protected var lc:LocalConnection;
        protected var currLevel:uint;
 
        public function LoggingTarget()
        {
            super();
            lc = new LocalConnection();
            lc.addEventListener(StatusEvent.STATUS,
                lc_statusHandler);
            Log.addTarget(this);
        }
        private function lc_statusHandler(event:StatusEvent):void
        {
            //if (event.level == "error")
            //    trace("jp.playwell.logging.LoggingTarget: error");
        }
 
        override public function logEvent(event:LogEvent):void
        {
            currLevel = event.level;
            super.logEvent(event);
        }
        override mx_internal function internalLog(message:String):void
        {
            localConnection.send("_FlexLogger",
                "log", currLevel, message);
        }
    }
}

LocalConnection の接続名の先頭のアンダースコアが大切なのです。

LoggingTest.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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:logging="jp.playwell.logging.*"
    layout="vertical" verticalAlign="middle">
    <mx:Script>
        <![CDATA[
            import mx.logging.ILogger;
            import mx.logging.Log;
 
            private function getLogger():ILogger
            {
                return Log.getLogger("LoggingTest");
            }
        ]]>
    </mx:Script>
 
    <logging:LoggingTarget
        includeCategory="true"
        includeLevel="true"
        includeTime="true"/>
 
    <mx:Button label="logger.debug()" width="150"
        click="getLogger().debug('デバッグよ')"/>
    <mx:Button label="logger.info()" width="150"
        click="getLogger().info('情報です')"/>
    <mx:Button label="logger.warn()" width="150"
        click="getLogger().warn('警告だ')"/>
    <mx:Button label="logger.error()" width="150"
        click="getLogger().error('エラーだね')"/>
    <mx:Button label="logger.fatal()" width="150"
        click="getLogger().fatal('致命的なエラーだぜ')"/>
</mx:Application>

今回は LocalConnection でログを送っているけど、AIR を使えばローカルファイルに保存したりも簡単にできる。べんり。

さあこれからは trace() よりも mx.logging.* を使おう。

]]> http://nariyu.playwell.jp/2009/05/flex-trace/feed/ 0