プログラマのためのFlash遊び方
第8回 Flexで本格Webアプリケーションを作ってみよう
前回まではActionScript 3.0を利用したプログラミングを解説してきました。ActionScript 3.0はグラフィカルな表示には強いのですが，機能的なWebアプリケーションを作るのにはあまり向いていません。
Flashでアプリケーションを作る場合は，Flexというフレームワークが便利です。Flexと聞くとお金が必要なイメージがあるかもしれませんが，FlexはFlex 3 SDKに付属する無料のフレームワークです。
Flexフレームワークには便利なコンポーネントが用意されています。また，MXMLと呼ばれるXMLにもとづいたフォーマットでアプリケーションの見た目を記述することができます。今回は，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>タグを記述しています。これは，MXMLで記述する際のお約束です。
<mx:Application>タグの中には<mx:Panel>タグ，さらにその子タグとして，<mx:Label>タグ，<mx:TextInput>タグ，<mx:Button>タグが配置されています。それぞれのタグには，「text="ラベル"」のように，属性の形でパラメータを指定しています。
このように，XMLの形式でコンポーネントの構造を記述します。HTMLに似ていますね。
コンパイルしてみよう
このファイルをFlexTest1.mxmlというファイル名で保存します。文字コードをUTF-8で保存するのを忘れないでください。
コンパイルするには，今までと同じくmxmlcを利用します。
mxmlc FlexTest1.mxml
コンパイルに成功すると，FlexTest1.swfというファイルが生成されます。
「Hello Flex!!」の枠が<mx:Panel>タグで記述したPanelコンポーネントです。Panelコンポーネントの中には，縦に3つ，Labelコンポーネント，TextInputコンポーネント，Buttonコンポーネントが並んでいます。
それぞれのコンポーネントで指定できる属性については，Flex3 リファレンスガイドを参照してください。例えば，Buttonコンポーネントであれば，mx.controlsパッケージのButtonクラスが該当します。パブリックプロパティとイベントに列挙されている名前をそのままMXMLの属性として指定できます。
このように直感的にコンポーネントを配置できるのがMXMLの魅力です。もし，これをActionScriptだけでやろうとすると，次のようになってしまいます。
<?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>
だいぶ冗長ですね。改めて，最初のMXMLと見比べると，MXMLで書くとシンプルになるのがよく分かります。
イベントを登録してみよう
それでは，ボタンが押されたときに，何か処理をするように改造してみましょう。
<?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です。最初の例と見た目は同じですが，ボタンをクリックすると，TextInputの中身が書き換わります。
イベント登録は，<mx:Button>タグのclick属性で行っています。click属性の中には，clickイベントが発生したときの処理を書いています。ここではclickHandler()メソッドを呼んでいます。
<mx:Button label="OK" click="clickHandler()"/>
ActionScriptのコードは，MXMLの<mx:Script>タグで定義しています。CDATAで囲っているのは，スクリプトの中で<や>を利用するためです。
clickHandler()メソッドでは，TextInputオブジェクトの文字列を書き換えています。input1というのは，TextInputに設定したidです。idを設定したコンポーネントは，MXMLによって生成されるクラスのインスタンス変数として参照できるようになります。つまり，input1.textというのは，TextInputオブジェクトの中身の文字列を表すことになります。
最田健一（さいたけんいち）
有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら，いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。
![[改訂第3版] SQLポケットリファレンス](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138350.jpg){kind=small}
