Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

サンプルで理解するFlexアプリケーションの作り方~Java開発者のためのFlex 4入門

1から分かるJava開発者のためのFlex 4入門(後編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/08/24 14:00

ダウンロード サンプルソース (1.3 MB)

目次

機能ごとにコンポーネント化してファイルを分割

 先ほど、FlexはMXMLのタグ(コンポーネント)を自由にMXML自身で定義できることを紹介しましたが、これは、タブの各ページや画面の一部分のパネルなど好きな単位で自由にファイルを分割し、後々再利用できる、非常に便利な仕組みです。

 今回の家計簿アプリケーションでは、データ入力のために「parts/InputForm.mxml」というMXMLファイルを作っていますが、これを、<parts:InputForm>というタグとして利用できます。メインアプリケーションの「Kakeibo.mxml」から、その部分を抜粋してみます。

Kakeibo.mxml内のInputForm利用部分
<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を直接記述したとしたら、定義が非常に長くなってしまいます。そのため、タブの順番を入れ替えるなど、後から変更を加える際、面倒な作業が発生してしまいます。

※注2

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>を使うと垂直に(縦方向に)並べることができます。

VGroup/HGroupタグの利用例
<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>
上記のソースで垂直(VGroup)/水平(HGroup)にボタンがそれぞれ3つずつ並ぶ
上記のソースで垂直(VGroup)/水平(HGroup)にボタンがそれぞれ3つずつ並ぶ

 もちろん、タイル配置など細かく配置方法を指定できるほか、Flex 4からはカスタムレイアウトを作成することもできるようになっています。しかし、やはり使用頻度が高く便利なのは、VGroupHGropタグです。複雑な画面構成であっても、これらのタグを組み合わせることで実現できます。

 以上が、Flexで開発を行う際の大まかな作業の流れです。駆け足で説明してきたので、ここでもう一度、MXMLについてまとめておきましょう。

MXMLとコンポーネントの関係
  • MXMLファイルの定義が、そのまま独自コンポーネントの定義となる
  • コンポーネント名が、そのままMXMLのタグ名となる
MXMLとActionScriptの関係
  • MXMLとActionScript 3の関係は、HTMLとJavaScriptの関係と似ている
  • MXMLファイルは最終的にActionScriptのクラスに変換される
  • MXMLのルートタグが、クラスのスーパークラスとなる

 これらを踏まえ、次のページからはサンプルソースのコードを見ていきます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • クジラ飛行机(クジラヒコウヅクエ)

    ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

バックナンバー

連載:1から分かるJava開発者のためのFlex 4入門
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5