Java ウィジェット・ライブラリー (JWL) コンポーネントのクライアント・サイド・サポート

hxclient JavaScript™ ライブラリーは、 HTML ページに Java™ ウィジェット・ライブラリー (JWL) コンポーネントのクライアント・サイド・サポートを実装します。ライブラリーは現在、ほとんどのクライアント・サイド・サポートを 実装していますが、すべてではありません。一部のコンポーネントは、ライブラリーの 2 番目のセット、 Odyssey Browser Framework (OBF) ライブラリーに実装されています。

hxclient ライブラリーの使用

ページを作成する際に、 hxclient ライブラリーは次の 2 つの方法のいずれかで使用できます。
  1. JSF ページでは、ライブラリーの使用は透過的です。JSF タグは、 発行された HTML でライブラリーを自動的に初期化、管理、および使用します。ライブラリーを使用するために 特殊コーディングは必要ありません。
  2. JSP ページまたは HTML ページでは、ライブラリーは初期化する必要があります。コンポーネント、 振る舞い、およびサポート・コンポーネント (コンバーター、バリデーターなど) は、明示的な JavaScript 呼び出しによって作成されます。
いったんページがブラウザーで実行されると、JavaScript が使用され、 イベント・ハンドラーでは通常、ページ DOM の変更または JWL コンポーネントの変更、あるいはその両方が行われます。例えば、次のようにします。
  • JavaScript は、 hxclient ライブラリーによって管理される DOM オブジェクトの属性および CSS プロパティーを変更できます。 例えば、hxclient ライブラリーがカラー・ピッカーに変えた <input> タグを非表示または表示するために、 JavaScript が使用されます。ほとんどの場合、特殊コーディングは必要ありません。 hxclient ライブラリーは DOM ノードをモニターします。DOM に行った変更は、 ライブラリーによって自動的に管理されます。ブラウザーが変更を正しくモニターしない場合があります (例えば、DOM オブジェクトの使用不可化を処理する場合です)。このような場合には、 hxclient ライブラリーに対する明示的な呼び出しをコード化する必要があります。
  • 明示的な JavaScript 呼び出しは、 ライブラリーの振る舞いを変更 (例えば、メニュー・バーに要素を追加または除去) するために使用されます。明示的な JavaScript 呼び出しは、 ライブラリーの機能でも使用されます (例えば、日付としてフォーマットされたストリングを JavaScript 日付/時刻オブジェクトに変換します)。

hxclient ライブラリー API の構造 - hx オブジェクト

hxclient ライブラリーは、それ自体をページ内の 単一グローバル JavaScript オブジェクト としてインストールします。すべての API 呼び出しは、この単一オブジェクト、またはこのオブジェクトによって戻されるオブジェクトで 行われます。

ポートレット以外のページでは、hxclient オブジェクトには常に hX という名前が付いています。 基本 API 呼び出しは、このオブジェクトに付属するすべての関数です。例えば、 hX.redraw(); 呼び出しでは、ページ上のすべての hxclient オブジェクトが 強制的に再描画されます。

ポートレット・ページでは、 異なる JWL ページが異なるバージョンのライブラリーを使用できます。ライブラリーのインスタンスには、 バージョンが記されています。1 ページに、複数のバージョンのライブラリーを含むことができます。 このような場合には、ライブラリーのインスタンスがインスタンス化され、 名前にバージョン番号が含まれた hx オブジェクトのバリエーションが作成されます。

hX オブジェクトは 2 種類の関数をサポートします。
  • アクセス関数
  • ユーティリティー関数
サポートされるそれぞれのコンポーネント、振る舞い、コンバーター、バリデーター、 および支援は、hxclient オブジェクトによって定義されます。hxclient オブジェクトは、 DOM オブジェクト追加機能を提供する DOM オブジェクトの対等機能として考えられます。 例えば、<input> DOM オブジェクト (ページで <input> タグを表示) では、タグが日付ピッカーとして 使用される場合、JSFDatePicker オブジェクトと呼ばれるパラレル hxclient オブジェクトがあります。 DOM オブジェクトにアクセスするには、以下を呼び出します。
var obj = document.getElementById("form1:text1");
パラレル hxclient オブジェクトにアクセスするには、hX オブジェクトのアクセサー関数を使用します。
var obj = hX.getComponentById("form1:text1");

DOM オブジェクトに一度アクセスしたら、そのオブジェクトに最適な定義済み API で DOM オブジェクトを操作しますが、 同様に、hxclient オブジェクトに一度アクセスしたら、そのオブジェクトに最適な定義済み API で hxclient オブジェクトを操作します。

アクセサー関数の他に、hX オブジェクトはユーティリティー関数のセットを サポートします。これらの関数は主に、 DOM 操作を実行する、ブラウザーに中立な方法を提供します。例えば、オブジェクトでフォーカスを設定できる呼び出し、 ブラウザーのタイプに関係なく機能する呼び出し、およびオブジェクトへのイベント・ハンドラーの追加および除去を 管理する呼び出しがあります。

ページ構造

JSF ページでは、hxclient ライブラリーがインストール および管理されています。JSF タグにより、確実にページにライブラリーがインストールされ、 ライブラリーを初期化および使用するために適切な呼び出しが行われます。

JSF 以外のページでは、ライブラリー、サポート・ライブラリーとスタイルシート、 ライブラリー初期設定、およびページ内のコンポーネントと振る舞いをインスタンス化するための 呼び出しが含まれるようページを構成する必要があります。

注: JWL 3.0 の開発に伴って、ページの構造が変更されています (例えば、 ライブラリーがリファクタリングされます)。ページをハンド・コーディングして JWL を使用している場合は、 少なくとも、hxclient コード・ベースが変更されたときに、使用するインクルードを変更する必要があります。
	<HEAD>
...
    <!-- Include a stylesheet that styles the JWL components -->
    <LINK rel="stylesheet" type="text/css" href="theme/stylesheet.css" title="Style">
...    
	<HEAD>

		<BODY>
...html...
    <!-- Include the hxclient library -->
    <script type="text/JavaScript" language="JavaScript" src="/project/.ibmjsfres/hxclient_v3_0.js"></script>
    <!-- (Optional) Include a localized string library -->
    <script charset="ISO-8859-1" type="text/JavaScript" language="JavaScript" src="/project/.ibmjsfres/hxclient_v3_0.js"></script>
    <!-- (Optional, required for portlet) Identify the Resource Server -->
    <script type="text/javascript">
        if (hX_5) hX_5.setResourceServer("/project/.ibmjsfres");
    </script>

... html ...

    <!-- Declare an appropriate HTML tag -->
    <input type="submit" value="submit" id="form1:button1" />
    <input id="form1:text1" type="text" value="03/14/2006" />
    <!-- Specify what is to be done to the tag -->
    <script type="text/javascript">
        hX_5.addBehavior("form1:button1", "onclick", new hX.JSFBehaviorGeneric("action:confirm", "target:Do you want to submit this form?"));
        hX_5.addComponent("form1:text1", new hX.JSFDatePicker());
    </script>

... html ...

    <!-- Initialize the page -->
    <script type="text/javascript">
        if (hX_5) hX_5.onPageLoad();
    </script>
</BODY>

フィードバック