前回まではActionScript 3.
Flashでアプリケーションを作る場合は、
Flexフレームワークには便利なコンポーネントが用意されています。また、
MXMLでコンポーネントを配置
早速サンプルを見てみましょう。MXMLでアプリケーションの見た目を記述してみます。
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Hello Flex!!"
paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10">
<mx:Label text="ラベル"/>
<mx:TextInput text="text"/>
<mx:Button label="OK"/>
</mx:Panel>
</mx:Application>まず、
<mx:Application>タグの中には<mx:Panel>タグ、
このように、
コンパイルしてみよう
このファイルをFlexTest1.
コンパイルするには、
mxmlc FlexTest1.mxml
コンパイルに成功すると、
「Hello Flex!!」
それぞれのコンポーネントで指定できる属性については、
このように直感的にコンポーネントを配置できるのがMXMLの魅力です。もし、
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.controls.*;
private function init():void {
var panel:Panel = new Panel();
panel.title = "Hello Flex!!";
panel.setStyle("paddingTop", 10);
panel.setStyle("paddingLeft", 10);
panel.setStyle("paddingBottom", 10);
panel.setStyle("paddingRight", 10);
addChild(panel);
var label1:Label = new Label();
label1.text = "ラベル";
panel.addChild(label1);
var text1:TextInput = new TextInput();
text1.text = "text";
panel.addChild(text1);
var button1:Button = new Button();
button1.label = "OK";
panel.addChild(button1);
}
]]>
</mx:Script>
</mx:Application>だいぶ冗長ですね。改めて、
イベントを登録してみよう
それでは、
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function clickHandler():void{
input1.text = "clicked!!";
}
]]>
</mx:Script>
<mx:Panel title="Hello Flex!!"
paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10">
<mx:Label text="ラベル"/>
<mx:TextInput id="input1" text="text"/>
<mx:Button label="OK" click="clickHandler()"/>
</mx:Panel>
</mx:Application>完成したのがこのようなFlashです。最初の例と見た目は同じですが、
イベント登録は、
<mx:Button label="OK" click="clickHandler()"/>ActionScriptのコードは、
clickHandler()メソッドでは、
dataProviderを使ってデータを表示する
Flexの数あるコンポーネントの中でも強力なのが、
Treeコンポーネントを使う
まずは、
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void {
var xml:XML = <node label="ルート">
<node label="1">
<node label="1-1"/>
<node label="1-2"/>
</node>
<node label="2"/>
</node>;
tree1.dataProvider = xml;
}
]]>
</mx:Script>
<mx:Tree id="tree1" width="200" height="100"
labelField="@label"/>
</mx:Application><mx:Application>タグでappCompleteイベントが発生したときにinit()メソッドが呼ばれるようにイベント登録しています。appCompleteはアプリケーションの初期化が完了したときに1度だけ発生するイベントです。
init()メソッドでは、
次に、
<mx:Tree>タグでは、
XMLをサーバからロードする
先ほどはXMLをソースコードに埋め込みましたが、
データをロードするには、
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
private function init():void {
var req:URLRequest = new URLRequest("test.xml");
var loader:URLLoader = new URLLoader();
loader.load(req);
loader.addEventListener("complete", function(event:Event):void {
tree1.dataProvider = XML(loader.data);
});
}XMLファイルは次のような内容です。
<node label="ルート">
<node label="1">
<node label="1-1"/>
<node label="1-2"/>
</node>
<node label="2"/>
</node>Flash同じ場所にtest.
これで、
CGIを使ってtest.
DataGridコンポーネントを使う
次は表形式のデータを表示するDataGridコンポーネントです。
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void {
var xml:XML = <data>
<item name="名前1" value="値1"/>
<item name="名前2" value="値2"/>
<item name="名前3" value="値3"/>
</data>;
grid1.dataProvider = xml.item;
}
]]>
</mx:Script>
<mx:DataGrid id="grid1" width="200" height="100">
<mx:columns>
<mx:DataGridColumn dataField="@name" headerText="名前"/>
<mx:DataGridColumn dataField="@value" headerText="値"/>
</mx:columns>
</mx:DataGrid>
</mx:Application><mx:DataGrid>タグの子タグとして、
先ほどと同じように、
この結果、
行のヘッダ部分をクリックするとソートされますし、
このように簡単に見栄えよくデータを表示できるところがFlexのコンポーネントの大きな魅力です。
自作コンポーネントを作る
最後に自作コンポーネントを作る方法を簡単にご紹介しましょう。前回作った
まずは完成形のFlashをご覧ください。次のようになります。
フォントサイズを動的に変えられるようになりました。前回よりもアプリケーションっぽくなりましたね。
ソースコードは次の3つのファイルから成り立っています。
ビルドするには、
mxmlc ComponentTest.mxml
LogoGeneratorコンポーネントの埋め込み
それでは、
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="*"> <!-- (1) -->
<mx:Panel width="100%" height="100%"
title="Logo Generator (Flex version)"
:
:
<mx:Canvas width="100%" height="100%"
borderColor="0xcccccc" borderStyle="solid">
<comp:LogoGenerator id="logo"/> <!-- (2) -->
</mx:Canvas>
</mx:Panel>
</mx:Application>
<mx:Application>タグに
（2）
TextInputコンポーネントとHSliderコンポーネントでは、
<mx:TextInput id="input1" text="Logo Generator"
:
change="logo.text = input1.text"/> <mx:HSlider id="slider"
:
change="logo.fontSize = slider.value"/>全てのコンポーネントはUIComponentクラスを継承する
次に、
前回作成したLogoGeneratorクラスはSpriteを継承していましたが、
import mx.core.UIComponent;
// LogoGenerator クラス
public class LogoGenerator extends UIComponent {プロパティの定義
コンポーネントらしくするために、
textプロパティは次のように定義しています。
// text プロパティの実体
private var _text:String; // (1)
// text プロパティの getter
public function get text():String { // (2)
return _text;
}
// text プロパティの setter
public function set text(value:String):void { // (3)
_text = value;
update();
}
プロパティは、
getterはtextプロパティを取得するときに呼ばれるメソッドです。functionのあとに、
setterはtextプロパティの値に代入されるときに呼ばれるメソッドです。functionのあとに
update()メソッドの修正
update()メソッドはtextプロパティの値を表示するように、
また、
Flexフレームワークはサイズが変わったという通知を受けると、
protected override function measure():void {
measuredWidth = badge.x + badge.width;
measuredHeight = reflection.y + reflection.height;
}measuredWidthおよびmeasuredHeightプロパティにサイズを設定することで、
まとめ
だいぶ駆け足でしたが、
Flexはコンポーネントも豊富で奥も深いので、
次回は最終回です。今、