Flex Component
» ボタン/Button (*)
Flex Component
» ボタン/Button (*)
Flex に標準でついているボタン。
以下のタグを追加します。
<mx:Button label="ラベル名" x="10" y="10" />
クリックした時にメッセージを表示する例
file:HelloButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#FFFFFF">
<!-- ボタンの配置 -->
<mx:Button x="10" y="10" label="挨拶する" click="onClick()"/>
<!-- スクリプトの記述 -->
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// クリックした時に何をするのかを記述
private function onClick():void {
Alert.show("Hello!");
}
]]>
</mx:Script>
</mx:Application>
プロジェクトにアイコン画像(Save.png)をコピーしておいて、次のように記述します。
<mx:Button icon="@Embed('Save.png')" label="保存"/>
ボタンにスキンを適用することにより、ボタンの外見を一新することができます。
<mx:Button x="50" y="42"
upSkin="@Embed('Save.png')"
overSkin="@Embed('SaveOver.png')"
downSkin="@Embed('SaveDown.png')" />例えば、電卓アプリケーションを作る時など、たくさんのボタンを一様に扱いたい場合があります。そんな時は、イベントハンドラを工夫します。
もちろん、ボタンの１つ１つに別々のイベントハンドラを割り当てる方法でも、作ることはできます。しかし、そうすると、ボタンの数だけ処理用の関数を書かねばならず面倒です。
そこで、ボタンを作るときに、イベントハンドラに「onClick(event)」のように event 引数をつけて定義しておき、後は、デザインビュー上で、基本のボタンをコピーして、貼り付けていくことで、大量のボタンを効率よく配置できます。
そして、イベントハンドラでは、引数として得られる event(MouseEvent型のオブジェクト) に入っている、targetなどの値を利用して、それぞれのボタンがどういう動きをするのかを記述します。
file:Calc.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="19" y="10" width="303" height="281" layout="absolute" title="電卓">
<mx:TextInput id="disp_txt" x="10" y="10" width="263"/>
<mx:Button x="10" y="40" label="7" width="42" height="42" click="onClick(event)"/>
<mx:Button x="60" y="40" label="8" width="42" height="42" click="onClick(event)"/>
<mx:Button x="110" y="40" label="9" width="42" height="42" click="onClick(event)"/>
<!-- 省略 -->
<mx:Button x="225" y="40" label="C" width="42" height="42" click="onClick(event)"/>
</mx:Panel>
<mx:Script source="Calc.as"/>
</mx:Application>file:Calc.as
// 抜粋したもの
// ボタンをクリックした時
private function onClick(event:MouseEvent):void {
var btn:Button = event.target as Button; //-------------(*1)
var str:String = btn.label;
// クリアボタンなら初期化
if (str == "C") {
clear();
return;
}
// 数字ボタンなら、ディスプレイに追加
if (str.match(/[0-9\.]/)) {
addNum(str);
return;
}
// 演算子ボタンが押されたら..
eval(str);
}(*1)イベントハンドラの引数 (MouseEvent 型の)event には、ボタンをクリックしたコンポーネントを表す target という値が設定されています。
