hxclient ライブラリーは、それ自体をページ内の 単一グローバル JavaScript オブジェクト としてインストールします。すべての API 呼び出しは、この単一オブジェクト、またはこのオブジェクトによって戻されるオブジェクトで 行われます。
ポートレット以外のページでは、hxclient オブジェクトには常に hX という名前が付いています。 基本 API 呼び出しは、このオブジェクトに付属するすべての関数です。例えば、 hX.redraw(); 呼び出しでは、ページ上のすべての hxclient オブジェクトが 強制的に再描画されます。
ポートレット・ページでは、 異なる JWL ページが異なるバージョンのライブラリーを使用できます。ライブラリーのインスタンスには、 バージョンが記されています。1 ページに、複数のバージョンのライブラリーを含むことができます。 このような場合には、ライブラリーのインスタンスがインスタンス化され、 名前にバージョン番号が含まれた hx オブジェクトのバリエーションが作成されます。
var obj = document.getElementById("form1:text1");
var obj = hX.getComponentById("form1:text1");
DOM オブジェクトに一度アクセスしたら、そのオブジェクトに最適な定義済み API で DOM オブジェクトを操作しますが、 同様に、hxclient オブジェクトに一度アクセスしたら、そのオブジェクトに最適な定義済み API で hxclient オブジェクトを操作します。
アクセサー関数の他に、hX オブジェクトはユーティリティー関数のセットを サポートします。これらの関数は主に、 DOM 操作を実行する、ブラウザーに中立な方法を提供します。例えば、オブジェクトでフォーカスを設定できる呼び出し、 ブラウザーのタイプに関係なく機能する呼び出し、およびオブジェクトへのイベント・ハンドラーの追加および除去を 管理する呼び出しがあります。
JSF ページでは、hxclient ライブラリーがインストール および管理されています。JSF タグにより、確実にページにライブラリーがインストールされ、 ライブラリーを初期化および使用するために適切な呼び出しが行われます。
JSF 以外のページでは、ライブラリー、サポート・ライブラリーとスタイルシート、 ライブラリー初期設定、およびページ内のコンポーネントと振る舞いをインスタンス化するための 呼び出しが含まれるようページを構成する必要があります。
<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>