Enabling the Hover-Over-Help Feature Using JSP Custom Tags

3.3  AJAX strategy
AJAX (Asynchronous JavaScript and XML) is a powerful web development technique in creating interactive web applications. The AJAX strategy was developed for the dynamic message scenario. It is a pull-based model, since messages are retrieved by an AJAX module at runtime from the server. This approach can guarantee that the message contains the latest data.

When a mouseover event is triggered from a web page, the AJAX module invokes the server-side RESTful web service endpoint. The server-side component picks up the correct message from the message cache, replaces all variable tokens in it with the most current user-session data, and sends the final message back to your browser in the XML format. Upon receiving the response, the AJAX module populates the pertaining information window and pops it up. The complete process is illustrated in the sequence diagram in figure 3. 

One servlet class and three custom tags have been created to support this strategy, and they must be used together in the same page.

3.3.1    HelpMessagesServiceServlet
This is an extension of the HTTPSerlvet class. It serves as the RESTful web service endpoint at the server-side. It processes the HTTP request from the client-side AJAX module, constructs the message with the latest data in user’s session, and sends the response in XML format back to the browser.

A sample response is listed below.

<mouseovermsg>
    <connectid>Household</connectid>
    <bkgdcolor>infor</bkgdcolor>
    <msgtitle>Household</msgtitle>
    <msgcontent>A household includes all the persons who occupy a housing unit.</msgcontent>
</mouseovermsg>

3.3.2    hohajaxtag
This tag inserts AJAX methods in a JSP which will be invoked by the hohdynatag below. It has two attributes. The namespace can be used to pass a portlet’s namespace into the tag in the portal environment. In a web application the value of the attribute can be left blank. The serviceurl attribute must be the valid URL for the HelpMessagesServiceServlet. In the WebSphere Portal environment, this tag should be added in the Default.jsp file.

 // Portal environment
<mt:hohajaxtag namespace="<portlet:namespace />" 
               serviceurl="/contextpath/svltpath" />  

// Web environment
<mt:hohajaxtag namespace="" serviceurl="/contextpath/svltpath" />

 3.3.3    hohdynatag and hohdynaparamtag
The hohdynatag has four attributes as same as the “hohstatictag” tag, and it will generate a “span” element. Each hohdynaparamtag establishes a mapping between one token in the message and one key used in user’s session to refer to the actual value. These mappings will be sent to the RESTful endpoint as HTTP parameters. When a user’s mouse moves over the area in a page represented by the span tag, the following events will occur sequentially at the client’s browser:

•    OnMouseOver events will be fired by the browser.
•    The Ajax method generated by the hohajaxtag will be invoked. The method will make an HTTP request to the RESTful service endpoint and will be waiting for the response.
•    Upon receiving the response, the AJAX method will parse it to get the actual help message.
•    The AJAX method will display the message bubble in the browser.

Below is a valid utilization of these tags.

<mt:hohdynatag namespace="<portlet:namespace />" msgid="6"
    lable="Definition and calculation for Retention">
  <mt:hohdynaparamtag tokenkey="first" sessionattributekey="SESSIONKEY_FIRST" />
  <mt:hohdynaparamtag tokenkey="second" sessionattributekey="SESSIONKEY_SECOND" />
</mt:hohdynatag>