The hxclient library installs itself as a single global JavaScript object in a page. All API calls are made on this single object or on objects returned by this object.
In a non-portlet page, hxclient object is always named hX. The base API calls are all functions attached to this object. For example, the hX.redraw(); call forces all hxclient objects on the page to redraw themselves.
In a portlet page, it is possible that different JWL pages use different version of the library. Instances of the library are version stamped. A page can contain multiple version of the library. When this occurs an instance of the library is instantiated and a variation of the hx object is created with the version number included in the name.
var obj = document.getElementById("form1:text1");
var obj = hX.getComponentById("form1:text1");
Just as there is a well defined API for manipulating a DOM object once it has been accessed, there is a well defined API for manipulating a hxclient object once it has been accessed.
In addition to accessor functions, the hX object supports a set of utility functions. These functions primarily provide a browser neutral way of performing DOM manipulations. For example, there are calls that can set focus on an object, that works regardless of the browser type, and calls that manage the addition and removal of event handlers from an object.
In a JSF page, the hxclient library is installed and managed for you. The JSF tags ensure that the library is installed in the page and that appropriate calls are made to initialize and use the library.
In a non-JSF page, the page must be structured to include the library, its supporting libraries and stylesheets, the library initialization, and calls made to instantiate components and behaviors in the page.
<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>