« Flex2のカスタムコントロールを作る | トップページ | Flex2の日本語ドキュメントが公開 »

2006年9月 5日 (火)

Flex2のカスタムコントロールにイベントを作成する

独自のコントロールを作成したら、次は独自のイベントを発行する必要が生じると思いますので、今日は先日作成したカスタムコントロールに イベントを追加するサンプルを書いてみます。
サンプルのMXMLファイル(CustomEvent.zip)

まず、独自のイベントを定義してみます。
イベントオブジェクトは、flash.mx.events.Eventのサブクラスである必要があります。
今回は、イベントオブジェクトの定義にActionScriptファイル(asファイル)を使用します。
ExampleBox.mxmlと同じディレクトリに、ExampleBoxButtonClickEvent.asという名前のファイルを作成し、以下のコードを記述します。
package controls
{
    import flash.events.Event;
	
    public class ExampleBoxButtonClickEvent extends Event
    {
        public var message:String;
        
        public function ExampleBoxButtonClickEvent(eventType:String)
        {
            super(eventType, false, false);
        }
    }
}
このサンプルでは、単純にメッセージを持つ変数だけのシンプルなものにしました。

先頭の package controls は、このイベントクラスがcontrolsパッケージに属することを示しています。
クラス宣言時の extends Event により、このクラスはEventクラスのサブクラスとなります。
コンストラクタ内の super は、スーパークラス(この場合はEventクラス)のコンストラクタを呼び出しています。
ここまでは、Javaの経験がある方ならおなじみですね。

なお、Eventクラスのコンストラクタは、
第1引数 : イベントタイプを表す文字列
第2引数 : イベントバブリング(親要素へイベントが伝播する)を行うかどうか
第3引数 : イベントをキャンセルできるかどうか
を指定するようです。


次に、ExampleBoxがイベントを発行する部分を記述しましょう。
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox borderStyle="solid" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initBox()"
    width="300" height="300">
    
    
    <mx:Metadata>
        [Event(name="exampleButtonClick", 
            type="controls.ExampleBoxButtonClickEvent")]
    </mx:Metadata>
    

    <mx:Script>
    <![CDATA[
    
    private var boxTitle:String = "";
    
    private function initBox() : void
    {
        this.titleLabel.text = this.boxTitle;
    }
    
    public function set title(value:String) : void
    {
        this.boxTitle = value;
        
        if(this.titleLabel != null)
            this.titleLabel.text = value;
    }
    
    public function get title() : String
    {
        return this.boxTitle;
    }
    
    
    private function buttonClick() : void
    {
        var event:ExampleBoxButtonClickEvent = 
            new ExampleBoxButtonClickEvent("exampleButtonClick");
            
        event.message = "ボタンがクリックされました";
            
        dispatchEvent(event);
    }
    
    
    ]]>
    </mx:Script>
    
    <mx:Label id="titleLabel" />
    <mx:Button label="click" click="buttonClick()" />
</mx:VBox>
太字の部分が、先日のExampleBox.mxml ファイルに追加したコードです。
今回は、ボタンを1つ追加して、そのボタンが押されたときにイベントを発生させます。

まず、このコントロールが持つイベントを、
<mx:Metadata>
    [Event(name="exampleButtonClick", type="controls.ExampleBoxButtonClickEvent")]
</mx:Metadata>
の部分で定義しています。
[Event ( name="EventName", type="EventClassName" ) ]
といった書式で、EventNameはイベント名となり、EventClassNameで指定したクラスはイベントハンドラに引数として渡されます。

実際にイベントを発行している部分は、ボタンのクリックイベントハンドラである
private function buttonClick() : void
{
    var event:ExampleBoxButtonClickEvent = 
        new ExampleBoxButtonClickEvent("exampleButtonClick");
    
    event.message = "ボタンがクリックされました";
    
    dispatchEvent(event);
}
の部分で、まずイベントハンドラに渡すExampleBoxButtonClickEventのインスタンスを生成します。
第1引数にはイベントタイプを渡しますが、この文字列はイベント名と同じものを指定する必要があるようです。
その後、必要なデータを格納した後に dispatchEvent(event) でイベントを発行します。
dispatchEventメソッドは flash.events.EventDispatcher クラスのメソッドで、今回のVBoxはこのクラスのサブクラスとなっています。


最後に、このイベントを処理する部分のコードを追加します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:components="controls.*"
    width="100%" height="100%"
    horizontalAlign="left">
    
    <mx:Script>
    <![CDATA[
    import controls.*;
    
    private function parts1ButtonClickHandler
        (event:ExampleBoxButtonClickEvent) : void
    {
        mx.controls.Alert.show(event.message);
    }
    
    ]]>
    </mx:Script>
    
    
    <mx:HBox>
        <components:ExampleBox title="共通パーツ1" 
            exampleButtonClick="parts1ButtonClickHandler(event)"
            backgroundColor="#5555ff" />
        <components:ExampleBox title="共通パーツ2" backgroundColor="#ff5555" />
    </mx:HBox>
    
</mx:Application>
太字の部分が追加したコードです。
ExampleBoxタグに、追加したイベント名であるexampleButtonClick="..."としてイベントハンドラを指定出来ていますね。

あとは、ボタンなどと同様にイベントを処理します。
このサンプルでは、Alertでイベントオブジェクトの message 文字列を表示しています。

|

« Flex2のカスタムコントロールを作る | トップページ | Flex2の日本語ドキュメントが公開 »

コメント

Flex初心者です。やまねこさんのサイト、とっても参考になります。
ありがとうございます (^o^)
普段、PHP+JavaScriptを使っていて
JAVAの経験がないのですが、FlexはJavaの考え方を大いに
ベースにしているようですね。
Flexのマニュアルを読んでも「???」だった謎のいくつかが
解決されて、とてもいい気分です!
Flex活用記の続編、期待しています。

投稿: tomtom | 2007年8月 6日 (月) 11時36分

コメントありがとうございます。
それほど頻繁には更新できないと思いますが、新しい場所でボチボチやっていきますので、今後ともよろしくお願いします。

投稿: やまねこ | 2007年8月 7日 (火) 03時30分

FLEXで開発道中にイベント送出ほうほうに困っていましたがこの文章のおかげで解決できました!!。本当に助かりました。ありがとうございます。今後もこんな文章をたくさん掲載してください。

投稿: toyose | 2009年5月31日 (日) 00時46分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11766901

この記事へのトラックバック一覧です: Flex2のカスタムコントロールにイベントを作成する:

« Flex2のカスタムコントロールを作る | トップページ | Flex2の日本語ドキュメントが公開 »