（2）デザイン画面でコンポーネントを配置する
では、マウス操作で単位変換ツールをデザインしていきましょう。画面左側のパッケージエクスプローラから、View1.mxml（長さのタブの画面を表す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を配置した時点では、灰色で塗りつぶされた矩形が配置されるだけです。
（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の初期値にしておきます。
では、単位変換のプログラムを記述します。まず、デザイン画面で「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()」とだけ記述してみましょう。
