Flex マイクロブロギング・アプリケーションで pureXML を利用する: 第 2 回 Flex でアプリケーション・ユーザー・インターフェースを作成する

Flex と ActionScript を活用して、DB2 を利用した Web サービスに接続するユーザー・インターフェースを作成する

IBM DB2® の pureXML® 機能を使用すれば、XML をそのままの形式でデータベースに保管することができ、XML を変更する必要がありません。一方 Adobe® Flex® アプリケーションは、XML を直接読み取って Flex ユーザー・インターフェースに取り込むことが可能です。この 3 回の連載記事で作成するマイクロブロギング・アプリケーションでは、pureXML、Web サービス、そして Adobe Flex を利用するだけでなく、さらにマイクロブロギングでの近況アップデートを Twitter に公開することもできます。連載の第 1 回では、Web サービスについて説明し、マイクロブログ・データベースを作成およびテストして、DB2 pureXML を使用した Web サービスを有効にする方法を説明しました。第 2 回となる今回の記事では、Adobe Flex と ActionScript® を利用してアプリケーションのユーザー・インターフェースを作成します。

Joe Lennon, Software developer, Freelance

Joe Lennon photoJoe Lennon は、アイルランド・コーク出身の 24 歳のソフトウェア開発者です。彼は Apress から出版予定の『Beginning CouchDB』の著者で、IBM developerWorks の技術記事やチュートリアルにも度々貢献しています。余暇は、サッカー、ガジェットの研究、そして Xbox 360 のゲームで楽しんでいます。



2009年 11月 03日 (初版 2009年 10月 20日)

前提条件

この連載では、オープンソースの Flex SDK を使用してサンプル・アプリケーションを作成します。Adobe Flex 製品ページへのリンクは、「参考文献」に記載されています。また DB2 データベース・サーバーとして、DB2 の Express-C エディションをインストールする必要があります。DB2 Express-C のダウンロードとインストール方法については、「参考文献」を参照してください。サービスを Web サーバーにデプロイするためには、IBM® Data Studio および WebSphere® Application Server Community Edition (以降、Community Edition と略称) も必要です。ダウンロードについての情報は、「参考文献」を参照してください。


Flex の概要

よく使われる頭字語

  • Ajax: Asynchronous JavaScript + XML
  • HTML: HyperText Markup Language
  • HTTP: HyperText Transfer Protocol
  • IDE: Integrated Development Environment
  • MXML: Minimal XML
  • REST: REpresentational State Transfer
  • RSS: Really Simple Syndication
  • SDK: Software Development Kit
  • UI: User Interface
  • XML: Extensible Markup Language

Adobe Flex は、リッチ・インターネット・アプリケーション (RIA) を容易に開発できるようにするオープンソースのアプリケーション開発フレームワークであり、Adobe Flash® をサポートするコンピューターであれば、どのコンピューターにでもデプロイすることができます。Flex で開発するアプリケーションは、Web ベースのアプリケーションにすることも (ユーザーの Web ブラウザーに Adobe Flash Player をインストールする必要があります)、デスクトップ・アプリケーションにすることもできます (この場合は通常、Adobe AIR™ プラットフォームを使用してデプロイします)。

Flex を使用して行う RIA の開発を Ajax ベースの開発と比べた場合の第 1 の利点は、作成しているアプリケーションの動作があらゆる Web ブラウザーとオペレーティング・システムで確実に同じになるようにするための配慮が必要ないことです。Adobe Flash がインストールされている限り、Flex アプリケーションはどの環境で動作するかに関わらず、同じような動作をしているように見えます。

Flex アプリケーションを開発する方法としては、主に 2 つの選択肢があります。1 つは、無料で入手できるオープンソースの Flex SDK をダウンロードすることです。Flex SDK には Flex アプリケーションをコンパイルおよびデバッグするためのツールが含まれています。もう 1 つの選択肢として、Adobe の Flex Builder IDEを購入することもできます。この IDE には、ドラッグ・アンド・ドロップ式のユーザー・インターフェース設計をはじめ、Flex アプリケーションの開発を支援する豊富なツールが付属しています。さらにこの IDE はオープンソース Eclipse プラットフォームをベースとしているため、Eclipse プラグインとしても使用することができます。

Flex と XML

Flex アプリケーションの開発は、一般に以下の 2 つに分けることができます。

  • MXML でのアプリケーション・ユーザー・インターフェースの定義
  • ActionScript でのアプリケーション・ロジックの定義

Flex は、Flash 開発に使用されることでよく知られている ActionScript 3.0 をサポートします。このスクリプト言語が XML データをサポートするために使用するのは、E4X (ECMAScript for XML) 仕様に準拠した一連のクラスです。これらのクラスを使用することで、XML データを扱う Flex アプリケーションを簡単に開発することができます。

通常、Flex アプリケーションはデータベース・サーバーと直接通信することはありません。代わりに、RESTful な HTTP または SOAP インターフェースによってアクセスできる Web サービスを使用してデータを扱います。これが実際にどのように行われるかについては、この後サンプル・アプリケーションを作成するときに例を紹介します。

サンプル・アプリケーション

サンプル・アプリケーションとなるのは、マイクロブロギング・アプリケーションのための単純なユーザー・インターフェースです。このアプリケーションでは、ユーザーが以下の操作を実行することができます。

  • 新しい近況アップデートの作成
  • 近況アップデートの履歴の表示

このアプリケーションを開発する第 1 段階では、MXML を使用してユーザー・インターフェースを作成し、ActionScript を使用してアプリケーションのロジックを定義します。この作業が終わったら、次は XML ファイルに保管されたデータをアプリケーションのデータとしてロードします。そして最後に、連載の第 1 回で作成した Web サービスと通信するようにアプリケーションを構成し、アプリケーションのデータが DB2 pureXML データベースに保管され、そこから取得されるようにします。

最終的なアプリケーションは、図 1 のスクリーン・キャプチャーのように表示されることになります。

図 1. Flex Microblog アプリケーションのユーザー・インターフェース
Flex Microblog アプリケーションのユーザー・インターフェースのスクリーン・キャプチャー。近況アップデートを入力するフィールドと近況アップデートの履歴のフィールドが表示されています。

Flex SDK のインストール

この連載ではオープンソースの Flex SDK を使用してサンプル・アプリケーションを作成するので、これから Flex SDK をダウンロードしてインストールします。Adobe Flex 製品ページ (このページへのリンクについては「参考文献」を参照) にアクセスすると、ページ右側に、図 2 で強調表示されている「Get the Free Flex 3.x SDK」へのリンクがあることがわかります。このリンク先のページから、SDK をダウンロードすることができます。

図 2. Adobe Flex 製品ページ
Adobe Flex 製品ページのスクリーン・キャプチャー。「Get the Free Flex 3.x SDK」リンクが赤い四角で強調されています。

zip アーカイブのダウンロードが正常に完了したら (これには時間がかかる場合があります。私がダウンロードしたファイルのサイズは 120 メガバイトでした)、アーカイブの中身を C:\flex フォルダーに解凍します。インストーラーを実行するなどの操作は必要ありませんが、作業を進める前に、Flex コンパイラーが置かれているディレクトリーをシステムのパスに追加します。こうしておけば、Flex ソース・コードをコンパイルするたびに、毎回わざわざ Flex コンパイラーの場所を指定する必要がなくなるからです。

「Control Panel (コントロール パネル)」で「System (システム)」を開き、「Advanced (詳細設定)」タブをクリックします。ウィンドウの下のほうにある「Environment Variables (環境変数)」をクリックします (図 3 を参照)。

図 3. 環境変数
「System Properties (システムのプロパティ)」ダイアログの「Advanced (詳細設定)」タブのスクリーン・キャプチャー。「Environment Variables (環境変数)」ボタンが赤い四角で強調されています。

「Environment Variables (環境変数)」ダイアログの下半分にある「System variables (システム環境変数)」セクションをスクロールして、Path 変数を見つけます (図 4 を参照)。

図 4. Path 環境変数
「Environment Variables (環境変数)」ダイアログのスクリーン・キャプチャー。Path 変数が強調表示されています。

Path 変数をダブルクリックして「Edit System Variable (システム変数の編集)」ダイアログを開きます。「Variable value (変数値)」フィールドの既存の値に続けて、「;c:\flex\bin」と追加します。図 5 に一例を示します。

図 5. 「Edit System Variable (システム変数の編集)」ダイアログでの Path 変数の編集
「Edit System Variable (システム変数の編集)」ダイアログのスクリーン・キャプチャー。更新された Path 変数の値が表示されています。

OK」をクリックして、開いているすべてのダイアログ・ボックスを閉じます。これで、Flex アプリケーションの開発に取り掛かる準備は完了しました!まずは Flex コンパイラーが Path に設定されていることをテストし、Hello World Flex アプリケーションを例に、開発作業がどのようなものなのかを見ていきます。コンピューター上に c:\flexapps という新しいフォルダーを作成してください。このフォルダーが、アプリケーションのソース・コードを保管する場所となります。次に、作成したフォルダーのなかに hello という名前のサブフォルダーを作成します (c:\flexapps\hello)。プレーン・テキスト・エディター (メモ帳で構いません) を開いてリスト 1 のコードを入力し、hello.mxml というファイル名を付けて hello フォルダーに保存します。

ヒント: メモ帳を使用している場合、ファイルを保存するときにファイル名を二重引用符で囲むと (例えば、"hello.mxml")、メモ帳によってファイル名に .txt 拡張子が追加されることがなくなります。

リスト 1. hello.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center" verticalAlign="center"
  width="400" height="300">
    <mx:Script>
      <![CDATA[
        import flash.events.MouseEvent;

        private function helloHandler(event:MouseEvent):void {
          if(btnHello.label == "Hello!") {
            btnHello.label = "World!";
          } else {
            btnHello.label = "Hello!";
          }
        }
      ]]>
      </mx:Script>
      <mx:Button id="btnHello" label="Hello!"
        click="helloHandler(event);" />
</mx:Application>

このソース・コードの内容を簡単に説明すると、まず XML 宣言によって、このファイルが UTF-8 エンコード方式を使用する XML 文書であることをコンパイラーに知らせます。次に、メインの MXML アプリケーション・タグ (mx:Application) を開き、アプリケーションのサイズとレイアウトを定義する幅、高さ、配列などのプロパティーを渡します。リスト 1 でこれに続くセクションは、ActionScript コードが含まれる MXML スクリプト・ブロック (mx:Script) です。この例での ActionScript は、ユーザーがボタンをクリックしたときにトリガーされる 1 つの関数を定義しているにすぎません。この関数は、ボタンが現在表示しているテキストをチェックして、それを変更します。

mx:Script タグを閉じた後、MXML ボタン・タグ (mx:Button) を作成し、ActionScript コードがこのタグを簡単に見つけられるように id 属性を設定しています。また、ボタンに表示するテキストを定義する label 属性と、イベント・ハンドラーも作成しています。上記の例では、この helloHandler 関数が click イベントによって呼び出されるように指定しています。

ここで、Flex コンパイラーを使用してコードをコンパイルします。コマンド・プロンプトを開き (「Start (スタート)」 > 「Programs (すべてのプログラム)」 > 「Accessories (アクセサリ)」 > 「Command Prompt (コマンド プロンプト)」)、コマンド cd \flexapps\hello を実行してカレント・ディレクトリーを hello プロジェクト・フォルダーに変更します。

MXML ファイルをコンパイルするには、コマンド mxmlc hello.mxml を実行します。

すると、図 6 のような結果が表示されます。

図 6. 最初のアプリケーションのコンパイル
Hello World Flex アプリケーションのコンパイル結果のスクリーン・キャプチャー
図 6 のコマンド・プロンプト・ウィンドウに表示されている情報のテキスト版
Microsoft Windows XP [Version 5.1.2600]
<C> Copyright 1985-2001 Microsoft Corp.

C:\Documents and Settings\Joe Lennon>cd \flexapps\hello

C:\flexapps\hello> mxmlc hello.mxml
Loading configuration file C:\flex\frameworks\flex-config.xml
C:\flexapps\hello\hello.swf <174307 bytes> 

C:\flexapps\hello>

コンパイルを行ったことにより、hello フォルダー内には hello.swf という新しいファイルが作成されています。この新規に作成されたファイルをコマンド・プロンプトで開くには、ファイル名のみを入力します。または、Windows® エクスプローラーでファイル名をダブルクリックして開くこともできます。

ヒント: スタンドアロンの Adobe Flash Player がインストールされていない場合は、Web ブラウザーで SWF ファイルを開けるはずです。あるいは、スタンドアロンの Adobe Flash Player のデバッグ版およびリリース版をダウンロードするという方法もあります (デバッグ版は、Flex アプリケーションのバグを見つけるのに最適です)。リンクについては、「参考文献」を参照してください。

アプリケーションは図 7 のように表示されます。

図 7. 最初のアプリケーション
Adobe Flash Player ウィンドウに表示された Hello World アプリケーションのスクリーン・キャプチャー

図 7 のアプリケーションで、ボタンのテキストを切り替えるには「Hello!」ボタンをクリックします。すると、ボタンのテキストは「World!」に変わり、今度は「World!」ボタンをクリックするとテキストは「Hello!」に戻ります。次のセクションでは、メインのサンプル・アプリケーションにインターフェースを作成します。


サンプル・アプリケーションの開発

ここからは、Microblog アプリケーションの開発を進めていきます。最初に、このアプリケーション用の新規フォルダーを作成したら (c:\flexapps\microblog)、テキスト・エディターを使用して新しいファイルを作成し、作成しておいたフォルダーに microblog.mxml という名前を付けてファイルを保存します。アプリケーションのコードは、このファイルに追加していきます。それでは早速、ユーザー・インターフェースの開発に取り掛かりましょう。

ユーザー・インターフェースの作成

このサンプル Flex アプリケーションを開発する際の最初のステップは、ユーザー・インターフェースを作成することです。Flex ではいくつかの方法で UI を処理することができますが、ここでは MXML コンポーネントを使用してアプリケーションをレイアウトします。このセクションの手順を完了すると、アプリケーションには残りの文字数をカウントする機能が備わります (図 8 を参照)。

図 8. Microblog アプリケーションの UI
Microblog アプリケーションのスクリーン・キャプチャー。テキストが入力された近況アップデートのフィールドと、残りの文字数が表示されています。

このインターフェースを作成するには、リスト 2 のコードを microblog.mxml ファイルに追加します。

リスト 2. microblog.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400">
    <mx:Script>
    <![CDATA[
      import flash.events.Event;

      private function statusChangeHandler(event:Event):void {
        remaining.text = String(140 - status.length);
      }
    ]]>
    </mx:Script>
    <mx:Panel layout="absolute" left="10" right="10"
      top="10" bottom="10" title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
            maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">

        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"/>
    </mx:Panel>
</mx:Application>

コマンド・プロンプトを開き、コマンド cd \flexapps\microblog を実行してカレント・ディレクトリーを microblog フォルダーに変更します。

コマンド mxmlc microblog.mxml を実行して、アプリケーションのソース・コードをコンパイルします。

コンパイルが成功すると、プロジェクト・フォルダーに microblog.swf ファイルが作成されているはずです。このファイルを Flash Player (または Flash Player プラグインがインストールされた Web ブラウザー) で開くと、図 8 に示したような画面が表示されます。

このファイルは前のセクションで開発した Hello World アプリケーションと比べ、それほど複雑になっているわけではありません。主な変更点は、絶対位置決めにより、UI コントロールを x 座標と y 座標を使って配置するようになったこと、そしてその他の Flex コントロール (mx:Panelmx:Labelmx:TextArea、および mx:VBox) をいくつか導入したことなどです。mx:Panel コントロールはレイアウトのために使用するコンテナー・コントローラーであり、この例ではアプリケーションのウィンドウ・スタイルのコンテナーとして使用しています。mx:Label は単なる説明用のテキスト・ラベルです。ここで使用するラベルのうちの 1 つに、remaining という id を持つラベルがあります。このラベルは、statusmx:TextArea コントロールに入力可能な残りの文字数を示すために使用します。このコントロールには change 属性があり、この属性によって変更イベントが起動されたときに呼び出される関数が定義されます。

ここで新しく導入されているコントロールの最後の 1 つは、mx:VBox コントロールです。mx:Panel と同じく、これもコンテナー・コントロールですが、このコントロールは他のコントロールをレイアウトするために使用します。次のセクションでは、このコントロールに近況アップデートの履歴を取り込みます。

アプリケーションの骨組みができたところで、今度は XML ファイルから VBox コントロールに近況アップデートを取り込む作業に移ります。

XML ファイルに保管された近況アップデートのロード

まず、アプリケーションが近況アップデートのリストを取得するために使用する XML ファイルを作成し、そのファイルにアプリケーションの近況アップデートの履歴セクションを取り込みます。microblog.mxml ファイルと microblog.swf ファイルが置かれているディレクトリーに、updates.xml という名前の新規ファイルを作成し、リスト 3 のコードを追加してください。

リスト 3. updates.xml
<?xml version="1.0"?>
<updates>
    <update>
        <text>Flex and XML are an awesome combination!</text>
        <date_created>2009-09-02 23:45:01</date_created>
    </update>
    <update>
        <text>Finished a hard day of work, phew...</text>
        <date_created>2009-09-01 19:02:57</date_created>
    </update>
    <update>
        <text>I think I need some strong coffee right now.</text>
        <date_created>2009-09-01 11:14:51</date_created>
    </update>
    <update>
        <text>Less than an hour till lunch time! Mmmm food...</text>
        <date_created>2009-08-31 12:04:43</date_created>
    </update>
    <update>
        <text>Playing some Xbox 360!</text>
        <date_created>2009-08-22 09:44:27</date_created>
    </update>
    <update>
        <text>Creating a DB2 database</text>
        <date_created>2009-08-15 23:30:36</date_created>
    </update>
    <update>
        <text>Half-day today woohoo</text>
        <date_created>2009-08-06 01:28:19</date_created>
    </update>
    <update>
        <text>Looking forward to Snow Leopard being released</text>
        <date_created>2009-08-03 14:19:08</date_created>
    </update>
    <update>
        <text>Time to go home! Yipeeeee!</text>
        <date_created>2009-07-30 18:00:50</date_created>
    </update>
</updates>

上記のコードに含まれる近況アップデートのテキストについては、もちろん皆さんの想像力で変更してもらって結構です。それではこれから、この XML データをロードしてユーザーに表示するように Flex アプリケーションを変更していきます。さらに、「Refresh」ボタンを機能させるためのコードも追加します。

リスト 4 のコードは、更新後の microblog.mxml ファイルです。

リスト 4. microblog.mxml (更新後)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="updates.xml" id="updateData"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;

        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.update}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.text} (Posted: 
{r.currentItem.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

上記で最も重要な新規要素は、XML ファイルをロードするために使用する mx:HTTPService コントロールです。mx:Application タグのなかに、creationComplete という新しい属性が作成されていることに注目しください。mx:HTTPService オブジェクトで send メソッドを呼び出すのは、この属性です。基本的には send メソッドを呼び出すことで、アプリケーションのロードが完了すると同時に XML ファイルをロードするよう、アプリケーションに対して指示がされるようになります。

Flex 開発ではよくあることですが、XML ファイルからデータを取得し、それを Flex アプリケーション用に準備する場合にもさまざまな方法を使えます。この例で使用する mx:XMLListCollection は、後から mx:Repeater がデータ・プロバイダーとして使用します。mx:Repeater は基本的にその内部にコントロールを取り込むコントロールであり、mx:Repeater が使用するデータ・ソースでの繰り返し処理のたびに、取り込んだコントロールを繰り返します。ここで使用する XML ファイルには 9 個のレコードがあるため、mx:Repeater コントロールは 9 個の mx:Text コントロールを mx:VBox コントロールの内側に出力します。

最後に「Refresh」ボタンに追加しているイベント・ハンドラーは、基本的に、ボタンがクリックされるたびに XML ファイルからデータをリロードします。

「コマンド プロンプト」ウィンドウを開いて、と同じ方法でプロジェクト・フォルダーに移動してください。移動したら、コマンド mxmlc microblog.mxml を実行してアプリケーションをコンパイルします。

ここで、microblog.swf ファイルを開いてみます。するとファイルが開きません。代わりに図 9 のようなエラー・メッセージが表示されます。

図 9. ActionScript エラー
Adobe Flash Player ウィンドウに表示されたローカル・ファイルの ActionScript エラーのスクリーン・キャプチャー
図 9 の ActionScript エラーのテキスト版
[RPC Fault faultString="Error #2148: SWF file file:///C:/flexapps/microblog/microblog.swf cannot acce...
   at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::invoke[]
   at mx.rpc.http::AbstractOperation/http://www.adobe.com/2006/flex/mx/internal::invoked[]
   at mx.rpc.http::AbstractOperation/sendBody[]
   at mx.rpc.http::HTTPService/send[]
   at microblog/__microblog_Application1_creationComplete[]
   at flash.events::EventDispatcher/dispatchEventFunction[]
   at flash.events::EventDispatcher/dispatchEvent[]
   at mx.core::UIComponent/dispatchEvent[]
   at mx.core::UIComponent/set initialized[]
   at mx.managers::LayoutManager/doPhasedInstantiation[]

エラー・メッセージにざっと目を通すと、Flash がローカル・ファイルをロードしなかったとあります。これは、アプリケーションがネットワークやインターネットを介して不正に利用されないようにするためのセキュリティー機能です。ここではファイル・システムからファイルをロードしているため、Flex コンパイラーに、ネットワーク上のアプリケーションをデプロイしているのではないと伝えなければなりません。それには、コマンド mxmlc -use-network=false microblog.mxml を使用します。

このコマンドによって生成された microblog.swf ファイルを実行すると、今度は十分満足できる結果となるはずです (図 10 を参照)。

図 10. XML に対応したアプリケーションの動作
XML に対応したアプリケーションの動作を示すスクリーン・キャプチャー。「Previous updaes (近況アップデートの履歴)」フィールド内には過去のアップデートが表示されています。

次のセクションでは、このサンプル Flex アプリケーションを連載の第 1 回で作成した Web サービスに統合します。


pureXML Web サービスとの統合

これまでは常に、ファイル・システムに置かれた Microblog アプリケーションの SWF ファイルをローカルで実行していました。外部 Web サービスへのアクセスに関するセキュリティー・ポリシーに準拠するには、SWF ファイルを、Web サービスがデプロイされている WebSphere Application Server にデプロイしなければなりません。

まず始めに行う作業は、アプリケーションを変更して、新しい近況アップデートを投稿、または既存の近況アップデートを取得するために使用する Web サービスを指定することです。それには、microblog.mxml を開いてリスト 5 のコードのように変更します。

リスト 5. microblog.mxml (最終版)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates
/rest/StatusUpdates/getAllUpdates" id="updateData"
  resultFormat="e4x"/>
    <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates/
rest/StatusUpdates/insertUpdate" id="newUpdate"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
       
        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

      private function postClickHandler(event:MouseEvent):void {
        var params:Object = new Object();
        params.C_TEXT = status.text;
        params.C_DISPLAY = true;
        newUpdate.send(params);
        updateData.send();
  }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.row}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"
  click="postClickHandler(event);"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.DATA.update.text} (Posted:
 {r.currentItem.DATA.update.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

最終版のアプリケーションのソース・コードで行われた最も重要な変更は、ローカル XML 用の mx:HTTPService コントロールが削除され、代わりに Web サービス用の mx:HTTPService コントロールが 2 つ追加されたことです。この 2 つのコントロールは、Web サービスから既存の近況アップデートを取得するためと、Web サービスに新しい近況アップデートを送信するために使用されます。アプリケーションの起動時には、データを取得する mx:HTTPService だけが呼び出されます。これは、新しい近況アップデートを送信するには、まずユーザー入力を受け入れて新規データを作成する必要があるからです。

次に大きな変更は、ActionScript の mx:Script ブロック内に postClickHandler 関数が定義されたことです。この関数で新しいオブジェクトを定義し、この新規オブジェクトの C_TEXT および C_DISPLAY フィールドに値を割り当てます。これらのパラメーターには正しい値を渡すことが重要です。そうでないと、Web サービスに対するリクエストは失敗します。次にこのオブジェクトを newUpdatesend メソッドへの引数として mx:HTTPService コントロールに渡します。そして最後にデータのビューの表示を最新の状態にするため、Web サービスからデータを取得するコンポーネントに ping を送信します。また、コードの下のほうでは「Post」ボタンを設定して、このボタンに対する click イベントが発生した時にこの postClickHandler 関数を呼び出していることにも注目してください。

この Web サービスでの pureXML データベースに保管された XML の表示方法に対応させるため、mx:XMLListCollection コンポーネントのソースには多少の変更を加える必要がありました。それぞれの近況アップデートのデータは <row> タグ内で最上位レベルに保管されることから、このソースを updateData.lastResult.row として定義しています。

最後に注目すべき点として、繰り返される mx:Text コンポーネントの text 属性で使用するフィールドも変更されています。これも同じく、Web サービスによって生成される XML のフォーマットに合わせるための変更です。XML では、近況アップデートの各行はリスト 6 のようになります。

リスト 6. 近況アップデートの各行の XML
<row>
    <DATA>
        <update>
            <text>Update text</text>
            <date_created>Date/time value</text>
        </update>
    </DATA>
</row>

したがって mx:Text コンポーネントには、r.currentItem.DATA.update.text および r.currentItem.DATA.update.date_created を調べて、それぞれのタグに適切な値を取得するように指示する必要があったというわけです。

コマンド・プロンプトを開いてプロジェクト・フォルダーに移動し、もう一度 MXML ソース・ファイルをコンパイルしてください。SWF ファイルをデプロイする対象はアプリケーション・サーバーであること、そしてアプリケーションはローカル・データでなくネットワーク・データを使用することから、-use-network=false 引数は使用しません。つまり、ソース・コードをコンパイルするためのコマンドは、mxmlc microblog.mxml に戻るというわけです。

今度は microblog.swf ファイルをコンピューター上で直接実行しようとした場合に、図 11 のようなエラー・メッセージを受け取ることになります。

図 11. セキュリティー・エラー
Adobe Flash Player ウィンドウに表示された ActionScript セキュリティー・エラーのスクリーン・キャプチャー
図 11 の Action Script エラーのテキスト版

リスティングを見るにはここをクリック

図 11 の Action Script エラーのテキスト版

[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="D......
   at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler[]
   at mx.rpc::Responder/fault[]
   at mx.rpc.::AsyncRequest/fault[]
   at DirectHTTPMessageResponder/securityErrorHandler[]
   at flash.events::EventDispatcher/dispatchEventFunction[]
   at flash.events::EventDispatcher/dispatchEvent[]
   at flash.net::URLLoader/redirectEvent[]

WebSphere Application Server で時間をかけて試行錯誤を重ねることで、クロスドメイン・ポリシーを構成するのでも構いませんが、SWF ファイルをそのままアプリケーション・サーバーにデプロイするほうが遥かに簡単です。それには、Windows エクスプローラーで microblog.swf ファイルを見つけて右クリックし、「Copy (コピー)」をクリックします。次に IBM Data Studio を開いて MBLOGデータベースに接続します。「Navigator (ナビゲーター)」ビューを開くと (「Window (ウィンドウ)」 > 「Show View (ビューの表示)」 > 「Navigator (ナビゲーター)」)、3 つのフォルダーが表示されます。そのうち 3 番目のフォルダーは、MicroblogStatusUpdatesWeb という名前になっているはずです。このフォルダーを展開し、WebContent フォルダーを右クリックして「Paste (貼り付け)」をクリックします。正しく操作していれば、microblog.swf がサーバー上に保管されるはずです (図 12 を参照)。

図 12. Application Server にデプロイされた microblog.swf
Data Studio の「Navigator (ナビゲーター)」ビューのスクリーン・キャプチャー。microblog.swf が Application Server にデプロイされた状態が示されています。

ここで、Community Edition (WASCE) サーバーのインスタンスを起動してください。サーバーの起動が完了したら、Web ブラウザーを開いて http://localhost:8080/MicroblogStatusUpdates/microblog.swf にアクセスし、Microblog アプリケーションがデータベースから近況アップデートを取得することを確認します。また、新しい近況アップデートを投稿し、その近況アップデートがデータベースに保管されて、近況アップデートの履歴のリストに追加されることも確認してください。「Refresh」ボタンが機能することを確認するには、DB2 Command Editor を使用してデータベース内に新しい行を作成します。その上で「Refresh」ボタンをクリックし、作成した行が取得されるかどうかを調べます。

図 13 は、アプリケーションの最終版のスクリーン・キャプチャーです。

図 13. アプリケーションの最終版
Microblog アプリケーションの最終版のスクリーン・キャプチャー。近況アップデートのフィールドと、近況アップデートの履歴のフィールドが表示されています。

まとめ

この記事では、Adobe Flex を使用して、連載第 1 回で作成した DB2 を利用した Web サービスに接続するリッチ・クライアントのユーザー・インターフェースを作成する方法を説明しました。

連載最終回となる第 3 回では、Web サービスと pureXML からデータを取得し、そのデータを異なるフォーマット (特に RSS と HTML) で公開する方法を説明した後、サンプル・アプリケーションを絶大な人気を誇るマイクロブロギング Web サイトの Twitter に統合します。


ダウンロード

内容ファイル名サイズ
Article source codexmlflexpt2.source.zip3KB

参考文献

学ぶために

製品や技術を入手するために

  • Adobe Flex 製品ページ: この記事で使用したオープンソースの Flex SDK、または無料の Adobe Flex Builder 試用版をダウンロードしてください。
  • スタンドアロンの Adobe Flash Player: デバッグおよびリリース・ビルドをダウンロードしてください (Flex アプリケーションのバグを見つけるには、デバッグ・バージョンが最適です)。
  • Adobe Labs: Adobe Flex Framework Technologies: このページにアクセスして、Adobe Labs に用意されている Flex 関連のプレリリース製品、実験的技術、開発者向けユーティリティー、そしてオープンソース・プロジェクトを調べてください。
  • IBM 製品の評価版: DB2®、Lotus®、Rational®、Tivoli®、および WebSphere® のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Information Management, Open source, Web development
ArticleID=448413
ArticleTitle=Flex マイクロブロギング・アプリケーションで pureXML を利用する: 第 2 回 Flex でアプリケーション・ユーザー・インターフェースを作成する
publish-date=11032009