对 Java 窗口小部件库(JWL)组件的客户端支持

JavaScript™ 库 hxclient 实现了对 HTML 页面中 Java™ 窗口小部件库(JWL)组件的客户端支持。目前,此库实现了大部分客户端支持,但未全面实现此支持。某些组件是在第二组库中实现的,这些库称为 Odyssey 浏览器框架(OBF)库。

使用 hxclient 库

在创建页面时,可以通过两种方式使用 hxclient 库:
  1. 在 JSF 页面中,对此库的使用是透明的。在所发出的 HTML 中,JSF 标记将自动初始化、管理并使用此库。要使用此库,不需要进行特殊的编码工作。
  2. 在 JSP 页面或 HTML 页面中,需要对此库进行初始化。组件、行为以及诸如转换器和验证器之类的支持组件由显式的 JavaScript 调用创建。
在浏览器中运行页面时,通常在事件处理程序中使用 JavaScript 来修改页面 DOM 以及/或者修改 JWL 组件。例如:
  • JavaScript 可以修改由 hxclient 库管理的 DOM 对象的属性和 CSS 属性。例如,可以使用 JavaScript 来隐藏或显示已由 hxclient 库转换为颜色拾取器的 <input> 标记。在大多数情况下,不需要进行特殊的编码工作。hxclient 库将监视 DOM 节点。对 DOM 所作的更改由此库自动管理。在几种情况下,浏览器无法正确地监视更改。例如,在禁用 DOM 对象时,情况即如此。在这些情况下,需要编码显式的 hxclient 库调用。
  • 通过进行显式的 JavaScript 调用来修改此库的行为,例如对菜单栏添加或除去元素。此库的设施也执行显式的 JavaScript 调用,例如将格式化为日期的字符串转换为 JavaScript 日期时间对象。

hxclient 库 API 的结构 - hx 对象

hxclient 库将其本身安装成页面中的单个全局 JavaScript 对象。所有 API 调用都将对这个单一对象以及此对象返回的对象执行。

在非 Portlet 页面中,hxclient 对象始终名为 hX。基本 API 调用是所有与此对象相关的函数。例如,hX.redraw(); 调用强制页面上的所有 hxclient 对象重新绘制自身。

在 Portlet 页面中,不同的 JWL 页面可以使用此库的不同版本。此库的实例将带有版本戳记。一个页面可以包含此库的多个版本。在这种情况下,将对此库进行实例化,并且将创建 hx 对象的变体并在名称中包括版本号。

hX 对象支持两类函数:
  • 访问函数
  • 实用程序函数
每个受支持的组件、行为、转换器、验证器和辅助都由 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 对象后有一个用于处理该 DOM 对象的明确 API,在访问 hxclient 对象后也有一个用于处理该 hxclient 对象的明确 API。

除访问器函数以外,hX 对象还支持一组实用程序函数。这些函数主要提供与浏览器无关的 DOM 处理方法。例如,可以通过执行调用以独立于浏览器类型的方式将焦点设置到对象上以及对对象添加和除去事件处理程序。

页面结构

在 JSF 页面中,将自动安装并管理 hxclient 库。JSF 标记将确保在页面中安装此库并执行相应的调用来初始化并使用此库。

在非 JSF 页面中,必须将页面构造成包括此库、其支持库和样式表、库初始化功能以及用于将该页面中的组件和行为实例化的调用。

注: 在 JWL 3.0 的开发过程中,对页面的结构进行了更改,例如,将对库进行重构。如果将页面手工编码为使用 JWL,则由于 hxclient 代码库已更改,因此至少需要修改所使用的 include。
<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>

反馈