|
|
この章では、Dynamic Interface SCripting (Disc) フレームワークについて説明します。Disc は WLP REST API と組み合わせて使用される場合があり、クライアント側の JavaScript API を提供し、リッチで対話的なポートレットとポータル アプリケーションの開発を支援します。Disc によって、リッチ、対話的なポータル Web アプリケーションの機能を有効にする AJAX 対応ポートレットを書き込むことができます。
Disc では、イベントを処理する、非同期でポートレットを更新する、およびポータル コンテキスト オブジェクトにアクセスするためにクライアント側の、JavaScript、オブジェクト指向プログラミング フレームワークが提供されます。Java ベースの WLP API の同様に、Disc コンテキスト オブジェクトは、プレースホルダ内でのポートレットの位置、タイトル、ラベルなどの説明的な情報をカプセル化します。コンテキスト オブジェクトに返された情報は、ポータルを変更するのに使用する REST コマンドのパラメータとして使用できます。たとえば、WLP の配置の動き (ポートレットのドラッグ アンド ドロップ) という機能は、Disc と REST 機能を使用して実装されます。(『ポータル開発ガイド』の「配置の動きの有効化」を参照)。
| ヒント : | 「Disc JavaScript API」に関するリファレンス ドキュメントは、e-docs で入手できます。 |
図 3-1 に示すように、非同期デスクトップ モードと DVT 機能の両方では Disc が使用されます。非同期デスクトップ モードまたはポータル デスクトップの DVT を有効にすると、Disc が暗黙的に有効にされます。
DVT フラグは、ポータル デスクトップの配置動作 (ポートレットのドラッグ アンド ドロップ) 機能を有効にします。デスクトップの非同期表示と配置できる動きは、「ポータル開発ガイド」で説明しています。
Disc をクライアント側のポータル コードに使用するには、まずそれを有効にする必要があります。Disc を Workshop for WebLogic または WebLogic Portal Administration Console で有効にすることができます。また、Disc はポータルのコンテキストの外側でも使用できます。
Disc が有効にされると、以下の WLP クライアント側の開発機能にアクセスできます。
ポータル対応の XHR オブジェクトである、bea.wlp.disc.io.XMLHttpRequest については、e-docs の「Disc API リファレンス マニュアル」で詳しく説明します。
bea.wlp.disc.context モジュールのコンテキスト オブジェクトのセットについては、e-docs の「Disc API リファレンス マニュアル」で説明します。
bea.wlp.disc.xie モジュールの XIE オブジェクトのセットについては、e-docs の「Disc API リファレンス マニュアル」で説明します。
bea.wlp.disc.event モジュールのイベント オブジェクトの詳細については、e-docs の「Disc API リファレンス マニュアル」を参照してください。
Workshop for WebLogic でポータルデスクトップ用の Disc を有効にするには、図 3-2 に示すように、[デスクトップ プロパティ] ビューでは [Disc を有効化] を true に設定します。
| 注意 : | 非同期モードまたは DVT を有効にすると、デスクトップ用の Disc が暗黙的に有効化されます。 |
Administration Console で Disc を有効にするには、以下の手順に従います。
| 注意 : | 非同期モードまたは DVT を有効にすると、Disc が暗黙的に有効化されます。 |
WLP ポートレットの公開機能は、Disc をポータルの外側で使用します。ポートレットの公開を使用して、ポートレットを任意の HTML ページに表示できます。 ポートレットの公開の詳細については、「ポートレットの公開」を参照してください。
Ajax 開発者に親しまれている標準 XMLHttpRequest オブジェクトは、ポートレット内の別個のデータを更新するために使用できます。Disc API クラスの bea.wlp.disc.io.XMLHttpRequest は、標準 XMLHttpRequest クラスの拡張です。WLP の XMLHttpRequest を使用して、ポータル サーバへの非同期で増分コールを実行でき、ポータル間通信や WSRP などのポータル機能をサポートできます。ただし、標準 XHR と同じようにポータル対応の XHR を使用できます。標準 XHR リクエストと同じようにポータル対応の XHR リクエストを、任意の JSP ポートレットから使用し、任意のデータを取得してポートレットに挿入できます。
使用例として、自動完全検索フォームを含むポートレットを書くことができます。ユーザが検索フィールドにテキストを入力すると、ポートレットによって、サーバにユーザのためのヒントを取得するポータル対応の XHR リクエストが送信されます。このプロセスでは、ポートレット UI はテキスト フィールドに表示されるヒントのみ更新します。
コード リスト 3-1 では、ポータル対応の XHR オブジェクトがインスタンス化され、非ポータル ソースからデータを非同期に取得するのに使用されます。このコードは、JSP ページに埋め込むのに適しています。
<script type="text/javascript">
var dataUrl = 'data.json';
var xmlhttp = new bea.wlp.disc.io.XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var data = eval('(' + xmlhttp.responseText + ')');
var table = document.getElementById('data');
for (var i = 0; i < data.length; i++) {
// data[i] オブジェクトのプロパティを参照して「data」テーブルに行を
// 挿入する。
}
}
}
xmlhttp.open('GET', dataUrl, true);
xmlhttp.send();
</script>
ポータル対応の XMLHttpRequest を使用して、クライアント側の JavaScript コードはポートレットに代わって、サーバ上のポータル フレームワークと対話することができます。サーバに対してポータル対応の XHR 呼び出しを実行すると、リクエストをどのように処理するかを決定するポータルによってリクエストが処理されます。ポータルは、指定のポートレットを呼び出し、ユーザ プロパティ、ポートレット プリファレンス、およびリクエストや応答オブジェクトなどのポートレットに適するコンテキストを提供することができます。ポータルにより、ポートレット間の依存関係が管理されるので、ポータル対応の XHR でポータル間通信が可能です。
以下に、ポータル対応の XHR の 2 つの使用例を示します。
開発者は、ポータル固有のコンテンツを更新するのに WLP-固有の XMLHttpRequest オブジェクト (bea.wlp.disc.io.XMLHttpRequest) も使用できます。このオブジェクトでリクエストを発行する場合、IPC や WSRP などの機能がサポートされます。ポータル対応の XHR クラスの詳細については、e-docs の「Disc API リファレンス マニュアル」を参照してください。
Workshop for WebLogic でポータル対応の XHR を有効にするには、「Workshop for WebLogic での Disc の有効化」節に示す手順に従います。
コード リスト 3-2 は、基本的にはコード リスト 3-1 と同じです。異なるのは、コード リスト 3-2 は、ポートレットをデータ ソースとして参照します。このサンプルコードは、JSP ページに直接埋め込むことが前提となります。
<%@ taglib prefix="render" uri="http://www.bea.com/servers/portal/tags/netuix/render" %>
<render:jspContentUrl contentUri="/path/to/portlet/data.jsp" forcedAmpForm="false" var="dataUrl"/>
<script type="text/javascript">
var dataUrl = '${dataUrl}';
var xmlhttp = new bea.wlp.disc.io.XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var data = eval('(' + xmlhttp.responseText + ')');
var table = document.getElementById('data');
for (var i = 0; i < data.length; i++) {
// data[i] オブジェクトのプロパティを参照して「data」テーブルに行を
// 挿入する。
}
}
}
xmlhttp.open('GET', dataUrl, true);
xmlhttp.send();
</script>
Disc では、JavaScript を使用して、クライアント側のポータルのコンテキスト オブジェクトを使用できます。コンテキスト オブジェクトは、ポータル コンポーネントに関する一部の情報をカプセル化したものです。コンテキスト オブジェクトには、以下のポータル コンポーネントに関する情報が含まれます。
Disc コンテンツ クラスは、サーバ側の PresentationContext クラスの代表であり、クライアント側プログラミングで同様の役目を果たします。bea.wlp.disc.context モジュールのコンテキスト オブジェクトのセットについては、e-docs の「Disc API リファレンス マニュアル」で説明します。
| 注意 : | 目に見えるコンポーネント用のコンテキスト オブジェクトのみ利用可能です。現在のブックのピア ブック、または非表示のポートレットなどの目に見えないコンポーネントは Disc API で利用できません。 |
通常、Disc コンテキスト オブジェクトは HTML ページが全体ロードされた後利用可能になります。コンテキスト オブジェクトをインライン スクリプト ブロックから使用しないことが、ベスト プラクティスです。代わりに、コンテキスト オブジェクトとの対話を指定する onload ハンドラを登録します。たとえば、コード リスト 3-3 のコードが JSP ポートレット内にインラインで配置される場合、エラーが発生します。
//ポートレットは null になる
var portlet = bea.wlp.disc.context.Portlet.findByLabel("myPortletLabel");
var title = portlet.getTitle(); // エラー
ただし、同じコードを Dojo onload 関数に追加すると、コードが想定通りに機能します。
dojo.addOnLoad(function() {
var portlet = bea.wlp.disc.context.Portlet.findByLabel("myPortletLabel");
var title = portlet.getTitle();
});
コード リスト 3-5 はデバッグの簡単なサンプルを示します。ベスト プラクティスは、このコードを表示依存関係ファイルに配置することです。詳細については、「表示依存関係ファイルの作成」を参照してください。
dojo.addOnLoad(function() {
var portlets = bea.wlp.disc.context.Portlet.getAll();
for (var i = 0; i < portlets.length; i++) {
bea.wlp.disc.Console.debug(portlets[i]);
}
});
コード リスト 3-6 は、コンテキスト オブジェクトを使用する他の例を示します。
ポートレット用の表示依存関係ファイルのリソースは、モードや状態に関係なく、常に含まれます (最小化を除きます。これは、特殊なケースです)。ポートレットには、表示依存関係ファイル (たとえば、ハンドラに追加されている。) からロードされる場合、常に実行され、ポートレットにコンテンツを追加する関数がある場合は、ポートレットは通常表示モードにあるときのみコンテンツの追加を試みる必要があります。コード リスト 3-6 は、表示依存関係ファイルからロードされるものです。
function createDataTables(label) {
var portlet = bea.wlp.disc.context.Portlet.findByLabel(label);
if (portlet.getWindowMode() == "view") {
// データを取得して、対応するテーブルを作成する...
if (portlet.getWindowState() == "maximized") {
// 拡張詳細でテーブルを作成する
}
else {
// 一般な詳細でテーブルを作成する
}
}
}
Disc モジュール bea.wlp.disc.xie は Disc の XMLHttpRequest 対話エンジン (XIE) のためにパブリック API を定義します。XIE は、WebLogic Portal との Ajax-起動型の対話用のクライアント側の基盤です。また、XIE は以下を含む他の様々な Ajax ベースのパブリック Disc API を実装するプラットフォームです。
この節で説明したクラスの詳細については、e-docs の「Disc API ドキュメント」を参照してください。
bea.wlp.disc.xie.Events オブジェクトには、XIE の対話ライフサイクル中に発生するパブリック、グローバル イベントのセットが含まれます。対話ライフサイクルには、WLP サーバに Ajax リクエストを設定して実施する、および応答を受信して、処理することが含まれます。WLP Ajax 応答は、内部 JSON 形式でエンコード (これらのフォームは確保され、変わることがある) されます。XIE は、これらの応答の本体の評価と処理を管理します。パブリック XIE イベントの一式は、このライフサイクルの間、主な段階まで一般なユーザのアクセスを提供します。また、リスン コードはこのイベント フックを使用することで、対話に応答でき、さらに対話の結果に影響を与えることもできます。このクラスの詳細については、e-docs の「Disc API ドキュメント」を参照してください。
イベントが開始されると、各イベントによって、リスナにペイロード オブジェクトが提供されます。各ペイロード オブジェクトのタイプと機能はイベントによって異なります。特定のイベント ペイロードの詳細については、e-docs の「Disc API ドキュメント」にある個別イベントのドキュメントを参照してください。
ロギングを実施する方法の 1 つは、Firebug ロギング モデルを使用することです。このモデルの詳細については、「http://getfirebug.com/logging.html」を参照してください。Firebug と Firebug Lite 両方では、ロギング出力をモニタするのに使用できるグローバル Console オブジェクトが提供されます。
Disc では、Firebug Console オブジェクトで見つかれた API をレプリケートする Console オブジェクト (bea.wlp.disc.Console) が提供されます。Disc が利用可能であるときはいつでもこのオブジェクトを使用できます。Disc Console オブジェクトの詳細については、e-docs の「Disc API ドキュメント」にある bea.wlp.disc.Console を参照してください。
コード リスト 3-7 は、リスナを設定し、Console オブジェクトを介してメッセージを送信する方法の簡単なサンプルを示します。Console でログされるすべてのメッセージがオブジェクト上の各リスナに渡されます。デバッグを呼び出すとき、リスナの機能に以下の引数を渡すことができます。
このコンフィグレーションによって、myConsoleOutput と呼ばれる div に次の HTML テキストが出力されます。この div は、ページであらかじめ定義される必要があります。
DEBUG: label=myPortlet
bea.wlp.disc.Console.addListener(function(op, args) {
var output = document.getElementById("myConsoleOutput");
output.appendChild(document.createElement("br"));
output.appendChild(document.createTextNode(op.toUpperCase() + ": " + args.join(",")));
});
// 後で、myPortlet.getLabel() は「myPortlet」を返すと仮定する
bea.wlp.disc.Console.debug("label=", myPortlet.getLabel());
|