編集者のメモ: このトピックについて詳しく知っていますか。あなたの専門知識を共有しませんか。いますぐ IBM Lotus ソフトウェア Wiki プログラムに参加しましょう。

はじめに

IBM® Mashup Center には、マッシュアップ・アプリケーションの構築に使用できるウィジェットが多数用意されています。これらのウィジェットを使用することで、グリッドや折れ線グラフ上にだけでなく、地図上にもデータを表示することができます。しかし、グラフィカル・ユーザー・インターフェース（GUI）の表示をさらにカスタマイズしたい場合や、既存のウィジェットに用意されている設定だけでは不十分な場合があります。

独自のウィジェットを開発する方法はいろいろありますが、IBM Mashup Center には、コードを作成しなくてもカスタム・ウィジェットを開発できる便利な GUI ツールとして、Lotus Widget Factory が同梱されています。JavaScript、Dojo など、プログラミング言語に詳しい場合は、iWidget の仕様に基づいてコードを作成して、カスタム・ウィジェットを開発することもできます。iWidget フレームワークは柔軟性が高いため、他のテクノロジーとのシームレスに統合できます。この記事で、IBM Mashup Center に Adobe Flex アプリケーションを統合してマッシュアップ力を大幅に高める方法を学んでください

iWidget フレームワークと Adobe Flex プログラミングの基礎知識があることが前提になります。

上に戻る

Flex アプリケーションの概要

Flex は、リッチ・インターネット・アプリケーションの構築に広く使用されているオープン・ソース・フレームワークで、作成されたアプリケーションは Adobe Flash Player を使用してほとんどのブラウザーで実行することができます。Flex には多くの GUI インターフェース・コンポーネントがあります。図 1 に、インタラクティブなアニメーションのグラフを表示する Flex ダッシュボード・アプリケーションのサンプルを示します。

Flex アプリケーションをブラウザーで実行するには、HTML ページに object タグを埋め込むだけです。このタグを使用して Flash Player がロードされ、適切なパラメーターが渡されます。リスト 1 は、このスクリプトの概要を示した例です。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
id="BasicDataGrid" width="482" height="348"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" 
value=" http://drill.svl.ibm.com/mashuphub/demo/Flex/FlexDataGridSample.swf"/>
	<param name="wmode" value="opaque"/>
	<param name="quality" value="high"/>
	<param name="bgcolor" value="#869ca7"/>
	<param name="allowScriptAccess" value="always"/>
<embed src= 
"http://drill.svl.ibm.com/mashuphub/demo/Flex/FlexDataGridSample.swf" quality="high"
bgcolor="#869ca7" width="482" height="348" name="BasicDataGrid" align="middle" 
play="true" loop="false" wmode="opaque" allowScriptAccess="always" 
type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer">
	</embed>
</object>

Flex の詳細については、Adobe のサイトを参照してください。

上に戻る

Flex アプリケーションの開発環境

Adobe から Flex アプリケーション開発用の各種ツールが提供されています。Flex Builder は Eclipse ベースの IDE で、コード補完やステップスルー・デバッグ機能などを備え、ドラッグ・アンド・ドロップ方式の表示レイアウトを採用しています。有償の Flex Builder の代わりに、無料の SDK も用意されています。Adobe ツールの詳細については、Adobe のサイトを参照してください。

上に戻る

Lotus Mashups の iWidget の開発

IBM Mashup Center wiki に、ウィジェット開発に関する役立つ情報があります。

iWidget を初めて開発する方にとっては、こちらのプレゼンテーション資料 が最適です。

iWidget 開発の詳細な説明はこの記事の対象範囲ではありませんが、Flex アプリケーションとの統合に関係する iWidget の主要コンポーネントとして、まずウィジェット定義 XML ファイルとウィジェットの JavaScript クラス・ファイルについて説明します。

ウィジェット定義 XML ファイル

このファイルは、次のような役割を果たします。

• JavaScript クラス・ファイルの指定。
  
  <iw:resource uri="FlexWrapper.js"/>
• ウィジェットでパブリッシュするイベントの定義。リスト 2 は、このウィジェットが sendData という名前のイベントをパブリッシュすることを示しています。

<iw:event id="sendData" published="true"   
    eventDescName="desc_sendData" /> 
<iw:eventDescription id="desc_sendData" payloadType="any" 
    description="This event sends data out." lang="en"> </iw:eventDescription>

• このウィジェットが処理するイベント、およびイベント受信時に呼び出されるメソッドの定義。リスト 3 は、このウィジェットが receiveData という名前のイベントを受信し、それによって関数 handleData をトリガーすることを示しています。

<iw:event id="receiveData" handled="true"    
      onEvent="handleData" description="receiveDataDesc"/>  
      <iw:eventDescription id="receiveDataDesc" payloadType="any" 
      description="Receive some data" lang="en">
</iw:eventDescription>

• モードのウィジェットに表示される内容の定義。これが、ウィジェットがマッシュアップ・ページにロードされたときに表示されるメイン・インターフェースになります。リスト 4 に示す例では、ウィジェットのビューには "Hello." を表示する <div> タグが記述されています。JavaScript を使用してこのタグの内側の HTML コードを操作することにより、実行時に別のコンテンツを表示することができます。

<iw:content mode="view">
   <![CDATA[ 
      <div id="_IWID_FlexDiv">
         Hello.
      </div> 
   ]]>
</iw:content>

• 編集モードのウィジェットに表示される内容（設定）の定義。リスト 5 に示すように、通常、設定タグにはユーザーが値を入力するためのいくつかの HTML 入力要素のほか、保存やキャンセルのボタンも含まれます。

<iw:content mode="edit">
    <![CDATA[
        <table>
        <tr>
            <td>Settings 1: 
            </td>
            <td><input id="param1" type="text" size="50">
            </td>
        </tr>
        <tr>
            <td>Settings 2: 
            </td>
            <td><input id="param2" type="text" size="50">
            </td>
        </tr>
    </table>
    <div class="mmDialogBottomArea">
    <a  
      href="javascript:iContext.iScope().cancelConfigData()" 
      id="_IWID_CONF_CANCEL" class="common_cancel">Cancel
     </a>
     <input id="_IWID_CONF_SAVE" class="lotusFormButton" 
         type="button" value="Save" name="save" 
         onclick="iContext.iScope().saveParams();" >
    </div>
   ]]>
</iw:content>

ウィジェットの JavaScript クラス・ファイル

このファイルには、ウィジェット・オブジェクトの実装が含まれます。このファイルのコードは、ウィジェットの初回ロード時に行われる初期化、および、他のウィジェットと通信するためのイベントのパブリッシングと処理を実行します。

上に戻る

Lotus Mashups での簡単な Flex アプリケーションの実行

前述のとおり、Web ページ内への Flex アプリケーションの埋め込みは、HTML ページに object タグを 1 つ追加するだけでできます。IBM Mashup Center には、マッシュアップ・ページへの HTML フラグメントの埋め込みにすぐに使用できるウィジェットが用意されています。

次の手順を実行します。

1. 「Tools (ツール)」でこのウィジェットを検索し、キャンバスにドラッグします。図 2 を参照してください。
   
   
   
   図 2. 「HTML マークアップ」ウィジェットの追加
   
   
   
2. 設定を編集し、図 3 のように、使用する Flex アプリケーションの Flex アプリケーション・スクリプトのタグを貼り付けます。
   
   
   
   図 3. 「HTML マークアップ」ウィジェットの設定
   
   
   
3. 「保存」をクリックします。この Flex アプリケーションは、マッシュアップ・ページで図 4 のように実行されます。
   
   
   
   図 4. 「HTML マークアップ」ウィジェットでの Flex アプリケーションの実行
   
   
   

このような方法で Flex アプリケーションを表示できるのは、すばらしいことです。しかし、Flex アプリケーションが他の iWidget と通信できなければ、Lotus Mashups と本当に統合されているとはいえません。ここからは、Flex アプリケーションと他の iWidget の通信フレームワークを設定するためのアーキテクチャーを説明します。

上に戻る

Flex アプリケーションと Lotus Mashups の統合

Flex と Lotus Mashups の統合において重要な概念は、ラッパーとなる Lotus Mashup iWidget の構築です。このラッパー iWidget は、次の 3 つの役割を果たします。

• Flex アプリケーションのユーザー・インターフェースの表示。
• iWidget イベントのパブリッシング。Flex アプリケーションからイベントを送信する場合は、まずこのラッパー iWidget にデータを送信すると、ラッパー iWidget が実際のイベントとデータを他の iWidget にパブリッシュします。
• iWidget イベントの処理。他の iWidget が Flex アプリケーションにイベントを送信すると、イベントはまずラッパー iWidget で処理されます。その後、ラッパー iWidget から Flex アプリケーションにデータが転送され、さらに処理が行われます。

サンプルの Flex アプリケーションとそれに対応するラッパー iWidget は、この記事の『ダウンロード』セクションにあります。この Flex アプリケーションにはいくつかのデータがプリロードされたデータ・グリッドが含まれています。ここでは、この Flex アプリケーションでイベントのパブリッシングと受信を行えるようにして、Flex アプリケーションを他の iWidget と接続する方法を示します。ラッパー iWidget を使用すると、Flex アプリケーションで選択したデータを別の iWidget に送信したり、他の iWidget からこの Flex アプリケーションに行を追加したりできます。

ファイル FlexDataGridSample.mxml には Flex アプリケーションのコードが含まれています (図 5 を参照してください)。また、FlexWrapper.war には、iWidget と Flex アプリケーションのバイナリーが含まれています。このウィジェットは、通常の iWidget と同じ方法で Mashup Center に構築できます。このウィジェットをアップロードして Lotus Mashup ページに追加したら、ウィジェットの設定を編集します。Flex アプリケーションの URL パラメーターの値は、次のようになります。

次の各セクションでは、このサンプル・ウィジェットの重要な要素を順に取り上げ、ラッパー iWidget と Flex アプリケーションがどのように統合されるかを示します。

ラッパー・ウィジェット内での Flex アプリケーションの表示

Flex アプリケーションを表示するには、ウィジェットのビュー内に object タグを挿入します。ラッパー iWidget の定義ファイル FlexWrapper.xml には、図 6 のように、Flex アプリケーション用のプレースホルダーとなる単純な div タグを含む view セクションが既に定義されています。

<iw:content mode="view">
   <![CDATA[ 
      <div id="_IWID_FlexDiv">
      </div> 
   ]]>
</iw:content>

ラッパー iWidget は、実行時に、Flex アプリケーションのロードを実行する object タグを組み立てます。このタグの組み立て方法については、FlexWrapper.js 内の関数 onview を参照してください。このタグには多数のパラメーターが必要です。ほとんどの値はハードコーディングできますが、ユーザーが指定する必要のある値や、実行時に自動生成される値もあります。例えば、このウィジェット・ラッパーでは、図 5 のように、ユーザーが Flex アプリケーション名、Flash ファイルの場所、およびウィジェットの寸法を渡せるようになっています。ユーザーがこのような変数を渡せるようにしておくと、パブリッシュおよび受信するイベントのリストが同じであれば、同じウィジェット・ラッパーを複数の Flex アプリケーションに再利用することができます。リスト 7 のコードは、生成する必要のあるタグのサンプルです。太字のパラメーターは動的に生成する必要があります。イタリックのパラメーターはユーザーから渡されますが、ハードコーディングすることもできます。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
id="XXXXXXXXX" width="482" height="348"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" 
value=" http://drill.svl.ibm.com/mashuphub/demo/Flex/FlexDataGridSample.swf"/>
	<param name="wmode" value="opaque"/>
	<param name="quality" value="high"/>
	<param name="bgcolor" value="#869ca7"/>
	<param name="allowScriptAccess" value="always"/>
	<param name="FlashVars" value="iWidgetID=XXXXXX"/>
<embed src= 
"http://drill.svl.ibm.com/mashuphub/demo/Flex/FlexDataGridSample.swf" quality="high"
bgcolor="#869ca7" width="482" height="348" name="XXXXXXXXXXX" align="middle" 
play="true" loop="false" wmode="opaque" allowScriptAccess="always" 
type="application/x-shockwave-flash"
FlashVars="iWidgetID=XXXXXXXXXX"
		pluginspage="http://www.adobe.com/go/getflashplayer">
	</embed>
</object>

それでは、動的に生成する必要のあるパラメーターを見てみましょう。object タグの id 属性と embed タグの name 属性は、マッシュアップ・ページ全体で一意的なものである必要があります。一意的でない場合、同じページにこのラッパー iWidget のインスタンスが複数存在した場合に、競合が発生します。iWidget フレームワークでは、対象ページにロードされるページごとに固有の ID が生成されます。このウィジェット ID は、次の呼び出しで取得できます。

ここでは、この ID を object タグの ID および名前の一部として使用し、ウィジェット・ラッパーの各インスタンスが必ず固有の ID を持つようにします。Flex ラッパーの onview 関数内を見ると、このウィジェット ID を取得し、変数 domID に保存していることがわかります。Flex アプリケーション名とこのウィジェット ID を次のように連結し、この文字列をタグの ID および名前として設定します。

このように、ラッパー iWidget の各インスタンスは固有の名前の付いたタグを持ちます。動的に生成する必要のある最終的なパラメーターは FlashVars の値です。FlashVars に定義される変数には、Flex アプリケーションの内部からアクセスできます。Flex アプリケーションは、実行時に、固有のウィジェット ID に基づいてラッパー iWidget オブジェクトの正しいインスタンスを特定する必要があります。このウィジェット ID は iWidgetID という名前の変数に保存されます。Flex アプリケーションがどのようにこの値を取得するかについては、この後のセクションで確認します。

正しいパラメーター値を持つ object タグの組み立てが終わったら、次の呼び出しを実行して、このタグを Flex アプリケーションのプレースホルダーである div タグ内に埋め込むことができます。

ウィジェットがロードされ、onview 関数がトリガーされると、図 6 のような Flash アプリケーションが表示されるようになります。

Flex から他のウィジェットへのイベント送信

Flex のユーザー・インターフェース・コンポーネントの大半は、ユーザー・イベントを処理できます。例えば、DataGrid コンポーネントは、ユーザーが任意の行をクリックするとイベントをトリガーします。この例では、ユーザーが任意の行をクリックしたら、選択した行のデータが別の iWidget に送信されるようにします。そのためには、次の 3 つの手順を実行する必要があります。

1. ウィジェット定義 XML 内で、パブリッシュするイベントを定義する（FlexWrapper.xml を参照してください）。
2. ラッパー iWidget 実装時にこのイベントをパブリッシュする、JavaScript 関数を実装する。
3. Flex アプリケーション内で、イベントを送信したいタイミングで JavaScript 関数を呼び出す。

イベントを定義するには、通常の iWidget の場合と同じ方法でリスト 8 のコード・スニペットをウィジェット定義 XML に追加します。

<iw:event id="sendData" published="true"   
    eventDescName="desc_sendData" /> 
<iw:eventDescription id="desc_sendData" payloadType="any" 
    description="This event sends data out." lang="en"> </iw:eventDescription>

イベントのパブリッシングに必要なコードは 1 行だけです。関数 sendData は、リスト 9 に示すコードを使用してイベントをパブリッシュします。

 sendData : function(data) {                    
      if(data != null){            
         this.iContext.iEvents.publishEvent("sendData", data);
      }
   }

最後の手順は、この JavaScript 関数 sendData を Flex アプリケーションから呼び出すことです。まず、Flex アプリケーション内に通常の手順でデータ・グリッド・コンポーネント用の Flex イベント・ハンドラーを定義します。ユーザーが任意の行をクリックすると、次のように関数 sendData が呼び出されます。

関数 sendData 内では、イベントをパブリッシュするための JavaScript 関数を検索して、呼び出しを行います。リスト 10 に方法を示します。

    public function sendData():void
    {           
      if (ExternalInterface.available) { 
     ExternalInterface.call(Application.application.parameters.iWidgetID + 
     "iContext.iScope().sendData", dgPeople.selectedItem);        
      } 
    }

ご覧のとおり、JavaScript 関数をトリガーするために必要なコードはわずか数行です。ExternalInterface は、Flex アプリケーションの外部オブジェクトを呼び出せる Flex オブジェクトです。適切なラッパー iWidget を検索するには、次の呼び出しを実行します。

iWidgetID という言葉に聞き覚えはありませんか。iWidgetIDは、前のセクションで設定した値です。この値を FlashVars パラメーター内で設定しているので、Flex アプリケーションはその値を取得し、適切な関数を検索して呼び出します。dgPeople.selectedItem という値には、データ・グリッドで選択された行が JSON 形式で含まれています。図 7 に、このアーキテクチャー全体を示します。

ラッパー iWidget は、通常の「イベント・エクスプローラー」ウィジェットにワイヤリングできます。ユーザーが Flex ラッパー・ウィジェットから任意の行を選択すると、図 8 および図 9 に示すように、データが JSON としてイベント・エクスプローラーに送信されます。

他のウィジェットからのイベントの Flex 内での処理

Flex 内で iWidget イベントを処理する場合も、同じ方法で実行できます。これには、次の 4 つの手順を実行する必要があります。

1. ラッパー iWidget 内で処理するイベントを定義する。
2. Flex アプリケーション内で、他の Flex アプリケーションの場合と同様にイベント・ハンドラーを実装する。このデータ・グリッドのサンプルでは、いくつかの文字列を受け付けてグリッドに 1 行追加する receiveData というハンドラーを作成します。
3. Flex アプリケーション内で、イベント・ハンドラー receiveData を公開するためのコールバック関数を登録する。このコールバックにより、ラッパー iWidget はイベント受信時にこの関数をトリガーできるようになります。
4. ラッパー iWidget 内でこのイベント・ハンドラーを実装し、Flex のコールバック関数を呼び出す。

ラッパー iWidget では、まず受信するイベントを XML 実装ファイル内に定義します。リスト11 を参照してください。

<iw:event id="receiveData" handled="true"    
      onEvent="handleData" description="receiveDataDesc"/>  
      <iw:eventDescription id="receiveDataDesc" payloadType="any" 
      description="Receive some data" lang="en">
</iw:eventDescription>

このコードを使って、他のウィジェットからラッパー iWidget にデータを渡すことができます。イベントを受信すると、handleData 関数がトリガーされます（この関数は後で実装します）。

最初に Flex にハンドラーを実装する必要があります。このサンプルの Flex データ・グリッドでは、数人の社員の名前、役職、および年齢を表示しています。ここでは、このリストに社員を 1 人追加するためのハンドラーを実装します。リスト 12 を参照してください。

    public function receiveData(name:String, title:String,
      age:String):void
    {
      (dgPeople.dataProvider as ArrayCollection).addItem(
          {Name: name, Title: title, Age: age});
    }

リスト 12 の変数 dgPeople は、社員のリストを表示する Flex データ・グリッド・オブジェクトへの参照です。では、JavaScript はどのように Flex 関数をトリガーするのでしょうか。必要なのは、コールバックの追加だけです。まず、リスト 13 のように、Flex アプリケーションの初期化の実行時にトリガーされる、initApp() という名前の関数を作成します。

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
      layout="absolute" width="482" height="348" 
      initialize="initApp()">

initApp() 内で、関数 receiveData を公開するためのコールバックを追加します。リスト 14 を参照してください。

   public function initApp():void
   {
      if (ExternalInterface.available)
        ExternalInterface.addCallback("receiveData", receiveData);  
   }

最後の手順は、Flex のコールバックをトリガーするための iWidget イベント・ハンドラーの実装です。Flex のコールバックを検索するには、まずタグの名前で Flex アプリケーションを検索する必要があります。『ラッパー・ウィジェット内での Flex アプリケーションの表示』セクションで、Flex ラッパー・ウィジェットのタグの ID を this.flexAppName + this.domID と指定しました。これが Flex アプリケーションの検索に使用する ID になります。リスト 15 に示すコード・スニペットでは、Flex アプリケーションを検索し、receiveData 関数をトリガーしています。

    
    handleData: function(JSONpayload) { 	      
        var data = eval('(' + JSONpayload.payload + ')');    	     	    
        this.getFlexApp(this.flexAppName + this.domID).receiveData(
           data.Name, data.Title, data.Age);  
    },
    getFlexApp: function(appName) {
        if (navigator.appName.indexOf ("Microsoft") !=-1) {
            return window[appName];
        } else {
        return document[appName];
        }
    }
    

handleData 関数は JSON データを処理するように実装されていますが、必要であればカスタマイズして、別のタイプのデータを処理するようにしてもかまいません。図 10 に、このアーキテクチャーの概要を示します。

以上で、このウィジェットをワイヤリングし、いくつかのイベントを処理する準備が整いました。この例では、「User Input (ユーザー入力)」ウィジェットを使用して、新しい社員データを入力できるフォームを作成することができます。その後、入力された値を JSON として Flex ラッパー・ウィジェットにワイヤリングすることができます。次の手順を実行します。

1. 「Favorites（お気に入り）」ドロワーから「User Input （ユーザー入力）」ウィジェットをドラッグします。図 11 を参照してください。
   
   
   
   図 11. 「User Input （ユーザー入力）」ウィジェットの追加
   
   
   
2. 設定を編集して、図 12 のように「Name」、「Title」、および「Age」という名前の 3 つのテキスト・ボックスを追加します。
   
   
   
   図 12. 「User Input （ユーザー入力）」ウィジェットの設定
   
   
   
3. 「User Input (ユーザー入力)」ウィジェットを Flex ラッパー iWidget にワイヤリングします。図 13 を参照してください。
   
   
   
   図 13. 「User Input (ユーザー入力)」ウィジェットの Flex ラッパーへのワイヤリング
   
   
   
4. これで、ウィジェットが接続されました。新しい社員の名前を「User Input （ユーザー入力）」ウィジェットに入力し、「Submit（送信）」をクリックすると、図 14 のように新しい名前が Flex データ・グリッドに表示されます。
   
   
   
   図 14. 「User Input （ユーザー入力）」ウィジェットから Flex ラッパーへのデータ送信
   
   
   

おめでとうございます。これで iWidget 内に Flex アプリケーションを無事にラップできました。これにより、Flex アプリケーションは iWidget イベントのパブリッシュと処理を実行し、他の iWidget と通信できるようになりました。

上に戻る

まとめ

この記事では、Flex アプリケーションと IBM Mashup Center の統合を可能にするアーキテクチャーについて、順を追って説明しました。Flex と iWidget の統合において重要な概念は、ラッパー iWidget の構築です。このラッパー iWidget により、Flex アプリケーションは他の iWidget へのイベント・パブリッシングや他の iWidget からのイベント処理を実行することができます。また、サンプル・アプリケーションを使って、Flex データ・グリッド・オブジェクト内のコンテンツを「イベント・エクスプローラー」iWidget に送信したり、「User Input（ユーザー・インプット）」iWidget に入力されたコンテンツを受け取って Flex データ・グリッドに追加したりする方法を示しました。この記事で説明しているメカニズムを使用すれば、ツリー・ビューやグラフなどの他の Flex ユーザー・インターフェース・コンポーネントも IBM Mashup Center に統合することができます。マッシュアップ作成者は、Flex の機能を活用することで、作成するマッシュアップの機能を拡張することができます。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

• ディスカッション・フォーラムに参加してください。
  
  
• iWidget の仕様 について
  
  
• IBM Mashup Center について
  
  
• IBM Mashup Center wiki の Wiki の参照、投稿
  
  
• IBM Lotus Mashups について
  
  
• Adobe Flex について
  
  
• Flex 開発の無料ビデオ・トレーニング
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• はじめに
• Flex アプリケーションの概要
• Flex アプリケーションの開発環境
• Lotus Mashups の iWidget の開発
• Lotus Mashups での簡単な Flex アプリケーションの実行
• Flex アプリケーションと Lotus Mashups の統合
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント