IBM WebSphere Portlet Factory V6.0.1 は、WebSphere 開発者が開発をスピードアップすることができるツール・セットです。この製品には、バージョンアップの都度、追加のビルダーが搭載されますが、その多くは、広範な Web 機能を開発物に組み込む作業を簡素化するよう設計されています。WebSphere Portlet Factory のバージョン 6.0.1 には、Ajax ベースの機能の追加作業を簡素化することのできるビルダーが搭載されています。この記事では、これらの新しいビルダーについて説明し、サンプル・ポートレット・アプリケーションを通じてその使用方法を解説します。この記事では、読者が Eclipse または IBM Rational Application Developer for WebSphere Software のいずれかで WebSphere Portlet Factory を使用してポートレットを構築する方法を十分に理解していることを前提としています。

WebSphere Portlet Factory は、ポートレットを構築するための Rapid Application Development ツール・セットです。この製品により、開発者は新しいビルダーを利用して、構築するモデルに Ajax ベースおよび Dojo ベースの両方の機能を追加することができます。これらのビルダーでは、豊富なユーザー・インターフェース・エレメントがサポートされています。例えば、ポートレット内、またはポートレット間でのオブジェクトのドラッグ・アンド・ドロップ、ポートレット・ページ・ビューのインライン編集、マウスが指定されたページ領域の上を移動した時に追加のデータを表示するオーバーレイ・ウィンドウまたはポップアップ・ウィンドウなどです。 この記事では、Ajax と Dojo に関する基本情報と、Web アプリケーションにおけるそれらの利点について解説します。また、新しい WebSphere Portlet Factory ビルダーを音楽ストアのサンプル・ポートレット・アプリケーションに追加するプロセスを説明することにより、ビルダーを組み込む方法を示します。

Ajax の概要

Web 開発は、当初は静的な Web ページのオーサリングが中心でしたが、現在では GET および POST フォーム・アクションを活用して完全なページ・コンテンツを Web サーバーに送信する Web ページに進化しています。この進化により、ユーザーは、サーバーがユーザー・イベントを処理して、更新後のページを表示するまで待たなければならなくなりました。Ajax を使用すると、ユーザーはデータの一部を Web ページからサーバーへ非同期に送受信することができるようになります。ブラウザーは、ページ全体のリフレッシュを実行する必要なく、リモート Web サーバーへの往復を使用して、ユーザー・イベントに応答し、サーバー・ベースのデータを取り込んでページの各部分を更新することができます。パフォーマンスが向上し、ユーザーは、処理中のページ更新を待たずに他のページの操作を実行することができます。

Ajax は、以下のような既存の Web ベースのテクノロジーを利用しています。

• DHTML
• JavaScript
• XML
• XSL
• Document Object Model (DOM)

これらのコンポーネント・テクノロジーを組み合わせただけでは、何ら新しいものは提供されません。Ajax が、単にこれらのコンポーネントを集めただけのものと異なるのは、XMLHttpRequest と呼ばれるクライアント・サイド DOM から提供される機能を使用して、これらのコンポーネントを集約している点です。WebSphere Portlet Factory V6.0.1 では、新しい Ajax ベースおよび Dojo ベースのビルダーが提供されることにより、これらの機能を WebSphere アプリケーションに追加する作業が簡素化されます。

上に戻る

Dojo の概要

Ajax を Web ページに実装するには、JavaScript コードを記述する必要があります。JavaScript はこれまで、ブラウザー・サポートが一貫していない、といった問題を常に抱えていました。そこで、この制約を解消しようとする新しい枠組みがいくつか登場しました。その 1 つが、オープン・ソースの JavaScript ツールキットである Dojo です。

Dojo は、強力な JavaScript ライブラリーのセットであり、多数の機能をより簡単に実装することが可能な、使いやすい API を搭載しています。Dojo では、イベント処理などの反復タスク向けに開発された交換可能な JavaScript ライブラリーを利用できるため、比較的一般的な JavaScript 機能を記述する必要がなくなります。また、各種ブラウザーによる Ajax サポートが一貫していないという問題の一部、および JavaScript の弱点とされてきたメモリー・リークの問題も克服されます。さらに、XMLHttpRequest メカニズムがサポートされるため、開発者が XMLHttpRequest を直接操作する必要がありません。また、ストリングと Document Object Model の操作、ドラッグ・アンド・ドロップのサポート、およびリスト、キュー、スタックなどの複合データ構造体のためのパッケージも提供されます。

上に戻る

サンプル・アプリケーションの概要

サンプルの音楽ストア・アプリケーションは、以下のコンポーネントで構成されています。

Albums Listing ポートレット

このポートレットは、ユーザーに対し「Album List」ページ・ビューと「Search Album Catalog」ページ・ビューを表示するものです。「Album List」ページ・ビューは、音楽カタログ全体、またはタイトルやアーティスト名での検索結果のいずれかを表示します。「Album List」ページの「Image」列は、Dojo のドラッグ・アンド・ドロップ・ソースとして機能します。Albums Listing ポートレットの表示例は図 1 のとおりです。

また、Albums Listing ポートレットは、「Search Albums Catalog」ページ・ビューも表示します。「Search Albums Catalog」ページ・ビューの「Search Value」編集フィールドは、図 2 のように「Search By」で選択された検索条件に適切なデータを使用した Ajax 先行入力をサポートします。

Albums Cart ポートレット

このポートレットは、Dojo のドラッグ・アンド・ドロップ・ターゲットとなる単一のページ・ビューで構成されます。Albums Cart ポートレットは、Albums Listing ポートレットから Albums Cart ポートレットにドラッグされたアルバムの集計リストを作成します。また、表示された各アルバムについて Dojo Inline Editor コントロールを動的に生成します。このコントロールを使用すると、ポートレット・ページをリフレッシュすることなく、該当するアルバムをカートから削除することができます。また、このポートレットは、図 3 のように、カートに追加されたアルバムの合計金額の最新表示を生成します。

上に戻る

サンプル・アプリケーションの作成

次に、これからサンプル・ポートレット・アプリケーションで使用するための、さまざまな Ajax ベースおよび Dojo ベースのビルダーを追加します。このアプリケーションは、2 つのポートレットで構成されており、音楽ストアというテーマに基づいています。2 つのコンシューマー・ポートレットにデータを提供するためのサービス・プロバイダー・モデルも定義されています。

WebSphere Portlet Factory プロジェクトの作成

WebSphere Portlet Factory V6.0.1 では、以下の開発 IDE がサポートされています。

• IBM Rational Application Developer V6.0 または V7.0
• Eclipse 3.1 以降

音楽ストア・プロジェクトを作成するには、以下の手順に従います。

1. Eclipse または Rational Application Developer のメニューから、「Window」 > 「Open Perspective」 > 「Other」を選択します。
2. 「Select Perspective」ダイアログ・ボックスのリストから、「WebSphere Portlet Factory」パースペクティブを選択します。
3. 「WebSphere Portlet Factory」パースペクティブを開き、「File」 > 「New」 > 「WebSphere Portlet Factory Project」を選択します。
4. プロジェクト名を尋ねるメッセージが表示され、プロジェクトに組み込む機能セットをリストから選択するよう求められます。このアプリケーションには、図 4 のように、Dojo Extension 機能を選択する必要があります。
   
   図 4. Dojo Ajax Extension のサポートの追加
   
   
   
5. 次に、デプロイメント構成について尋ねるメッセージが表示されます。使用するテスト環境に関連する詳細情報を入力します。開発の変更を即時にサーバーに反映させる場合には、「Auto Deploy」オプションを選択します。
6. 「New Project」ウィザードによって要求が処理されている間、以下のことを尋ねるメッセージが表示されます。 Would you like to add the following jars from the Feature Set to the project Java build path?
   WEB-INF/work/lib/dojo_builder.jar
   WEB-INF/work/lib/dojo_builders_nl1.jar
   Click Yes.

サービス・プロバイダー

このプロジェクトで最初に定義するモデルは MusicStoreProvider です。このモデルは、コンシューマー・ポートレットによってポートレットのさまざまなユーザー・インターフェース・エレメントに関連するデータを取得するために MusicStoreProvider の公開されたサービス演算を通じてクエリーが行われたアーティスト、アルバム、および曲名のセットを定義するものです。それぞれのサービス演算は、Service Definition ビルダーに関連付けられており、Action List または Method ビルダーのいずれかにマッピングして、音楽ストア・アプリケーションのコンシューマー・ポートレットから要求されたデータを返します。各サービス演算から返されたデータは、Variable ビルダーから取得されたもので、プロバイダー・モデル内に内蔵されており、読み取り専用です。MusicStoreProvider モデル内には、定義された Dojo ベースまたは Ajax ベースのビルダーはありません。以下に示すのは、MusicStoreProvider モデルによって定義されるサービス演算と、その意図された目的の概略のリストです。

• getAlbumsList: getAlbumsList サービス演算は、設定された検索条件に基づくアルバムのリストを返します。この演算は、searchParameter と searchValue という 2 つの引数をとります。searchParameter 引数は、検索がアーティストに基づくものか、またはアルバム名に基づくものかを定義します。searchValue 引数は、「searchParameter」フィールド・データ内で検索する値を特定します。両方の引数が NULL である場合には、アルバムの全リストが返されます。
• getTracksForAlbum: このサービス演算が呼び出されると、getTracksForAlbum アクション・リストが起動され、指定されたアルバムのトラックのリストが返されます。
• getAlbumDetails: このサービス演算が呼び出されると、指定されたアルバムの属性のセット (タイトル、価格、ジャンルなど) が返されます。このサービス演算は、Albums Cart ポートレットがアルバムの詳細情報をカートに追加するために使用されます。
• getSearchValues: このサービス演算は、Albums List ポートレットによって呼び出されて、検索するアーティストのリストまたはタイトルのリストを取得します。このサービス演算は、getSearchValues Method ビルダーを呼び出し、タイトルまたはアーティストのいずれを検索するかを特定する 1 件のインプットを受け入れます。この演算の結果は、Ajax TypeAhead ビルダーのための先行入力値を自動入力するために使用されます。

サービス・コンシューマー

音楽ストア・アプリケーションでは、Albums Listing ポートレットと Albums Cart ポートレットという 2 つのサービス・コンシューマー・ポートレットを作成する必要があります。各ポートレットの説明は以下のとおりです。

• Albums Listing ポートレット: このポートレットは、アルバムのリスト表示を担います。全アルバムのリスト、またはタイトルかアーティスト名での検索の結果を表示します。
• Albums Cart ポートレット: このポートレットは、購入するアルバムを集計してリストを作成するために使用されるアルバム・カート機能を実装します。

Albums Listing ポートレットの作成

Albums Listing モデルを作成するには、以下の手順に従います。

1. 「File」 > 「New」 > 「WebSphere Portlet Factory Model」を選択します。先ほど作成した WebSphere Portlet Factory プロジェクトを選択して、各モデルをこのプロジェクトに関連付けます。それぞれに空のモデルを選択して、「Next」をクリックします。図 5 を参照してください。
   
   図 5. 空のモデルの作成
   
   
   
2. 新規モデルに関連付ける WebSphere Portlet Factory プロジェクトを選択するよう求めるメッセージが表示されます。先ほど作成したプロジェクトを選択して、「Next」ボタンをクリックします。
3. Service Consumer ビルダーをモデルに追加して、MusicStoreProvider モデルによって作成されたサービスにアクセスするようにします。以下の設定を使用します。
   • 「Provider Model」フィールドに「musicstore/data/MusicStoreProvider」と入力します。
   • 「Add All Provider Operations」オプションを選択します。
   • ビルダーの「Apply」ボタンをクリックします。
4. 次に、Portlet Adapter ビルダーを追加して、モデルにポートレット・サポートを追加します。Portlet Title ビルダー・インプットによって、ポータル・サーバー内のポートレットの名前が定義されます。図 6 を参照してください。
   
   図 6. ポータルへのデプロイメントのサポートを追加する Portlet Adapter ビルダー
   
   
   
5. 図 7 のように Action List ビルダーを追加し、Name ビルダー・インプットを「main」に設定します。このビルダーは、ページ内でポートレットが起動した時に最初に呼び出されるビルダーです。以降の手順で、Actions ビルダー・インプットを「main」として追加します。
   
   図 7. Albums Listing ポートレットのメイン・アクション・リスト
   
   
   

「Albums List」ページの作成

「Albums List」ページを作成するには、以下の手順に従います。

1. Page ビルダーを Albums Listing ポートレットに追加し、これに「albumsListPage」という名前を付けます。
2. リスト 1 の HTML を、Page Contents ビルダー・インプットに貼り付けます。

リスト 1. 「Albums List」ページの HTML コンテンツ

<html>
   <span name="stylesheet"></span>
    <body>
        <! As a best practice, change the form name to a unique name >
        <form name="myForm" method="post">
            <div align="center">
            		<span name="namedTag" style="font:12pt Arial;
            		font-weight: bold;color: #336699;">Albums Catalog</span>
               		<span name="albumnsList"></span>
            		<br>
            		<span name="searchButton" /><span name="completeListing" />
            </div>
        </form>
    </body>
</html>

3. もう 1 つ Action List ビルダーを追加し、これに「getAlbumListing」という名前を付けます。このアクションは、アルバム・リストを取得するためのサービス・プロバイダーの呼び出しを行います。両方のパラメーターに NULL 値を設定すると、getAlbumsList サービス演算によって、アルバムの完全なリストが返されます。このアクション・リストについては、searchParameter パラメーターと searchValue パラメーターを NULL に設定して、getAlbumsList サービス演算の呼び出しが行われるようにします。結果を表示する albumsListPage の呼び出しを行って、getAlbumListing の Actions ビルダー・インプットを終了します。この時の設定は以下のようになります。
   • 「Properties」の下の「Name」フィールドに「getAlbumListing」
   • 「Arguments」の下の「Return Type」フィールドに「Object」、「Actions」フィールドの「ActionList」の下に以下のエントリー: Assignment!Variables/ServiceConsumerGetAlbumsListInputs/arguments/searchParameter= Assignment!Variables/ServiceConsumerGetAlbumsListInputs/arguments/searchValue= DataServices/ServiceConsumer/getAlbumList albumsListPage
4. 「OK」をクリックするか、getAlbumListing Action List ビルダーに適用します。
5. getAlbumListing Action List ビルダーをモデルに追加してから、先ほど作成したメイン Action List ビルダーをいったん閉じて再度開き、getAlbumListing アクション・リストへの呼び出しをメインの Actions ビルダー・インプットに追加します。以下の設定を入力します。
   • 「Name」フィールドに「main」と入力します。
   • 「Return Type」フィールドに「Object」と入力します。
   • 「Actions」フィールドの「ActionList」の下に「getAlbumListing」と入力します。
6. Data Page ビルダーの呼び出しを追加して、getAlbumsList サービス演算の結果が表示されるようにします。これは、全アルバムの初回の表示と、タイトルまたはアーティストによるアルバム検索結果の両方に適用されます。Data Page ビルダーの呼び出しを構成して、そのデータが先ほど作成した albumListPage の albumList スパン・タグに書き込まれるようにします。このビルダーにより、getAlbumsList サービス演算への呼び出しにより自動入力される MusicLibrary 変数が表示されます。図 8 を参照してください。
   
   図 8. albumsListPage のための Data Page ビルダー・インプット
   
   
   
7. Image ビルダーを追加して、前の Data Page ビルダーを使用して表示されるアルバム・データの左端の列の表示形態を決定します。サンプル・アプリケーションでは、各アルバムのイメージが定義されます。この定義は、albumListVar Variable ビルダーの Image エレメント内のデータを使用して行われます。以下の設定を入力します。
   • 「Name」フィールドに「albumImage」と入力します。
   • 「Page Location」の下の「Page」フィールドに「albumsListPage」と入力します。
   • 「Page Location」の下の「Tag」フィールドに「Image」と入力します。
   • 「Image Source」フィールドに「${VariablesAlbumLoopVar/Album/Image}」と入力します。
   
   
   図 9. Image ビルダー・インプット
   
   
   
8. 次に、2 つの Button ビルダーをページに追加して、それぞれ searchButton での Search Albums と Get Complete Listing の機能、および albumListPage の completeListing スパン・タグを追加します。これらのビルダー・インプットについては、「ダウンロード」セクションのサンプル・コードを参照してください。
9. ピック・リストを使用して、「Complete Listing」ボタンの「Actions」インプットを「getCompleteListing」に設定します。Search Albums Button ビルダーの「Actions」インプットは、この時点では空白にしておきます。これらのビルダー・インプットについては、「ダウンロード」セクションのサンプル・コードを参照してください。
10. モデルを実行すると、図 10 のように「Albums List」ページが表示されます。
    
    図 10. 「Albums List」ページ・アウトプット
    
    
    

上に戻る

Dojo ドラッグ・ソース機能を追加する

Dojo のドラッグ・アンド・ドロップ・サポートをポートレット・アプリケーションに追加するには、ドラッグ・アンド・ドロップ・ソースとドラッグ・アンド・ドロップ・ターゲットの両方を定義します。ドラッグ・アンド・ドロップ・ソースは、開始点からドラッグされるソースです。ドラッグ・アンド・ドロップ・ターゲットは、ドラッグ・アンド・ドロップ・ソースからドロップ・イベントを受け取ります。通常、メッセージが、ドラッグ・アンド・ドロップ・ソースからドラッグ・アンド・ドロップ・ターゲットに引数の形で引き渡されます。ドラッグ・アンド・ドロップ・ターゲットは、この引数を受け取って、アクションを実行します。図 11 では、Album Catalog の「Image」列によって、Album Cart のショッピング・カート・イメージが受け取って処理することができるドラッグ・アンド・ドロップ・ソースが定義されています。

アルバムのイメージを Albums Listing ポートレットからドラッグして、これを Albums Cart のショッピング・カート・アイコンにドロップすると、アルバムがアルバム・カートに追加され、合計金額が更新されます。このアクションの結果は図 12 のようになります。

ドラッグ・サポートを Albums Listing ポートレットに追加するには、Dojo Drag Source ビルダーを albumsListPage の「Image」列に追加します。これにより、当該列の Image エレメントを通じて各アルバムに関連付けられたグラフィックが、アルバム固有のドラッグ・アンド・ドロップ・ソースのメッセージとして機能することが可能になります。albumsListPage と Image の Page ビルダー・インプットと Tag ビルダー・インプットにそれぞれ関連付けてください。

また、Drag Source Data ビルダー・インプット「${Variables/AlbumLoopVar/Album/AlbumID}」と albumID の Drag Type を指定する必要があります。これらのビルダー・インプットにより、ドラッグ・ソースからドロップ・ターゲットに対し、データ駆動型の引数が指定されるようになります。この場合、Dojo Drag Source ビルダーから Dojo ドロップに対し、ドラッグされたイメージに関連付けられた albumID が引き渡されます。

「Dojo Drag Source」ダイアログ・ボックスで、以下の設定を入力します。

• 「Page location」フィールドで、「On Named Page」を選択し、「Page」フィールドに「albumsListPage」、「Tag」フィールドに「Image」と入力します。
• 「Drag Source Data」フィールドに「${Variables/AlbumLoopVar/Album/AlbumID}」と入力します。
• 「Drag Type」フィールドに「albumID」と入力します。

Dojo ドロップ・ターゲットサポートが後ほど Albums Cart ポートレットに追加されます。

Dojo ツールチップ・サポートの追加

WebSphere Portlet Factory の Dojo Tooltip ビルダーは、マウスオーバーに基づくポップアップ・ウィンドウの表示を担います。このポップアップ・ウィンドウは、Albums Listing ポートレットで、マウスを「Title」列のエントリーの上に置いた時に表示されます。図 13 のように、「AlbumsList」ページで、Album Listing の「Title」列内でマウスが上に置かれたアルバムのトラック・リストを表示する Dojo Tooltip ベースのポップアップ・ウィンドウが表示されます。

Dojo ベースのツールチップ・ウィンドウを実装するには、以下の手順に従います。

1. tracksPage Page ビルダーを Albums Listing ポートレットに追加し、リスト2 の HTML を Page Contents ビルダーに追加します。

<html>
    <body>
        <! As a best practice, change the form name to a unique name >
        <form name="myForm" method="post">
            <div align="center"  bgColor="#809FFF">
            	<span name="tracks"></span>
            </div>
                       
        </form>
    </body>
</html>
tracksPage HTML

2. tracksPage Data Page ビルダーを追加します。このビルダーを構成して、GetTracksForAlbum サービス演算によって生成された Tracks 変数のコンテンツが表示されるようにします。このビルダーは、その結果を tracksPage のトラック・タグに置きます。このビルダー呼び出しのための設定は以下のとおりです。
   • 「Name」フィールドに「tracksPage」と入力します。
   • 「Variable」フィールドに「Variables/ServiceConsumerGetTracksForAlbumResults/Tracks」と入力します。
   • 「Page in Model」フィールドに「tracksPage」と入力します。
   • 「Page Type」フィールドで、「Infer from HTML」オプションを選択します。
   • 「Make UI from Data」オプションを選択します。
   • 「Location for New Tags」フィールドに「tracks」と入力します。
3. tracksDataColumnModifier Data Column Modifier ビルダーを追加し、以下のビルダー・インプットを入力します。
   • 「Name」フィールドに「tracksDataColumnModifier」と入力します。
   • 「Container Field」フィールドに「[tracksPage]tracksPage/Tracks/Track」と入力します。
   • 「Delete Column Style」フィールドに「No Delete Column」と入力します。
   • 「Manage Columns」オプションを選択します。
4. showTracksListingForAlbums Action List ビルダーを追加します。
5. Arguments Action List ビルダー・インプットを使用して、ビルダーに Stringタイプの albumID 引数を割り当てます。
6. Assignment を Actions ビルダー・インプットに追加して、albumID 引数が Service Consumer ビルダーによって定義される GetTracksForAlbum サービス・インプット変数に引き渡されるようにします。
7. Actions ビルダー・インプットを追加して、tracksPage Page ビルダーが表示されるようにします。 showTracksListingForAlbums Action List ビルダーのための設定は以下のとおりです。
   • 「Name」フィールドに「showTracksListingForAlbums」と入力します。
   • 「Arguments」フィールドに、「albumID」を名前として、「String」をデータ・タイプとして入力します。
   • 「Return Type」フィールドに「Object」と入力します。
   • 「Actions」フィールドに以下の Action List アイテムを入力します。Assignment/Variables/ServiceConsumerGetTracksForAlbumInputs/arguments/albumID=${Arguments/albumID} DataServices/ServiceConsumer/getTracksForAlbumtracksPage
8. tracksListDojoControl Dojo Tooltip ビルダーを追加します。
9. Page Location ビルダー・インプットを設定して、albumsListPage の Title タグが変更されるようにします。
10. Action タイプの Tooltip Type ビルダー・インプットを選択します。
11. Tooltip Action を設定して、手順 1 で定義した showTracksListingForAlbumsツールが呼び出されるようにします。 Dojo Tooltip ビルダーのための設定は以下のとおりです。
    • 「Name」フィールドに「trackListDojoControl」と入力します。
    • 「Page location」セクションで、「On Named Tag」オプションを選択し、「Page」フィールドに「albumsListPage」、「Tag」フィールドに「Title」と入力します。
    • 「Tooltip Type」として「Action」オプションを選択します。
    • 「TooltipAction」フィールドに「showTracksListingForAlbums」と入力します。
    • 「Input Mapping」フィールドで、「AlbumID」を名前として、「${Variables/AlbumLoopVar/Album/AlbumID}」を値として入力します。

注>: このビルダーを使用する時には、Tooltip Type として Text または Action のいずれかを選択することができます。albumsListPage は Action ToolTip を定義します。これに対して Text Tooltip Type では、Variables、DataServices 戻り値、MethodCall 結果などを表示できます。

「Search Albums」ページの作成

ここから、主に Ajax 関連の設計物に焦点を当てて、「Search Albums」ページ・ビューを Albums Listing ポートレットに追加する作業に進みます。完全なリストは、この記事の「ダウンロード」セクションにあるサンプル・コードを参照してください。

まず、searchPage Page ビルダーの追加を行います。リスト 3 の HTML を、searchPage Page ビルダーの Page Contents ビルダー・インプットに追加します。

リスト 3. 「searchPage」ページ・コンテンツ HTML ビルダー・インプット

<html>
   <span name="stylesheet"></span>
    <body>
        <! As a best practice, change the form name to a unique name >
        <form name="myForm" method="post">
            <div align="center">
            	<span name="namedTag" style="font:12pt Arial;font-weight: bold;
            	color: #336699;">Search Albums Catalog</span>
            </div>            
             <div align="left">
             	<span name="searchDialog"
            		<span name="searchCriteria"></span>
             		<span style="width:100px" name="searchButton" /> 
             		<span style="width:100px" name="backButton" />
             	<span>	
            </div> 
        </form>
    </body>
</html>

Ajax 先行入力サポートの追加

Ajax Type-Ahead 機能は、文字入力中に選択可能な値のリストが表示され、ユーザーが候補から選択することができる機能です。Albums Listing ポートレットでは、「Search Value」編集フィールドでこの機能を活用します。音楽ストア・アプリケーションでは、ユーザーがアーティスト名またはタイトルによって検索を行うことができます。Ajax Type-Ahead 機能の先行入力データは、検索条件による選択された検索に基づくものです。「Search Value」フィールドへの入力中に、「Search Value」フィールドへの入力内容を使用したリスト・ボックスが表示され、既知の値のリストの詳細表示とフィルタリングを行って、ソートされたリストを表示することができます。図 14 は、Ajax Type-Ahead ビルダーによって、E で始まるアーティスト名での検索のための検索語候補が表示される例です。

Ajax Type-Ahead ビルダーは、HTML ページ内のスパン・タグに対して作動します。そのためには、Lookup Table Used ビルダー・インプットを指定して、先行入力データのセットを特定する必要があります。Ajax 先行入力サポートを Music Cart アプリケーションに追加するには、以下の手順に従います。

1. searchVar Variable ビルダーをモデルに追加します。このビルダーは、検索パラメーターを定義するために使用されるXML 変数を作成します。
   • 「Name」フィールドに「searchVar」と入力します。
   • 「Type」フィールドに「XML」と入力します。
   • 「Initial Value」フィールドに以下の XML を入力します。
     
     

     <Search> <SearchBy></SearchBy> <SearchValue></SearchValue> </Search>

     
     
2. searchDataPage Data Page ビルダーをモデルに追加します。Page Type ビルダー・インプットを「Data Entry」に設定して、ユーザーが検索条件を指定できるようにします。その後 Data Page ビルダーが、searchVar ビルダーがページ上に表示された結果として、SearchBy タグと SearchValue タグを追加します。
3. searchByLookup Variable ビルダーをモデルに追加します。このビルダーは、ユーザーが検索を行うための検索基準のリストを定義します。
4. SearchBy Data Field 修飾子を追加し、Fields ビルダー・インプットを「[searchPage]searchDataPage/Search/SearchBy」に設定します。これにより、Data Field 修飾子の有効範囲が、手順 1 で定義した SearchBy エレメントに設定されます。
5. 「HTML Event Action」ダイアログ・ボックスで以下の設定を入力することにより、onChangeSearch HTML Event Action ビルダーを追加して、onChangeSearchByAction Action List ビルダーが起動されるようにします。
   • 「Name」フィールドに「onChangeSearch」と入力します。
   • 「Page Location」セクションで、「On Named Tag」オプションを選択し、「Page」フィールドに「searchPage」、「Tag」フィールドに「SearchBy」と入力します。
   • 「Event Name」フィールドに「onChange」と入力します。
   • 「Action Type」フィールドに「Submit form and invoke action」と入力します。
   • 「Action」フィールドに「onChangeSearchByAction」と入力します。
   この Action List は、ユーザーの「Search By」選択値を保管し、Service Consumer ビルダーを起動してサービス・プロバイダーから該当する検索値のリストを取得し、検索ページを再ロードします。
6. searchValuesLookup Lookup Table ビルダーをモデルに追加し、その XML Data ビルダー・インプットを、getSearchValues サービス演算の結果に設定します。この変数は、Service Consumer ビルダーをモデルに追加した結果として、WebSphere Portlet Factory によって生成されます。Lookup ビルダーに以下のインプットを入力します。
   • 「Name」フィールドに「searchValuesLookup」と入力します。
   • 「DataSource」フィールドで「XML Data」を選択します。
   • 「XML Data」フィールドに「${Variables/ServiceConsumerGetSearchValuesResults/Rowset}」と入力します。
   • 「Variable Type」フィールドについては、「Value Tag」と「Label Tag」を選択します。
   • 「Value Tag」フィールドに「Name」と入力します。 ? 「Label Tag」フィールドに「Name」と入力します。

SearchValue Ajax Type-Ahead ビルダーをアプリケーションに追加することにより、Ajax 先行入力サポートの追加が完了します。このビルダーを、先ほど追加した Data Page Builder によって作成された SearchValue スパン・タグ上に置きます。先ほど作成された参照テーブルのためのデータによって、ビルダーの入力が使用されたため、その参照テーブルを指定します。Ajax Type-Ahead ビルダーは、Lookup テーブル内で定義されたデータを使用して、先行入力の候補を生成します。Filter Mode ビルダー・インプットを使用して、先行入力機能と、そのために定義された先行入力データとの対話方法をさらに洗練させることができます。この例では、「Ajax Type-Ahead」ダイアログ・ボックスにおいて、「Filter」モード・オプションのドロップダウン・リストで「Show values containing data anywhere」を選択します。これにより、ユーザー入力が参照データ内のどの部分に該当する場合でも、先行入力候補が表示されるようになります。あるいは逆に、このフィールドで「Show values starting with data」を選択して、表示される先行入力候補を、ユーザーが入力したのと同じデータで始まる値のみに制限することもできます。Type-Ahead 機能によって、フィルタリングされていない完全な先行入力候補リストが表示されるようにするには、「Show all values」を選択してください。

以上で、Ajax Type-Ahead 機能の追加が完了しました。

Albums Cart ポートレットの作成

Albums Cart ポートレットは、ユーザーが購入するアルバムのリストを作成します。このポートレットは、ユーザーが、選択したアルバムのイメージをショッピング・カートのイメージにドロップすることによりアルバムをカートに追加できるようにすることにより、Dojo ドロップ・ターゲットとして機能します。また、ユーザーがページ全体をリフレッシュする必要なくカートに入れたアルバムの数量を更新できるようにすることにより、Dojo インライン編集もサポートします。図 15 を参照してください。

以下の手順は、Albums Cart ポートレットの開発プロセスを説明したものです。

1. まず、新規モデルを WebSphere Portlet Factory プロジェクトに追加します。
2. Service Consumer ビルダーを追加します。ビルダー・インプットは Albums Listing ポートレットの Service Consumer ビルダーと同じにします。
3. 次に、Portlet Adapter ビルダーをモデルに追加します。Name ビルダー・インプットと Portlet Title ビルダー・インプットは、それぞれ AlbumsCart と Albums Cart のものを使用します。
4. cartPage Page ビルダーについても同じ手順に従います。リスト4の HTML を、このビルダーの Page Contents (HTML) ビルダー・インプットに追加します。

リスト 4. 「Albums Cart」ページの HTML コンテンツ

<html>
    <head><title>Music Online</title></head>
    <body>
        <! As a best practice, change the form name to a unique name >
        <form name="myForm" method="post">
            <div align="center"><div style="font:12pt Arial;
            font-weight: bold;color: #336699;">Albums Cart</div><br>
           
            <div name="dropTag" >
                 <div name="cartImageTag" />
            </div>
           
            <span name="refreshTag">
              	<span name="cart"></span>
			 	<br>
			 	<br>
				<span name="update"></span>          	
				<br>
				<br>
				<b>Total = </b><span name="total"></span>
			</span>
							
            </div>
        </form>
    </body>
</html>
cartPage Page Contents (HTML) builder input

5. メイン・アクション・リストをモデルに追加します。この時点では、Actions ビルダー・インプットは空白のままにしておき、「OK」をクリックしてビルダー・エディターを閉じます。 cartImage Image ビルダーを追加します。cartPage と cartImageTag の Page ビルダー・インプットと Tag ビルダー・インプットを使用します。Image Source ビルダー・インプットを /factory/images/cart.gif に設定します。

Dojo ドラッグ・アンド・ドロップ・ターゲットの追加

Dojo ドロップ・サポートを Albums Cart ポートレットに追加するには、以下の手順に従います。

1. Dojo Drag and Drop Target ビルダーをモデルに追加します。このビルダーは、指定されたページ・タグにドラッグ・アンド・ドロップのサポートを追加します。その後、Drop Action ビルダー・インプットとDrop Type ビルダー・インプットを追加することによりドロップ・ターゲットをアクションにリンクし、ビルダーが受け取るデータのタイプを指定することができます。Dojo Drop Target ビルダーに以下のインプットを入力します。
   • 「Page Location」の下の「Page」フィールドに「cartPage」と入力します。
   • 「Page Location」の下の「Tag」フィールドに「cartImageTag」と入力します。
   • 「Drop type」フィールドに「albumID」と入力します。
   • ビルダーの「Past Action Behaviour」インプット・セクションの下の、「Post-Action Behavior」フィールドで、「Refresh specified page location after running action」を選択します。
   • 「Location to Refresh」の下の「Page」フィールドに「cartPage」と入力します。
   • 「Location to Refresh」の下の「Tag」フィールドに「refreshTag」と入力します。
   Drop Action ビルダー・インプットを設定する前に Action List ビルダーを作成する必要があることに注意してください。ここで、「OK」をクリックして、Dojo Drop Target ビルダーを閉じます。
2. refreshCart Action List ビルダーを Cart モデルに追加します。refreshCart アクションは、サービス・プロバイダーからアルバム詳細を受け取ります。その後、アルバムをカートに追加し、現在カートに入っている全アルバムの合計金額を更新し、カート・ページをリフレッシュします。
3. ドラッグ・ソースからドロップ・ターゲットに引き渡される albumID を受け取る albumID 引数を追加します。
4. Return Type ビルダー・インプットを「Object」に設定します。
5. 以下のビルダー・インプットを「refreshCart Action List」ダイアログ・ボックスに入力します。
   • 「Name」フィールドに「refreshCart」と入力します。
   • 「Arguments」フィールドに、「albumID」を名前として、「String」をデータ・タイプとして入力します。
   • 「Return Type」フィールドに「Object」と入力します。
6. 「Actions」フィールドに以下の Action List アイテムを入力します。
   • Assignment/Variables/ServiceConsumerGetAlbumDetailsInputs
   • /arguments/albumID=${Arguments/albumID}
   • DataServices/ServiceConsumer/getAlbumDetails
   • addAlbumToCartCallCopy
   • calculateTotal
   • cartPage
7. 先ほど作成した Dojo Drop Target ビルダーを開いて、refreshCart を Drop Action ビルダー・インプットとして指定します。

Dojo 編集機能インラインの追加

Dojo インライン編集機能では、Albums Cart ポートレットのユーザーがカートに入れたアルバムの数量を更新して、合計金額を再計算できるようにする機能です。このサポートを Cart ポートレットに追加するには、以下の手順に従います。

1. calculateTotal Method ビルダーを追加します。この記事の「ダウンロード」セクションで入手できるサンプル・コードからのコードを、Method Body ビルダー・インプットに追加します。
2. onQuantityUpdate Action List ビルダーを追加します。calculateTotal Method ビルダーと cartPage Page ビルダーへの呼び出しを追加して、結果が再表示されるようにします。
   • 「Name」フィールドに「onQuantityUpdate」と入力します。
   • 「Actions」フィールドに、2 つの「Actions」、「calculateTotal」、および「cartPage」を入力します。
3. Dojo Inline Edit ビルダーを Cart モデルに追加します。以下のビルダー・インプットを「Dojo Inline Edit」ダイアログ・ボックスに入力します。
   • 「Name」フィールドに「QuantityDojoInlineEdit」と入力します。
   • 「Fields」フィールドで、変更するフィールドのリストに「[cartPage]cartDataPage/MusicLibrary/Album/Library」と入力します。
   • 「Submit Form」オプションを選択します。
   • 「Action」フィールドに「onQuantityUpdate」と入力します。
   • 「Post-Action Behavior」フィールドで、ドロップダウン・リストから「Refresh specified page location after running action」を選択します。
   • 「Location to Refresh」フィールドで、「On Named Tag」オプションを選択し、「Page」フィールドのドロップダウン・リストから「cartPage」を選択し、「Tag」フィールドのドロップダウン・リストから「refreshTag」を選択します。

以上で、Dojo インライン編集機能の追加が完了しました。

以下の手順は、数量の変更、または削除による変更に伴い Albums Cart を更新するためのサポートを追加するものです。

1. カートの更新を開始するには、2 つの Transform Filter ビルダーを追加します。第 1 の Transform Filter ビルダー updateForDeletedItems は、削除するようチェックされたアルバムを cartListVar 変数から除外するために呼び出されます。
   • 「Name」フィールドに「updateForDeletedItems」と入力します。
   • 「Variable」フィールドに「cartListVar」と入力します。
   • 「Element to Filter」フィールドに「MusicLibrary/Album」と入力します。
   • 「Target Variable」フィールドに「cartListVar」と入力します。
   • 「Filter Behaviour」インプットとして、「Filter Out Matching」を選択します。
   • 「Filter By」インプットについては、以下のとおり入力します。 「Element」については、「Album/Remove」を入力します。 「Operator」については、「= sign」を選択します。 「Operand」については、「1」と入力します。 「Compare Method」については、「Number」を選択します。
2. 次に、updateForQuantity Transform Filter ビルダーを追加します。このビルダーは、数量ゼロの Albums Cart に関連付けられた MusicLibrary 変数からアルバムを除外します。このビルダーのための設定は以下のとおりです。
   • 「Name」フィールドに「updateForQuantity」と入力します。
   • 「Variable」フィールドに「cartListVar」と入力します。
   • 「Element to Filter」フィールドに「MusicLibrary/Album」と入力します。
   • 「Target Variable」フィールドに「cartListVar」と入力します。
   • 「Filter By」フィールドで、「Album/quantity」をエレメントとして、「=」を演算子として、「0」をオペランドとして、「number」を比較方式として入力します。
3. updateCart アクション・リストを作成して、さまざまなユーザー・イベントに応じてカート表示をリフレッシュするために必要なアクションのシーケンスをリンクします。updateCart アクション・リストのためのビルダー・インプットは以下のとおりです。
   • 「Name」フィールドに「updateCart」と入力します。
   • 「Return Type」フィールドに「Object」と入力します。
   • 「Actions」フィールドに以下の Action List アイテムを入力します。 updateForDeletedItemsCallFilter updateForQuantityCallFilter calculateTotal cartPage
   ボタンを updateCart アクション・リスト内の呼び出しにリンクすることにより、Update Cart 機能の追加が完了します。
4. Button ビルダーを Cart モデルに追加します。Page Location ビルダー・インプットを、cartPage の更新タグに設定します。
5. Label ビルダー・インプットを「Update Cart」に設定します。
6. Action Type を「Submit form and invoke action」に構成します。
7. updateCart の Action ビルダー・インプットを追加します。

以上で、Albums Cart ポートレットの作成は完了です。これらのモデルの全体像については、この記事の「ダウンロード」セクションにあるサンプル・コードを参照してください。

上に戻る

まとめ: 制約と教訓

WebSphere Portlet Factory V6.0.1 には、新しい Dojo ビルダーと Ajax ビルダーが搭載されており、開発者がこれらのテクノロジーをモデル・ベース開発に使用することができるようになっています。これらのビルダーを使用するにあたり、いくつかのことを念頭に置く必要があります。シンプルなルールとして、単一のモデル内で複数の Ajax ビルダーまたは Dojo ビルダーを使用する場合には、使用するビルダーが HTML ページ上の同じ領域にオーバーラップしないようにする必要がある、ということがあります。例えば、次のようなことです。

• Dojo Drop Source ビルダーを使用している場合には、ページ・レベルで有効範囲が設定されている Ajax Region ビルダーを同じページに追加することはできません。ただし、Ajax Region ビルダーが Dojo Drag Source ビルダーと一切オーバーラップしていなければ、Ajax Region ビルダーを同ページ内のスパン・タグに追加することは可能です。
• Dojo Drop Target ビルダーを使用している場合には、Dojo Drop Target ビルダーが置かれているスパン・タグ内で Dojo Tooltip ビルダーを稼動させることはできません。
• 同様に、Ajax Region ビルダーおよび Ajax Type-Ahead ビルダーが相互にオーバーラップする場合には、これらを同じページ領域内で使用することはできません。ただし、これらのビルダーが、相互にオーバーラップしないスパン・タグ上に置かれている場合には共存可能です。

第 2 の Ajax または Dojo ビルダーを、既に同様の別のビルダーでカバーされているスパンに追加した場合には、これにより生成された JavaScript は、同じページ領域上の他のビルダーのアクションを反映するようリフレッシュされません。このことは、望ましくない結果をもたらすおそれがあり、多くの場合、一部の Ajax または Dojo の機能が損なわれます。ビルダーが個々の領域で作動し、相互に領域をオーバーラップしないように注意する必要があります。

上に戻る

ダウンロード

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

参考文献

学ぶために

• developerWorks Japan: Lotus: Lotusの日本の技術情報サイトです
  
  
• developerWorks: Lotus(US) : Lotusの英語の技術情報サイトです
  
  

議論するために

• ディスカッション・フォーラム(US)に参加ください。
  
  
• developerWorks Lotus の記事 「Getting started with WebSphere Portlet Factory V6.0.1.(US)」をお読み下さい。
  
  
• その他の情報は、IBM WebSphere Portlet Factory(US) のページを参照してください。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• Ajax の概要
• Dojo の概要
• サンプル・アプリケーションの概要
• サンプル・アプリケーションの作成
• Dojo ドラッグ・ソース機能を追加する
• まとめ: 制約と教訓
• ダウンロード
• 参考文献
• 著者について
• コメント