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

TOP＞システム開発＞プログラムを書く

徹底攻略!Free Flex 2 SDK

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

プログラムを書く

次にMXMLファイルにプログラムを記述します。プログラムは「<mx:Script>」から「</mx:Script>」の間に記述します。

そこで以下のように、リスト「nengou_list」で選ばれている値のデータと入力された年をエディタ「wa_txt」から参照して西暦を計算し、ラベル「result_txt」に表示するという処理を記述します。


		<mx:Script><![CDATA[

		private function getWareki():void

		{

		    var year:int = nengou_list.selectedItem.data;

		    year += parseInt(wa_txt.text) - 1;

		    result_txt.text = "西暦" + year.toString() + "年";

		}

		]]></mx:Script>

最後に「List」と「TextInput」に「change="getWareki()"」というイベントを追加すればプログラムは完成です。


		<?xml version="1.0"?>

		<!-- Simple example to demonstrate the List Control -->

		<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">


		    <mx:Script><![CDATA[

		 private function getWareki():void

		    {

		        var year:int = nengou_list.selectedItem.data;

		        year += parseInt(wa_txt.text) - 1;

		        result_txt.text = "西暦" + year.toString() + "年";

		    }

		    ]]></mx:Script>


		    <!-- 年号のデータ -->

		    <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}"

		            change="getWareki()"/>

		        <mx:TextInput id="wa_txt" change="getWareki()"/>

		        <mx:Label text="西暦xxxx年" id="result_txt"/>

		    </mx:Panel>

		</mx:Application>

このプログラムを「wareki.mxml」という名前で保存します。「C:\test」に保存した場合コマンドプロンプトを起動して以下のコマンドを実行すると、プログラムがコンパイルされFlashファイル「wareki.swf」が生成されます。


		> cd C:\test

		> mxmlc wareki.mxml

図3：和暦変換プログラムの完成

まとめ

   ここで示した例は簡単なプログラムですが、実際のアプリケーション開発の感覚が体験できたのではないでしょうか。

   このような簡単なプログラムは、HTMLでレイアウトしてJavaScriptで動作を定義する場合と同じような感覚で作成できると思います。またActionScriptの文法は、JavaScriptの標準規格であるECMAScriptに準拠しているため、JavaScriptを使った経験があればそれほど苦労することなくはじめられるでしょう。

   今回のような小さなプログラムでは、JavaScriptで書いた方が早いと感じるかもしれませんが、本当にFlex 2 SDKの優れた機能が活きてくるのは、動きのあるプログラムや複雑なレイアウトのアプリケーションです。最初は小さなプログラムからはじめ、慣れてきたら様々なテクニックを駆使したプログラムを作ってみると、よりFlex2 SDKの持つを表現力や柔軟性を実感できるでしょう。

   次回は、Flex 2 SDKの活用方法や展望について説明します。

   なお、今回作成した和暦変換プログラムのソースコードは以下からダウンロードすることができます。プログラム作成の参考にしてみてください。

和暦変換プログラム（zipファイル 172KB）

前のページ 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でプログラム作成 (3/3)

新着記事

人気記事トップ10

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