マウスイベントを取得してみよう

Apolloのアプリケーションと言っても記述するコードの中身はFlexのMXMLおよびActionScriptになります。今回は、各マウスのイベントを取得してみましょう。

マウスイベントを取得するにはいくつか方法があるかと思いますが、イベントについて、FlexのLiveDocsに説明が書いてあります。

イベントの使用

今回は、マウスをクリックした時、マウスをボタン上にロールオーバーした時、マウスをボタンからロールアウトした時のイベントを取得します。

まず、マウスをクリックした時のイベントを取得するには、

MouseEvent.CLICK

また、ロールオーバー、ロールアウトには、

MouseEvent.ROLL_OVER //ロールオーバー
MouseEvent.ROLL_OUT //ロールアウト

を使用します。

このマウスイベントを取得するには、イベントリスナーが必要となります。イベントリスナーはイベントが発生したことを監視するaddEventListenerという監視役が必要です。そこで、今回はボタンにイベントリスナーを適用するので、以下のような感じになります。

myButton.addEventListener (MouseEvent.CLICK, clickHandler);

また、発生したイベントに応じて、何らかの処理を実行したいので、addEventListenerの第二引数の名前の関数を以下のように用意します。

private function clickHandler ( event:Event ):void {
//ここに実行したい処理を記述
}

今回の場合は、マウスをクリックした際に、myLabelに「Mouse Click」という文字を表示させたいので、以下のような記述になります。

private function clickHandler ( event:Event ):void
{
myLabel.text = "Mouse Click";
}

さて、これらのコードですが、MXMLファイルのどこにでも記述して良いわけではないので、あるタグで囲ってあげる必要があります。スクリプトの処理を行う場合は、<mx:Script> から始まるタグの中にさらに<![CDATA[の中でスクリプトの処理を行う必要があります。また、]]></mx:Script>で閉じる必要があるのでお忘れなく。

<mx:Script>
<![CDATA[

]]>
</mx:Script>

実際、今回の処理をこのタグに入れると以下のような感じになります。

<mx:Script>
<![CDATA[

public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>

public function createListener():void

なお、上の関数を使用しているで、<mx:ApolloApplication内にcreationComplete="createListener();"を追加しておきましょう。

スクリプトの部分は上記で完了です。さて、スクリプトの処理を実行する元となるボタンなどの設定は、以下の通りです。

<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>

スクリプト部分で、myButton.addEventListenerと記述してあります。この部分のmyButtonは、ボタンコンポーネントのIDを示しているので、<mx:Buttonでid="myButton"という感じでスクリプト内で使用している名前に統一しておきましょう。ラベルコンポーネントも同様です。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="350" height="200"
creationComplete="createListener();"
>

<mx:Script>
<![CDATA[
public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>
<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>
</mx:ApolloApplication>

---

リファレンスサイト

Class MouseEvent

Flex クイックスタート：イベントの処理