まずは、必要なコンポーネントを画面に配置します。和暦から西暦に変換するのに必要なコンポーネントは以下の3つのコンポーネントです。
- 和暦の年号（明治・大正・昭和・平成）を選ぶリストボックス
- 年を指定するテキストボックス
- 結果を表示するテキストボックス
表1：年号変換プログラムに必要なコンポーネント
リストボックスを使うのに参考になるのは「samples_ja\explorer\controls\SimpleList.mxml」です。このファイルを参考にして「List」「TextInput」「Labe」の3つのコンポーネントを配置します。
| 説明 |
名前 |
| 年号選択用リスト |
nengou_list |
| 年入力用エディタ |
wa_txt |
| 結果表示用エディタ |
result_txt |
表2：コンポーネントと名前
配置はいたって簡単です。HTMLと同じように配置するコンポーネントをあらわすタグを並べるだけです。例えば「List」コンポーネントを配置するには、基本的に<mx:List>というタグを記述すればよいのです。
サンプルを見ると、Panelコンポーネントを作りその中にリストやボタンのコンポーネントを配置するパターンが多くあります。ここではその方法に倣って、Panelコンポーネントを作りその中に「List」「TextInput」「Label」を配置してみましょう。
<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- パネルの中にコンポーネントを配置 -->
<mx:Panel title="和暦→西暦変換" height="300" width="300"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">
<mx:List id="nengou_list" width="100%" />
<mx:TextInput id="wa_txt"/>
<mx:Label text="西暦xxxx年" id="result_txt"/>
</mx:Panel>
</mx:Application>
次にサンプルファイルの「SimpleList.mxml」を参考にして「List」に年号を表示させてみましょう。タグ<mx:List>の属性「dataProvider」にXMLの要素を指定することで、リストの内容を決定します。
ここでは、<mx:Model>で定義したXMLデータ（年号とその元年の西暦を記述したもの）にID「nengou」をつけ、ListのdataProviderにIDの値を指定します。
<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- 年号のデータ -->
<mx:Model id="nengou">
<items>
<item label="明治" data="1868"/>
<item label="大正" data="1912"/>
<item label="昭和" data="1926"/>
<item label="平成" data="1989"/>
</items>
</mx:Model>
<!-- パネルの中にコンポーネントを配置 -->
<mx:Panel title="和暦→西暦変換" height="300" width="300"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">
<mx:List id="nengou_list" width="100%"
dataProvider="{nengou.item}"/>
<mx:TextInput id="wa_txt"/>
<mx:Label text="西暦xxxx年" id="result_txt"/>
</mx:Panel>
</mx:Application>
これでレイアウト定義は完成です。
|
