次のページへAIRのソースコードを修正してみよう次に、[デザイン]ビューで作成したソースコードを[ソース]ビューで修正していくことにします。「ソース」タブで画面を[ソース]ビューに切り替えます。手順【2】までで自動的に作成されたソースコードは以下のようになっています。id="timeLabel"fontSize="100"/></mx:WindowedApplication>いくつかのポイントを確認していきましょう。WindowedApplication>タグがあるこれがデスクトップ・アプリケーションを表すタグです。HTMLでいう<html>タグ、Flexでいう<mx:Application>タグと同じようにアプリケーションの種類を定義しています(Flex開発をしたことのある方へ:Flexから大きく変わったのは、このタグだけです。Flexに1つのおまじないをすることによりあっという間にAIRに早変わりというわけです)。コントロールはすべてmxから始まるタグで表現されているこれはFlexで提供されるコンポーネントで共通しています。WindowedApplicationタグ以外はFlexでも同様に利用ができるコンポーネントです。Builderのソースコード・エディタのソースコード補完機能を利用してソースコードを修正してみることにします。「layout」の前で改行し、「absolute」を削る。ダブルクオーテーション(")だけになったところでCtrl+Spaceを押すと、layoutに設定できる属性の候補が表示されるので、「vertical」を選択(Enterキー)。「layout="vertival"」の次で改行し、キーボードで「ho」と入力し、Ctrl+Spaceキーを押したたときに最初に出てくる候補の「horizontalAlign」を選択(Enterキー)し、さらに出てくる候補から「center」を選択(Enterキー)「horizontalAlign="center"」の次で改行し、キーボードで「ver」と入力し、Ctrl+Spaceを押したたときに最初に出てくる候補の「verticalAlign」を選択(Enterキー)し、さらに出てくる候補から「middle」を選択(Enterキー)「ApplicationControlBar」の「x」と「y」を削り、horizontalAlignに「center」を設定(上記と同様に補完を利用する)これにより、全体に張り付けたコンポーネントが上から下に縦に順にレイアウトされ(vertical)、横方向に中央ぞろえ(horizontalAlign="center")、縦方向にも中央ぞろえ(verticalAlign="middle")されるようになります。ApplicationControlBar内の3つのボタンが中央に整列されるようになります。ここで無駄な空行を削除しておきます。ここまでの結果のソースコードは以下のようになります。3の上部の虫のアイコンをクリックして、アプリケーションをデバッグ実行してみましょう。[メニュー]から[実行]→[SimpleTimerのデバッグ]を選ぶか、F11キーを押すことでもデバッグ実行できます。起動したSimpleTimerのイメージは以下のようになります。実行結果を確認したら、いったん右上の[×]ボタンでアプリケーションを終了しておきます。アプリケーションのイベントを定義するには?各コンポーネントには各種イベントを定義できます。ボタンでは「クリックイベント」が有名ですね。ほかにはマウスが動いたときに起こるイベントや、テキスト入力に文字が入力されたイベントなどが有名です。以下のように、一番外側のタグ(mx:WindowedApplicationタグ)とボタンタグにイベントを定義し、そのイベントの「イベントハンドラ」を指定します。「イベントハンドラ」とはイベントが起こった際に何らかの処理を行う「関数」です。イベントとイベントハンドラの定義startButtonを例に取ると、「click=onStartButtonClick」という感じでプロパティとプロパティ値がタグに追加されることになります。この例を日本語に訳すると、「スタートボタンをクリックした場合、onStartButtonClick関数が呼ばれる」というような意味になります。イベントハンドラ名はここでは「on+ID+イベント種別」という規則で命名しています。手順【2】ソースコードの確認ここまでのソースコードは以下のようになります。ここまでの段階では、[ソース]ビューの左側に×印が4つ現れていて、エラーが発生している状態です。次に、イベントを処理するイベントハンドラを作成します。ここからはスクリプトを書く必要があります。今回は直接MXML内にスクリプトを書くことにします。ここで出てくる「スクリプト」が「ActionScript」です。ActionScript入門」を参照してください)。<mx:Script>タグを作成してみましょう。「<」を入力する「s」を入力する最初に出てきた補完候補の「mx:Script」を選択(Enterキー)「>」を入力する上記作業で以下のスクリプトタグが作成されます。<mx:Script>タグ<mx:Script><![CDATA[]]></mx:Script>この「CDATA[」の次の行から実際にスクリプトを記述していくことになります。以下のソースコードのように、4つの空のイベントハンドラを定義します。{}それぞれ、スコープとして「private」、関数を表す「function」を付けて、先にメソッド名を定義し、その後に、戻り値の型「void」を指定しています。ASDocのコメントも付けています。JavaDocなどと同じ流儀で変数や関数にコメントを書いておくことができます。手順【5】実行&ソースコードの保存エラーなく実行できるか確認してみましょう。先ほどはデバッグ実行をしてみましたが、今回は普通の「実行」を行ってみます。右矢印ボタンか、[メニュー]の[実行]→[SimpleTimerを実行]で実行できます。忘れずにソースコードを保存しておきましょう!AIRウィジェットにタイマーを設定するには?タイマー処理を実装するために、「タイマー」を利用することにします。「タイマー」は一定時間ごとに決まった処理を行いたい場合に使うオブジェクトです。以下のソースコードを先ほど実装した関数の「前」の部分に追加します。「定数がアルファベット大文字」などは、ほかの言語でのコーディング規約とも同じものです。タイマーのインターバルはTimerオブジェクトの初期化のときに、カウントダウン開始時刻はスタートボタンが押されたときに時刻を保持するために後で使います。タイマーは1秒ごとにカウントダウンしていくように作るので、タイマーのインターバルは1秒でもよいのですが、精度を高くするために間隔を短くしています(サンプル・ウィジェット完成後、インターバルを1000ミリ秒にして実験してみると、表示がおかしくなる場合があることが分かると思います)。次ページでは、プログラムを完成させてAIRウィジェットとしてパッケージングします。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。