連載一覧へ

作って学ぶAIRウィジェットの基礎→応用（3）

Flex Builder 3でサクっとActionScriptコーディング！

クラスメソッド株式会社
福田 寅成
2008/3/24

Flex Builder 3を使ってサクッと変数を定義

■ <mx:Script>タグのひな型を作成

　冒頭で、簡単な画面とロジックの分離をするといっていましたが、図4のように、MXML内に<Script>タグを作成し、そこにコードを集中することにします。

　実際、MXMLのタグ側には今後コードは一切書かず、属性をいくつか追加するだけですので、画面を表すコードとロジックを表すコードが互い違いに混在しているような状況は今回のサンプルウィジェットのコーディングでは起こりません。

　では、RSSReader.mxmlの「<mx:Style source="style.css" />」の最後で［Enter］キーをタイプし、空行を作成します。次に、「<」→「s」→［Enter］キー→「>」の順にキーボードをタイプすると、<Script>タグのひな型が出来上がります。

図4　<mx:Script>タグのひな型

　コードは今後、この<Script>タグの「CDATA（セクション）」の中に書いていきます。

■ 今回作成する変数の概要

　では、準備ができたので、変数の作成に入ります。今回作成する変数は以下の3つです。

1. RSSInfo.asの具体的なサンプルの配列（ウィジェット左の「RSS一覧」表示部用）
2. 各RSSの記事一覧を保持する変数（ウィジェット右上の「記事一覧」表示用）
3. 記事1つ1つを表す変数（ウィジェット右下の「記事詳細」表示用）
   

　1つ目の変数は配列ですが、少し便利な配列機能を持つArrayCollection型（クラス）で、2つ目の変数は配列なのでArray型、3つ目の変数はIFeed型で定義します。コードは下記のようになります。

import com.adobe.xml.syndication.generic.IFeed; import data.RSSInfo; import mx.collections.ArrayCollection; [Bindable] /** RSSのリスト */ private var rssInfoList:ArrayCollection = new ArrayCollection([     new RSSInfo("@IT",         "http://rss.rssad.jp/rss/itmatmarkit/rss.xml"),     new RSSInfo("Flex Coder",         "http://d.hatena.ne.jp/sato-shi/rss"),     new RSSInfo("CLASSMETHOD",         "http://classmethod.jp/feed/topnews_data.xml") ]); [Bindable] /** FeedItemのリスト */ private var feedItemList:Array; /** RSSオブジェクト */ private var rss:IFeed;

　rssInfoListでは、RSSInfoのサンプルデータをいくつか定義しています。また、rssInfoListとfeedItemListには、[Bindable]メタデータタグを定義しています。この説明はもう少しお待ちください。

　RSSのサンプルに関しては、皆さんの好きなブログやWebサイトのRSSを登録してもOKです。今回のウィジェット作成では、大体のサイトのRSSは読み込めるようになっていると思います。

コラム　「Flex Builder 3の『import追加』機能」

上記ソースコードを入力している際に、エラーが報告されると思います。ArrayCollectionなどはクラスへの参照を「import」する必要があります。 Flex Builder 3では、クラスの最初の数文字を入力して、［Ctrl］＋［Space］キーのコード補完でクラス名を決定するとimport文が追加されます。コードをコピー＆ペーストした際などは、クラス名が全部入力されているので、クラス名の末尾にカーソルを持っていって、［Ctrl］＋［Space］キーを押すと、importの追加だけ行ってくれます。

コンポーネントへのイベント指定とメソッドのひな型作成

　次に、MXML内の各コンポーネントにイベントとそのハンドラを指定することにします。

■ イベントとは？ イベントハンドラとは？

　イベントとイベントハンドラについてまとめると以下のようになります。

表1　イベントとイベントハンドラ

名前 種別 イベント クリックや値の変更、フォーカスが当たるなどコンポーネントに対して何らかの変更やアクションが起こった際に発生するもの イベントハンドラ イベントが発生した場合に、何らかの処理を行う関数

図5　イベントとイベントハンドラ

　例えば、「ボタンがクリックされたときに、RSSを読み込みに行く」という処理はFlexでは、「『idが「rssRead」のButtonコンポーネント』（図5の左の『コンポーネント』に対応）がクリックされ、『MouseEvent.CLICKイベント』（図5の中央の矢印の『種類』）が発生し、その情報（どのボタンが押されたかなど）を保持したMouseEventオブジェクト（図5の中央の矢印に乗って渡されるイベント情報オブジェクト）がrssReaderイベントハンドラ（図5の右の楕円（だえん））に渡されて（『通知』されて）、RSS読み込み処理が行われる」というように翻訳できます。

■ MXMLファイルにイベントを指定

　では、イベントをMXMLに指定していきます。各コード例の図6〜8の「エラーマーク」は後ほど修正します。このエラーマークにマウスを合わせると、「未定義である可能性が高いメソッド」と出るように、イベントに対するイベントハンドラが定義されていない場合にエラーが報告されてプログラマーに分かるようにFlex Builder 3は表示してくれます。

図6　イベントの指定（1）

　idが「rssList」のitemClick属性に、アイテムをクリックした際のイベントを処理するハンドラ（getRssFeed(event)）を指定します。また、「dataProvider="{rssInfoList}"」「labelField="name"」も指定します（先ほど定義した変数をデータバインディングの中括弧で指定しています）。

図7　イベントの指定（2）

　2つのボタンのclick属性に、アイテムをクリックした際のイベントを処理するイベントハンドラ（それぞれ「showAddFeedWindow()」「removeFeed()」）を指定します。

図8　イベントの指定（3）、（4）

　idが「feedList」のDataGridのchange属性に、DataGridの選択行のインデックスが変更になった場合のイベントを処理するイベントハンドラを指定します。また、「dataProvider="{feedItemList}"」も指定します。

　引き続き、同じ「DataGridのdoubleClickEnabled="true"」を指定し、DataGridでのダブルクリックを許可し、itemDoubleClick属性に、DataGridの各セルがダブルクリックされた場合のイベントを処理するイベントハンドラを指定します。

■ 空のイベントハンドラ（メソッドのひな型）の作成

　次に、先ほどコンポーネントのイベント属性に指定したイベントハンドラの中身が空のもの（メソッドのひな型）を作成します。その後、次ページ以降や次回の連載でイベントハンドラの中身を実装していきます。下記コードを、先に定義した変数「rss」の下に（1行空行を挟んで）実装していきます（それぞれのコメント（ASDoc）はインデックスになっています）。

/**     * RSSフィードの取得     * @param event ListEventオブジェクト     */     private function getRSSFeed(event:ListEvent):void {         trace("getRSSFeed");     }     /**     * RSS読み込み完了処理     * @param event Eventオブジェクト     */     private function loadRssFeedCompleteHandler(event:Event):void {         trace("loadRssFeedCompleteHandler");     }     /**     * Feed本文の表示     * @param event Eventオブジェクト     */     private function showFeed(event:Event):void {         trace("showFeed");     }     /**     * RSS読み込み失敗処理     * @param event Eventオブジェクト     */     private function ioErrorHandler(event:ErrorEvent):void {         trace("ioErrorHandler");     }     /**     * Feedのブラウザでの表示     * @param event Eventオブジェクト     */     private function showInBrowser(event:Event):void {         trace("showInBrowser");     }     /**     * 新規RSSウィンドウの表示（※第4回で実装）     */     private function showAddFeedWindow():void {         trace("showAddFeedWindow");     }     /**     * RSS削除処理（※第4回で実装）     */     private function removeFeed():void {         trace("removeFeed");     }

　今回は実行時にイベントが発生すると、Flex Builder 3の［コンソール］ビューにどのイベントハンドラが呼ばれたかを確認できるように、各メソッドの最初にtraceメソッドでイベントハンドラ名を出力させるようにしています。

　上記のコーディング中にListEventクラスはimport文を追加する必要があるので、先ほどのコラムのように、［Ctrl］＋［Space］キーを駆使してimport文をFlex Builder 3に追加しておきましょう。

1-2-3-4

INDEX
作って学ぶAIRウィジェットの基礎→応用（3） Flex Builder 3でサクっとActionScriptコーディング！
	Page1 AIRウィジェットの処理やロジックをActionScriptで記述 ActionScriptコーディングを行う前の準備 注意！ 「今回利用したライブラリの問題点」 コラム　「プログラム用語の方言」
	Page2 Flex Builder 3を使ってサクッと変数を定義 コラム　「Flex Builder 3の『import追加』機能」 コンポーネントへのイベント指定とメソッドのひな型作成
	Page3 RSSのリクエストの作成 注意！ 「メモリリークの原因」 RSSのレスポンスの取得
	Page4 Flex Builder 3でデバッグをしてみよう RSSフィードの表示やエラー処理などをして仕上げる できたAIRウィジェットをインストールして動かそう！

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）