Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Flash Builder 4.5でAndroidアプリ開発
~概要から作成手順の基本まで最速解説!

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

ダウンロード サンプルソース (18.7 KB)

目次

(2)デザイン画面でコンポーネントを配置する

 では、マウス操作で単位変換ツールをデザインしていきましょう。画面左側のパッケージエクスプローラから、View1.mxml(長さのタブの画面を表すMXMLファイル)をダブルクリックして編集を行います。画面中央の上部にある[ソース|デザイン]のボタンから、[デザイン]のボタンをクリックします。

「View1.mxml」をダブルクリック後、デザインモードに切り替え
「View1.mxml」をダブルクリック後、デザインモードに切り替え

 画面に、TextInputとListの組み合わせを2セット作ります。画面左下の「コンポーネントパネル」のコントロールの中から、「TextInput」と「List」を探して、マウスでドラッグ&ドロップし、次の画面のように配置します。

コンポーネントを配置
コンポーネントを配置

 配置したら、画面右側の「プロパティパネル」でIDを設定します。ここでは以下のようなIDを付けています。

コンポーネント 入力したID 用途
TextInput text1 ユーザーに値を入力してもらうもの
List list1 基本となる単位を選択するためのもの
TextInput text2 変換後の値を表示するためのもの
List list2 変換先の単位を選択するためのもの

 FlexのListコンポーネントは、アイテムを水平方向に配置したり、タイル状に並べたりと、色々なスタイルに切り替えることができます。これは「レイアウトプロパティ」から設定できます。例えば、アイテムを垂直方向に配置したい場合は「spark.layouts.VerticalLayout」を選択します。

 今回作成するアプリケーションは、複数の中から1つの単位を選択するものなので、できるだけスペースを有効に使えように、タイル状にアイテムを並べることにします。そこで、Listのレイアウトプロパティを「spark.layouts.TileLayout」に設定します。

Listのレイアウトを設定(※注意)
Listのレイアウトを設定(※注意)
※注意

 上記の画面では、分かりやすく単位の一覧が既に表示されていますが、Listを配置した時点では、灰色で塗りつぶされた矩形が配置されるだけです。

(3)コンポーネントの振る舞いをコードで記述する

 ここから、配置したコンポーネントの振る舞いをプログラミングしていきます。プログラムを書く前に、リストの中に表示する単位データをMXMLで定義しておきましょう。画面中央の上部にある[ソース]のボタンを押して、ソース編集画面を表示すると、マウス操作で配置したコンポーネントの配置情報がMXMLで表示されます。

ソース編集画面に切り替え
ソース編集画面に切り替え

 ソース編集画面が出たら、単位データを記述します。MXMLでは、単位データの情報など『画面に見えない情報は、<fx:Declarations>タグの内側に書く』というルールがあります。そのため、<fx:Declarations>タグの内側に次のような単位情報をXMLで記述します。ここでは、単位情報のデータを<s:ArrayCollection>と定義し、このデータに「unit_length」というIDを付与しました。

<fx:Declarations>
	<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	<s:ArrayCollection id="unit_length">
		<fx:Object label="メートル(m)" value="1" />
		<fx:Object label="キロメートル(km)" value="1000" />
		<fx:Object label="センチメートル(cm)" value="0.01" />
		<fx:Object label="ミリメートル(mm)" value="1000" />
		<fx:Object label="インチ(in)" value="0.0254" />
		<fx:Object label="フィート(ft)" value="0.3048" />
		<fx:Object label="マイル" value="1609.344" />
		<fx:Object label="尺" value="0.30303" />
	</s:ArrayCollection>
</fx:Declarations>
単位データをエディタに記入
単位データをエディタに記入

 MXMLで単位データを定義したら、Listコンポーネントでこれを表示するようにします。デザイン画面に戻り、プロパティパネルの上方にある[データプロバイダー]という項目に「{unit_length}」と入力します。これで、リストに単位の一覧が表示されるようになります。[データプロバイダー]のの下にある[選択したインデックス]は「0」(メートル)と入力し、Listの初期値にしておきます。

[データプロバイダー]に「{unit_length}」、[選択したインデックス]に「0」を入力
[データプロバイダー]に「{unit_length}」、[選択したインデックス]に「0」を入力

 では、単位変換のプログラムを記述します。まず、デザイン画面で「TextInputのtext1」(画面上の入力ボックス)を選択します。選択した状態で、プロパティパネルの[変更時]という項目に注目してください。この項目の右側に「稲妻の形をしたアイコン」があるので、クリックします。すると、「イベントハンドラを生成」が表示されるので、さらにクリックします。

 ソース編集画面に切り替わり「text1_changeHandler()」メソッドが、自動的に定義されます。そこで、このメソッドを次のように記述します。

protected function text1_changeHandler(event:TextOperationEvent):void
{
	calcUnit();
}

protected function calcUnit():void {
	var unit1:Number = list1.selectedItem.value;
	var unit2:Number = list2.selectedItem.value;
	var v:Number = (parseFloat(text1.text) * unit1) / unit2;
	text2.text = v.toString();
}

 次に、Listのアイテムを選択した時の処理を記述します。こちらも先ほどと同様、デザイン画面の[変更時]の項目からイベントハンドラを作成できます。しかし今回は、イベントハンドラを作らなくても、直接ActionScriptのコードを記述して処理を実行できるということを示すために、「calcUnit()」とだけ記述してみましょう。

変更時のイベントとして、先ほど定義したメソッド「calcUnit()」を記述
変更時のイベントとして、先ほど定義したメソッド「calcUnit()」を記述

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

著者プロフィール

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

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

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5