機能ごとにコンポーネント化してファイルを分割
先ほど、FlexはMXMLのタグ（コンポーネント）を自由にMXML自身で定義できることを紹介しましたが、これは、タブの各ページや画面の一部分のパネルなど好きな単位で自由にファイルを分割し、後々再利用できる、非常に便利な仕組みです。
今回の家計簿アプリケーションでは、データ入力のために「parts/InputForm.mxml」というMXMLファイルを作っていますが、これを、<parts:InputForm>というタグとして利用できます。メインアプリケーションの「Kakeibo.mxml」から、その部分を抜粋してみます。
<mx:TabNavigator id="tabNavi" width="100%" height="100%"
change="tabNavi_changeHandler(event)">
<s:NavigatorContent label="入出金の入力">
<parts:InputForm id="inputForm"/>
</s:NavigatorContent>
<s:NavigatorContent label="入出金の分類" id="groupContent">
<parts:GroupView id="groupView" inputForm="{inputForm}"/>
</s:NavigatorContent>
...
</mx:TabNavigator>
複数タブページを実現するために、<mx:TabNavigator>コンポーネントを使っています。各タブページの内容は、<s:NavigatorContent>タグの内側に記述することになっていますが、見て分かるとおり、<parts:InputForm>タグが記述されているだけです。
もし、コンポーネントに分割せず、データ入力のためのMXMLを直接記述したとしたら、定義が非常に長くなってしまいます。そのため、タブの順番を入れ替えるなど、後から変更を加える際、面倒な作業が発生してしまいます。
Flash Builderではこのタグの部分を［Shift］＋［クリック]すると、コンポーネントの定義部分に画面が切り替わります。おさえておきたい便利な機能の1つです。
コンポーネントの作成方法
前ページの「MXMLについて」でも紹介したとおり、コンポーネントの作成は驚くほど簡単です。タグの名前として使いたいMXMLファイルを1つ作るだけです。
1つのMXMLファイルは、1つのActionScriptのクラスに変換されます。つまり、MXMLコンポーネント、あるいはUIComponentクラスを継承したActionScriptクラスであれば、MXMLのタグ要素として、自由にMXML内で利用できる仕組みになっているのです。
MXMLファイルを作るだけとは言うものの、ネームスペースの宣言など面倒な部分の作業を省略するために、Flash Builderの「コンポーネント作成ウィザード」機能を使うと楽に作業を進めることができます。メニューから［ファイル］－［新規］－［MXMLコンポーネント］をクリックすると、親切にコンポーネントのひな形を作成してくれます。
コンポーネントの配置方法
アプリケーションに必要な各パーツを適切にコンポーネントとして分割したところで、実際にコンポーネントの配置していきます。
コンポーネントの配置は、基本的にFlash Builderのデザイン機能を利用して必要なコンポーネントをペタペタと貼り付けていけば終わりなのですが、今回のように比較的複雑な画面構成の場合には、直接MXMLのタグ（レイアウトのためのタグ）を書いた方が早い場合もあります。
頻繁に使うのは、<s:HGroup>と<s:VGroup>です。これは、名前のとおりコンポーネントをグループ化するためのタグです。<s:HGroup>を使うと内側に配置したコンポーネントを水平に（横方向に）並べることができ、<s:VGroup>を使うと垂直に（縦方向に）並べることができます。
<s:VGroup x="50" y="50"> <s:VGroup> <s:Button label="ボタン1" /> <s:Button label="ボタン2" /> <s:Button label="ボタン3" /> </s:VGroup> <mx:HRule width="100%"/> <s:HGroup> <s:Button label="ボタン4" /> <s:Button label="ボタン5" /> <s:Button label="ボタン6" /> </s:HGroup> </s:VGroup>
もちろん、タイル配置など細かく配置方法を指定できるほか、Flex 4からはカスタムレイアウトを作成することもできるようになっています。しかし、やはり使用頻度が高く便利なのは、VGroupとHGropタグです。複雑な画面構成であっても、これらのタグを組み合わせることで実現できます。
以上が、Flexで開発を行う際の大まかな作業の流れです。駆け足で説明してきたので、ここでもう一度、MXMLについてまとめておきましょう。
- MXMLファイルの定義が、そのまま独自コンポーネントの定義となる
- コンポーネント名が、そのままMXMLのタグ名となる
- MXMLとActionScript 3の関係は、HTMLとJavaScriptの関係と似ている
- MXMLファイルは最終的にActionScriptのクラスに変換される
- MXMLのルートタグが、クラスのスーパークラスとなる
これらを踏まえ、次のページからはサンプルソースのコードを見ていきます。
