Flex2のカスタムコントロールにイベントを作成する
独自のコントロールを作成したら、次は独自のイベントを発行する必要が生じると思いますので、今日は先日作成したカスタムコントロールに
イベントを追加するサンプルを書いてみます。
サンプルのMXMLファイル(CustomEvent.zip)
まず、独自のイベントを定義してみます。
イベントオブジェクトは、flash.mx.events.Eventのサブクラスである必要があります。
今回は、イベントオブジェクトの定義にActionScriptファイル(asファイル)を使用します。
ExampleBox.mxmlと同じディレクトリに、ExampleBoxButtonClickEvent.asという名前のファイルを作成し、以下のコードを記述します。
先頭の package controls は、このイベントクラスがcontrolsパッケージに属することを示しています。
クラス宣言時の extends Event により、このクラスはEventクラスのサブクラスとなります。
コンストラクタ内の super は、スーパークラス（この場合はEventクラス）のコンストラクタを呼び出しています。
ここまでは、Javaの経験がある方ならおなじみですね。
なお、Eventクラスのコンストラクタは、
第1引数 ： イベントタイプを表す文字列
第2引数 ： イベントバブリング（親要素へイベントが伝播する）を行うかどうか
第3引数 ： イベントをキャンセルできるかどうか
を指定するようです。
次に、ExampleBoxがイベントを発行する部分を記述しましょう。
今回は、ボタンを1つ追加して、そのボタンが押されたときにイベントを発生させます。
まず、このコントロールが持つイベントを、
[Event ( name="EventName", type="EventClassName" ) ]
といった書式で、EventNameはイベント名となり、EventClassNameで指定したクラスはイベントハンドラに引数として渡されます。
実際にイベントを発行している部分は、ボタンのクリックイベントハンドラである
第1引数にはイベントタイプを渡しますが、この文字列はイベント名と同じものを指定する必要があるようです。
その後、必要なデータを格納した後に dispatchEvent(event) でイベントを発行します。
dispatchEventメソッドは flash.events.EventDispatcher クラスのメソッドで、今回のVBoxはこのクラスのサブクラスとなっています。
最後に、このイベントを処理する部分のコードを追加します。
ExampleBoxタグに、追加したイベント名であるexampleButtonClick="..."としてイベントハンドラを指定出来ていますね。
あとは、ボタンなどと同様にイベントを処理します。
このサンプルでは、Alertでイベントオブジェクトの message 文字列を表示しています。
サンプルの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 文字列を表示しています。
| 固定リンク | コメント (3) | トラックバック (0)