Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

データ視覚化のための強力なコンポーネント

 データ視覚化のために、今回は<mx:AdvancedDataGrid><mx:PieChart>タグを利用しています。

分類ごとの集計表示画面
分類ごとの集計表示画面
パイチャートによる表示画面
パイチャートによる表示画面

 <mx:AdvancedDataGrid>を使うと、分類ごとにデータをフォルダ分けして表示させることができます。データをツリー状に並び替えておく必要はありますが、Flexの他のコンポーネントとほぼ同様のコードで表示させることができます。

<mx:AdvancedDataGrid id="grid" width="100%" height="100%">
	<mx:dataProvider>
		<mx:HierarchicalData source="{hieData}" />
	</mx:dataProvider>
	<mx:columns>
		<mx:AdvancedDataGridColumn headerText="分類" dataField="group" />
		<mx:AdvancedDataGridColumn headerText="事柄" dataField="kotogara" />
		....
	</mx:columns>
</mx:AdvancedDataGrid>

 円グラフ(パイチャート)を表示する<mx:PieChart>タグいたっては、データとキーにするフィールドを指定するだけで簡単に利用できます。

<mx:PieChart id="chart" width="100%" height="100%"
			 dataProvider="{inputForm.masterData}">
	<mx:series>
		<mx:PieSeries field="syukkin" 
					  nameField="group" labelField="group" 
					  labelPosition="callout" />
	</mx:series>
</mx:PieChart>

 データソースを指定するdataProviderに、入力フォームで入力されたデータを記録したArrayCollectionオブジェクトを指定し、どの値をキーにするのかをfieldプロパティに、表示するラベルをlabelFieldに指定しています。

データをExcelにエクスポート

 最後に、Excelへのデータエクスポート方法について紹介します。今回のサンプルアプリケーションでは、家計簿の画面下にある[エクスポート]ボタンを押すとCSVファイルが書き出され、拡張子“.csv”と関連付けされているアプリケーションが起動する仕様になっています。Excelをインストールしていれば、CSVファイルのデフォルトアプリケーションとしてExcelが起動し、OpenOffice.orgなど他のアプリケーションを利用しているのであれば、該当するアプリケーションが起動します。

[エクスポート]ボタンをクリックするとCSVファイルが書きだされ、Excelが起動する
[エクスポート]ボタンをクリックするとCSVファイルが書きだされ、Excelが起動する

 次のコードは、[エクスポート]ボタンをクリックしたときに実行されるコードの抜粋です。変数の定義方法など、Javaと異なる部分もありますが、Fileクラスを利用してパスを表現し、FileStreamクラスで文字列を書き込むところなど、Javaと似ているのではないでしょうか。

// CSVデータの作成
var csv:String = "";
....
// CSVをSJISでファイルに保存
var f:File = File.documentsDirectory.resolvePath("export.csv");
var stream:FileStream = new FileStream();
try {
	stream.open(f, FileMode.WRITE);
	stream.writeMultiByte(csv, "SJIS");
} catch (e:IOError) {
	Alert.show("保存に失敗"); return;
} finally {
	stream.close();
}
// 関連づけで実行
f.openWithDefaultApplication();

Java開発者ならすぐに慣れることができるFlex

 今回は、家計簿機能をもつAIRアプリケーションを作る上で、ポイントとなる部分をピックアップしながらFlexの機能を紹介しました。

 ご覧いただいたように、業務系アプリケーションによくある複雑な配置のアプリケーションも、部分ごとにコンポーネントに分割していくことで、すっきりと組み立てることができます。また、AdvancedDataGridやPieChartなど、データ視覚化のためのコンポーネントが豊富に用意されているので、短時間で業務で役立つ機能を組み込むことができます。そして、AIRの機能を使えば、Webアプリケーションでは難しいローカルファイルの扱いや、Excelのようなネイティブアプリケーションの起動などが実現できます。

 もちろん、Javaを使うことでも似たことは実現できますが、Flexフレームワークを使うことで、より手軽に高度なアプリケーションを構築できます。特に、今回紹介したようなデータの視覚化は、JSPでは実現が面倒な部分ではないでしょうか。また、Flexは、あらかじめ用意されたコンポーネントをそのまま使うだけでなく、その拡張性の高さを活かして独自コンポーネントを作ることも容易です。

 残念ながら今回紹介できませんでしたが、Web APIにアクセスするコードを自動生成する機能など、Webサーバー側との連携も強力です。さらに、Adobeのデザインツール(Illustrator/Photoshop)で作ったデータをスムーズにコンポーネント化できるスキン機能を利用すれば、見た目にも優れたアプリケーションを作成できます。

 このように、Flexには魅力的な仕組みがたくさん用意されています。JavaとActionScript 3は近く、Java開発者ならすぐに慣れることができるので、Flexを業務に活用してみるのはどうでしょうか。本稿がその助けになれば幸いです(前編はコチラ)。

「FlexではじめるRIA開発」特集、絶賛公開中!


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

著者プロフィール

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

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

バックナンバー

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