第3回：実践！Flex 2でプログラム作成 (2/3)

TOP＞システム開発＞アプリケーションプログラムを作る

徹底攻略!Free Flex 2 SDK

第３回：実践！Flex 2でプログラム作成
著者：ウノウ酒徳峰章 2006/12/19

前のページ 1 2 3 次のページ

アプリケーションプログラムを作る

それでは、サンプルを調べながら実際に簡単なプログラムを作ってみましょう。ここでは題材として、以下のような和暦を西暦に変換する年号変換プログラムを作ります。

作成した年号変換プログラム

※注1：本サンプルを表示するには、Flash Player 9が必要です。

レイアウト

まずは、必要なコンポーネントを画面に配置します。和暦から西暦に変換するのに必要なコンポーネントは以下の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>

これでレイアウト定義は完成です。

前のページ 1 2 3 次のページ

著者プロフィール
ウノウ株式会社酒徳峰章
ウノウ（株）プログラマ。ソフト企画「くじらはんど」にて、オンラインソフトを多数発表。代表作は「テキスト音楽『サクラ』」や「日本語プログラミング言語『なでしこ』」など。オンラインソフトウェア大賞2001入賞。2004年度IPA未踏ユースでスーパークリエイターに認定。著書に「ゲームプログラミングで学習するActionScript（Flash8/MX2004）」など。

INDEX
第3回：実践！Flex 2でプログラム作成
	はじめに
	アプリケーションプログラムを作る
	プログラムを書く

徹底攻略!Free Flex 2 SDK
第1回	開発環境を変える！Free Flex 2 SDK登場
第2回	実践！Flex 2のインストール
第3回	実践！Flex 2でプログラム作成
第4回	Flex 2導入にあたってのポイント

タイプ

連載

特集

第3回：実践！Flex 2でプログラム作成 (2/3)

新着記事

人気記事トップ10

企画広告も役立つ情報バッチリ！ Sponsored