Flex Tips(2) - シンプルなアプリケーションを開発する

連載2回目の今回はFlexで画面に表示したラベルをスクロールさせるシンプルなアプリケーションを開発してみます。本稿を通して、Flexのアプリケーションを開発する感覚をつかんでもらえればと思います。

さて、まずは開発するアプリケーションを実際に見てください。

「Hello!Flex」というテキストを左から右にスクロールさせています。では順に開発手順を見ていきます。まず、「Flex Builder」を起動し「ファイルメニュー → 新規 → Flex プロジェクト」の順番にクリックし、新規プロジェクト作成用のダイアログを開きます。

「新規プロジェクト画面1」

データアクセスに関しては今回は関係ありませんが、デフォルトの「ベーシック」を選択しておきます。

「新規プロジェクト画面2」

プロジェクト名には「HelloFlex」、フォルダには作成するアプリケーションの保存先フォルダを入力し、「終了」ボタンをクリックします。すると以下のように画面が表示されます。

①のナビゲーターペイン上で「HelloFlex.mxml」をクリックすると②のエディターペーンにアプリケーションのデザインが表示されます。ペーンをソースに切り替えることにより、mxmlのコードを直接編集することもできます。

外側の四角はアプリケーションの描画領域を示していますので四角の端をつかんでサイズを小さくします。そして③のコンポーネントペーンから四角の中に「Label」コントロールをドラッグ&ドロップします。配置したラベル上をクリックすると、④のプロパティペーンにLabelのプロパティが表示されます。プロパティペーンでテキストやサイズを指定し、デザインを調整します。この時点でmxmlのソースを見てみると以下のようになっています。

「HelloFlex.mxml」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="360" height="45">
<mx:Label id="hello" x="10" y="10" text="Hello!Flex" fontSize="20" width="113" height="33"/>
</mx:Application>

「mx:Application」は外側の四角、「mx:Label」はラベルのタグです。このようにFlexはHTMLを編集してWebの画面をデザインするのと同じ感覚で作業ができます

次にスクロールの動作を加えていきます。動作はActionScriptで記述します。これもWebの動作をJavaScriptで記述するのと似ています。つまり、「HTML」が「MXML」に「JavaScript」が「ActionScript」に対応しているのです。

Flexは発生したイベントを処理するイベント駆動の仕組みを採用しています。今回のサンプルでは、アプリケーションが初期化される際に発生する「initialize」イベントに応じて、Timerオブジェクトを生成し、そのTimerオブジェクトが一定間隔で発生させるイベントを処理し、ラベルをスクロールさせます。

「HelloFlex.mxml」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="360" height="45" initialize="onInit()" horizontalScrollPolicy="off">
      <mx:Label id="hello" x="10" y="10" text="Hello!Flex" fontSize="20" width="113" height="33"/>

      <mx:Script>
            <![CDATA[

                  //アプリケーションの初期化イベントを処理する
                  function onInit():void
                  {
                        //50ミリ秒毎にイベントを発生させる
                        //Timerを生成する
                        var timer:Timer = new Timer(50,0);

                        //Timerイベントの処理関数を設定する
                        timer.addEventListener(TimerEvent.TIMER,onTick);

                        //Timerを起動する
                        timer.start();
                  }

                  //タイマーイベントを処理する
                  function onTick(evt:Event)
                  {
                        //ラベルが画面の右端を超えた場合
                        if(hello.x > 360)
                        {
                              //ラベルの文字の幅をマイナスした位置を始点とする
                              hello.x = -hello.measureText(hello.text).width;
                        }
                        else
                        {
                              ++hello.x;
                        }
                  }
            ]]>
      </mx:Script>
</mx:Application>

まず、ActionScriptのコードは「mx:Script」タグの中に記述します。CDATAはXMLの基本文法で「<」;や「>」;などの文字を利用できるセクションということです。

「mx:Application」タグの「initialize」属性に初期化イベントのハンドラ(onInit)を指定します。そして「mx:Label」タグの「id」属性に「hello」を指定して、ActionScriptのコードから「hello」でアクセスできるようにしています。

onInit()関数内ではTimerオブジェクトのイベントハンドラとして、onTickを登録しています。各関数の中身は次回以降で説明しますが、JavaやJavaScriptに親しんでいる方であればなんとなく理解できるものになっていると思います。コードを記述したらメニューを「実行 → HelloFlexの実行」の順にクリックし、実行します。

本稿でFlexの開発の感覚をなんとなく掴んでもらえているとうれしいです。次回以降でさらにFlexにつっこんでいきたいと思います。

(2008年1月3日)

ちょっと一休み. Javaキーワード並び替えゲーム