Ming has posted 2 posts at DZone. View Full User Profile

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

10.21.2008
| 27538 views |
  • submit to reddit

3. Design and implementation


In the design, messages are cached at server-side to gain the maximum performance. Two strategies have been implemented to support the hover-over-help feature for each of the message types described in the previous section.

3.1    Message caching
Messages can be persisted in a database or flat text file, but regardless of where they are physically stored, they will be loaded and cached at the web container when it starts. The framework includes a class – CacheIntializer which implements the ServerContextListener interface to perform the job. All you need to develop is your own message loader class to retrieve your messages from storage. Your class must implement the com.myuan.tags.bubblemsg.serverside.MessageLoader interface in the framework, and its name must be added as a ContextParameter in the web descriptor. Please refer to the installation section for more details.

3.2    Dojo and CSS Strategy
This strategy is designed to support static and variable messages. It can be referred as the push strategy, since help messages are embedded as html elements and pushed to users’ browsers along with the whole web page. No client-server communication is needed once the page download is done. The values will be kept the same until the page is re-loaded again. This strategy relies on a Dojo module to recognize particular “span” elements (listed in list 1) in html files. For each individual message bubble, two span elements are required. The first one represents a visible graphical component in a page, while the second one is the message bubble which isn’t visible for most of the time. When you move the mouse over the first “span” area, an action will be triggered by the browser, and a Dojo method will make the message bubble popped up (illustrated in Figure 1). The “id” attribute in the first “span” element and the “connectid” attribute in the second one are the keys to tie the pair together. These two attributes must have the same value. The value is randomly generated by the custom tags in the framework, which guarantees that the strategy can support both web and portal applications.

<span id="connectid22121585605area" class="callout" style="font-weight:bold">
    Households
</span>                                                
<span dojotype="tooltip" connectid="connectid22121585605area">
    <div class="informationWindow">
        <div class="infor">
          <div class="titleBar">Household</div>
          <div class="contentPane">A household includes all the persons who occupy a housing unit.</div>
      </div>
    </div>
</span>

Four tag handlers have been developed to support static message and variable message scenarios, respectively. At page-rendering time, the handlers can retrieve help messages from the cache, replace variable tokens in the messages if any, and create and insert value-matched “span” html elements into the web pages. The complete process is detailed in the sequence diagram in figure 2.

 

 Figure 2 – sequence diagram for the Dojo and CSS strategy


3.2.1    hohcsstag
This tag inserts CSS definitions in JSP pages at the rendering time. It should be placed in the page head element. In the WebSphere Portal environment, this tag should be added in the Default.jsp file.

<mt:hohcsstag />

 

 3.2.2    hohstatictag
hohstatictag is a custom tag built for the static message scenario. It has five attributes:

  • msgid: This is the primary key used to identify a message from the cache. This attribute is mandatory.
  • label: This is the text which will be associated with a mouse-over action to display the message.
  • style: This is the style definition that will be used to decorate the label above. This is the place where the user could overwrite CSS arributes for the label.
  • bubblestyle: This is the place where the user could overwrite CSS attributes for the message bubble.
  • img: If you need to enable the hover-over on an image instead of a text label, you can use this attribute and pass the path to your image. If this attribute appears in the tag, the value in the “label” and the “style” attributes will be ignored.


A static message example --

 Msg_id Msg_title Msg_content Color_cd
 1 Household A household includes all the persons who occupy a housing unit. Infor

 JSP Fragment where the hohstatictag is used –

<mt:hohstatictag msgid="1" label="Households" style="font-weight:bold"/> //text

<mt:hohstatictag msgid="1" img="/img/myimage.jpg" /> //image 

 3.2.3    hohvariabletag and hohparamtag
hohvariabletag and hohparamtag work together to support variable messages. The “hohvariabletag” has the same four attributes as the “hohstatictag” tag. One “hohparamtag” tag holds one name-value pair. The tokens in the message will be replaced with the values passed in from the hohparamtag when html elements are generated. The following is an example of how to use the custom tag.

A variable message example--

Msg_id 
Msg_title
Msg_content
Color_cd
 2RecognitionMy retention rate is ${rate} and my goal is ${goal}. data


JSP Fragment where the hohvariabletag and hohparamtag are used together –

<mt:hohvariabletag msgid="2" label="<strong>My goals</strong>">
    <mt:hohparamtag paramName="rate" paramValue="<%= dao.getRate() %>"/>
    <mt:hohparamtag paramName="goal" paramValue="100"/>
</mt:hohvariabletag> 


3.2.4    hohgenerictag
This tag has been created to provide a unified API for both static and variable messages. This tag can replace the “hohstatictag” or “hohvariabletag” without any syntax change. But there will be a minor performance cost if you use this tag on the static-message scenario instead of the hohstatictag.

Published at DZone with permission of its author, Ming Yuan.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Andrew Crawford replied on Tue, 2008/10/21 - 8:09pm

I know you are trying to do this without Javascript, but seriously, it's only one line to include a script library like OverLib and one or two lines to actually use it in your code. No extra CSS necessary.

There's also nothing stopping you from using JSP scriptlets to make sure multiple messages will still point to the same reference.

Dmitry Namiot replied on Wed, 2008/10/22 - 2:29pm

See this component from Coldtags suite: Ajax popup

Venkata Prasad replied on Tue, 2008/11/04 - 4:46am

Hello .. I am unable to find the downloadabel Jar file link. Is it free or commercial

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.