|
|
現在は、WebLogic Portal プロジェクトを構築するために使用できるさまざまな JavaScript ライブラリおよびツールキットがあります。たとえば、Dojo ツールキットはクライアント側の WLP 開発に役立ちます。この節では、Dojo ツールキットを使用する WLP プロジェクトの設定方法について説明します。この手順に従って、目的の JavaScript ライブラリをプロジェクトに統合することもできます。
Dojo は、DHTML と JavaScript ブラウザ プログラミング用のツールキットです。Dojo では、低水準な I/O (XMLHttpRequest)、イベント フレームワーク、JavaScript 拡張、およびボタンやリストやフォームや、ツリーなどのさまざまなインタフェース ウィジェットが提供されます。Dojo には、ポータルとポータルのコンポーネントの開発に使用できる豊富な機能のセットがあります。
この節では、Dojo ツールキットを含む WLP プロジェクトの設定方法について説明します。
resources というフォルダを作成する。そのフォルダに js というサブフォルダを作成する。 resources/js フォルダにインポートする。そのためには、resources/js フォルダを右クリックし、[インポート] を選択する。ウィザードで、[一般｜ファイルシステム] を選択する。Dojo ダウンロード ディレクトリから dojo と dijit の両方のフォルダをインポートする。図 4-1 を参照。
Dojo ツールキットをポータル プロジェクトに追加したら、以下の節で説明するように Dojo と他の JavaScript コードをポートレットに組み込むことができます。
この節では、メッセージをポップアップで表示する単純な JSP ポートレットについて説明します。サンプルは、ポートレットに Dojo ライブラリをインポートし、JavaScript を使用する方法を示します。
portlets フォルダを作成する。 dojotest.portlet という新しい JSP ポートレット記述子ファイルを作成する。このためには、フォルダを右クリックし、[新規｜ポートレット] を選択する。ポートレット ウィザードを使用して、JSP ポートレットを作成する。ウィザードによって、自動的にポートレット ファイルと デフォルトで dojotest.jsp という空の JSP ファイルの両方を作成する。
[dijit Button] のボタン要素またはウィジェットをインポートします。これは、ウィジェットをインポートするための一般なパターンです。このコードにより、ボタン インスタンスが宣言される前に、ボタンの JavaScript がロードされます。
ボタン ウィジェットをインスタンス化し、ボタンのクリック イベント用のイベント ハンドラをコンフィグレーションします。ボタンをクリックすると、イベント ハンドラによって、あいさつの言葉とポートレットのラベルを含む JavaScript アラートが表示されます。
<script type="text/javascript">
// Dojo ボタン ウィジェットをロードする
dojo.require("dijit.form.Button");
</script>
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
この節では、JSP ポートレットで Dojo コードを使用する方法について説明します。「クライアント側の開発のベスト プラクティス」では、ポートレットにおいて JavaScript コードを使用する場合発生する問題およびその問題を回避するためのベスト プラクティスについて説明します。
この節では、表示依存関係ファイルの目的、重要度について、また表示依存関係ファイルの作成方法について説明します。
表示依存関係ファイルは、ポートレットが必要とする外部 JavaScript と CSS などのページ レベルのイベントとリソースを定義する XML です。通常、非ポータル Web ページでは、これらのファイルが HTML ページの <head> タグの中に含まれますが、ポートレットでこのファイルの使用を避ける必要があります。これを使用すると、ポータルやマッシュアップ環境内にいくつかの問題が発生するからです。これには、WebLogic Portal の Desktop Ajax 機能が有効に設定する場合、HTML/XHTML 非対応のページの生成と予期しない動作の発生が含まれます。表示依存関係メカニズムでは、リソースのリファレンスを宣言し、ロードとアンロードを含むページ レベル イベントに送信することをポートレットに許可することで、この問題に対処します。JavaScript のブロックを通常の <script> 要素でラップして、表示依存関係ファイルに含めることもできます。
表示依存関係ファイルを作成する簡単な方法は、Web アプリケーション内のフォルダを右クリックし、[新規｜その他｜WebLogic Portal｜マークアップ ファイル｜表示依存関係] を選択することです。コード リスト 4-2 は、生成されるファイルを示します。
<?xml version="1.0" encoding="UTF-8"?>
<window
xmlns="http://www.bea.com/servers/portal/framework/laf/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/portal/framework/laf/1.0.0
laf-window-1_0_0.xsd">
</window>
次に、ファイルに <render-dependencies> XML タグを追加します。コード リスト 4-3 に示すように、Dojo ツールキットへのパスをタグに含めます。このリストには、Dojo が必要とする特定の要素が含まれます。たとえば、ページがロードされ、Dojo がコンフィグレーションされるときに作成される Tundra テーマと djConfig オブジェクトです。
<path-element> は、<script> タグに参照されるスクリプト ソースを含むディレクトリへの表示依存関係ファイルからの相対リファレンスである必要があります。
<?xml version="1.0" encoding="UTF-8"?>
<window
xmlns="http://www.bea.com/servers/portal/framework/laf/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/portal/framework/laf/1.0.0
laf-window-1_0_0.xsd">
<render-dependencies>
<html>
<links>
<search-path>
<path-element>../resources/js</path-element>
</search-path>
<link href="dijit/themes/tundra/tundra.css" type="text/css"
rel="stylesheet"/>
</links>
<scripts>
<search-path>
<path-element>../resources/js</path-element>
</search-path>
<script type="text/javascript">
var djConfig = {parseOnLoad:true, isDebug:true};
</script>
<script src="dojo/dojo.js" type="text/javascript"/>
</scripts>
</html>
</render-dependencies>
</window>
|
