前回まではActionScript 3.0を利用したプログラミングを解説してきました。ActionScript 3.0はグラフィカルな表示には強いのですが、機能的なWebアプリケーションを作るのにはあまり向いていません。
Flashでアプリケーションを作る場合は、Flexというフレームワークが便利です。Flexと聞くとお金が必要なイメージがあるかもしれませんが、FlexはFlex 3 SDKに付属する無料のフレームワークです。
Flexフレームワークには便利なコンポーネントが用意されています。また、MXMLと呼ばれるXMLにもとづいたフォーマットでアプリケーションの見た目を記述することができます。今回は、Flexフレームワークの使い方を簡単にご紹介していきます。
MXMLでコンポーネントを配置
早速サンプルを見てみましょう。MXMLでアプリケーションの見た目を記述してみます。
まず、アプリケーションのルートタグとして<mx:Application>タグを記述しています。これは、MXMLで記述する際のお約束です。
<mx:Application>タグの中には<mx:Panel>タグ、さらにその子タグとして、<mx:Label>タグ、<mx:TextInput>タグ、<mx:Button>タグが配置されています。それぞれのタグには、「text="ラベル"」のように、属性の形でパラメータを指定しています。
このように、XMLの形式でコンポーネントの構造を記述します。HTMLに似ていますね。
コンパイルしてみよう
このファイルをFlexTest1.mxmlというファイル名で保存します。文字コードをUTF-8で保存するのを忘れないでください。
コンパイルするには、今までと同じくmxmlcを利用します。
コンパイルに成功すると、FlexTest1.swfというファイルが生成されます。
「Hello Flex!!」の枠が<mx:Panel>タグで記述したPanelコンポーネントです。Panelコンポーネントの中には、縦に3つ、Labelコンポーネント、TextInputコンポーネント、Buttonコンポーネントが並んでいます。
それぞれのコンポーネントで指定できる属性については、Flex3 リファレンスガイドを参照してください。例えば、Buttonコンポーネントであれば、mx.controlsパッケージのButtonクラスが該当します。パブリックプロパティとイベントに列挙されている名前をそのままMXMLの属性として指定できます。
このように直感的にコンポーネントを配置できるのがMXMLの魅力です。もし、これをActionScriptだけでやろうとすると、次のようになってしまいます。
だいぶ冗長ですね。改めて、最初のMXMLと見比べると、MXMLで書くとシンプルになるのがよく分かります。
イベントを登録してみよう
それでは、ボタンが押されたときに、何か処理をするように改造してみましょう。
完成したのがこのようなFlashです。最初の例と見た目は同じですが、ボタンをクリックすると、TextInputの中身が書き換わります。
イベント登録は、<mx:Button>タグのclick属性で行っています。click属性の中には、clickイベントが発生したときの処理を書いています。ここではclickHandler()メソッドを呼んでいます。
ActionScriptのコードは、MXMLの<mx:Script>タグで定義しています。CDATAで囲っているのは、スクリプトの中で<や>を利用するためです。
clickHandler()メソッドでは、TextInputオブジェクトの文字列を書き換えています。input1というのは、TextInputに設定したidです。idを設定したコンポーネントは、MXMLによって生成されるクラスのインスタンス変数として参照できるようになります。つまり、input1.textというのは、TextInputオブジェクトの中身の文字列を表すことになります。
dataProviderを使ってデータを表示する
Flexの数あるコンポーネントの中でも強力なのが、TreeコンポーネントやDataGridコンポーネントです。これらのコンポーネントは、dataProviderというプロパティにXMLやオブジェクトを渡すだけで中身を表示するという、面白い特徴を持っています。
Treeコンポーネントを使う
まずは、Treeコンポーネントを使ってみましょう。Treeコンポーネントは階層構造を表示するためのコンポーネントです。
<mx:Application>タグでappCompleteイベントが発生したときにinit()メソッドが呼ばれるようにイベント登録しています。appCompleteはアプリケーションの初期化が完了したときに1度だけ発生するイベントです。
init()メソッドでは、xmlという変数にXMLを格納しています。ActionScript 3.0では、このようにソースコードの中にXMLを記述できます(ECMAScriptでXMLを扱うためのE4Xという仕様で定義されている機能です)。
次に、TreeコンポーネントのdataProviderプロパティにxmlを設定しています。結果として、XMLの構造と同じツリー構造ができあがります。
<mx:Tree>タグでは、labelFieldプロパティが@labelに設定されているため、XMLのlabel属性の値がツリーに表示されています(@labelの@はE4Xで属性のことを表します)。
XMLをサーバからロードする
先ほどはXMLをソースコードに埋め込みましたが、サーバから動的にロードするようにしてみましょう。
データをロードするには、ActionScript 3.0のURLLoaderクラスを利用します。先ほどのソースコードの、<mx:Script>タグの中を次のように書き換えました。
XMLファイルは次のような内容です。
Flash同じ場所にtest.xmlとして保存します。文字コードをUTF-8にするのを忘れないでください。
これで、サーバのXMLを動的に読み込んで表示するようになりました。試しに、XMLを書き換えてFlashを再度表示してみると、変更後のXMLに応じた表示に変わっていると思います。
CGIを使ってtest.xmlの表示を切り替えるようにすれば、すぐにでも動的なコンテンツが作れそうですね。
DataGridコンポーネントを使う
次は表形式のデータを表示するDataGridコンポーネントです。
<mx:DataGrid>タグの子タグとして、列の設定を記述しています。ここでは、「名前」と「値」の2つの列を表示します。dataField属性はそれぞれ、@nameと@valueに設定しています。そのため、XMLのname属性とvalue属性がそれぞれの列に表示されます。
先ほどと同じように、init()メソッドでXMLをDataGridオブジェクトのdataProviderプロパティに設定しています。xml.itemというのは、XMLの子ノードのうち、itemノードの一覧を表すE4Xの表現です。
この結果、次のような表示になります。
行のヘッダ部分をクリックするとソートされますし、ヘッダ部分をドラッグして列を並び替えることもできます。とても高機能ですね。
このように簡単に見栄えよくデータを表示できるところがFlexのコンポーネントの大きな魅力です。
自作コンポーネントを作る
最後に自作コンポーネントを作る方法を簡単にご紹介しましょう。前回作った「ロゴジェネレータ」をFlexのコンポーネントにしてみましょう。
まずは完成形のFlashをご覧ください。次のようになります。
フォントサイズを動的に変えられるようになりました。前回よりもアプリケーションっぽくなりましたね。
ソースコードは次の3つのファイルから成り立っています。
ビルドするには、3つのファイルを同じフォルダにダウンロードして、ComponentTest.mxmlをコンパイルしてください。
LogoGeneratorコンポーネントの埋め込み
それでは、MXMLから見ていきましょう。今までのものより複雑になっているので、LogoGeneratorコンポーネントを利用しているところに注目します。
<mx:Application>タグに「xmlns:comp="*"」という属性が追加されています(1)。これは、トップレベルのパッケージ空間のコンポーネントをcompという名前空間で利用することを意味します。
(2)では先ほど定義したcomp名前空間を利用して、LogoGeneratorコンポーネントを埋め込んでいます。
TextInputコンポーネントとHSliderコンポーネントでは、値が変更された際に、LogoGeneratorコンポーネントのプロパティを更新しています。
全てのコンポーネントはUIComponentクラスを継承する
次に、LogoGeneratorクラスをFlexのコンポーネントにしていきます。
前回作成したLogoGeneratorクラスはSpriteを継承していましたが、このままではエラーになってしまいます。Flexのコンポーネントは、全てUIComponentクラスを継承する必要があります。LogoGeneratorクラスの宣言を次のように書き換えます。
プロパティの定義
コンポーネントらしくするために、表示する文字列を表すtextプロパティと、フォントサイズを表すfontSizeプロパティを実装します。
textプロパティは次のように定義しています。
プロパティは、実体を表すインスタンス変数(1)とgetter(2)、setter(3)から成り立っています。
getterはtextプロパティを取得するときに呼ばれるメソッドです。functionのあとに、「get」というキーワードをつけて宣言します。ここではgetterは_textの値をそのまま返すように定義しています。
setterはtextプロパティの値に代入されるときに呼ばれるメソッドです。functionのあとに「set」をつけて宣言します。ここでは、代入された値を_textに上書きしたあと、update()メソッドを呼び出して表示を更新しています。
update()メソッドの修正
update()メソッドはtextプロパティの値を表示するように、fontSizeプロパティの値に応じて文字の大きさを変えるように修正しています。
また、update()メソッドの最後でinvalidateSize()メソッドを呼び出しているところに注目です。invalidateSize()は、コンポーネントのサイズが変わったことをFlexフレームワークに通知するためのメソッドです。
Flexフレームワークはサイズが変わったという通知を受けると、コンポーネントのmeasure()メソッドを呼び出します。measure()はUIComponentから継承するメソッドです。デフォルトでは何もしないメソッドなので、コンポーネントのサイズを適切に設定できるようoverrideキーワードをつけて再定義します。
measuredWidthおよびmeasuredHeightプロパティにサイズを設定することで、正しくコンポーネントのサイズがフレームワークに通知されます。その結果として、フォントサイズを変更すると、適切にスクロールバーが表示されるようになります。
まとめ
だいぶ駆け足でしたが、Flex 3フレームワークの特徴的な機能を紹介しました。
Flexはコンポーネントも豊富で奥も深いので、詳しく学習されたい方は、Adobe-Flex:Flexドキュメンテーションの「Flex 3開発ガイド」や「Adobe Flex 3コンポーネントの作成と拡張」などを参考にしてみるとよいでしょう。
次回は最終回です。今、注目のAIRをご紹介します。