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

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

  • submit to reddit
2. Message bubbles and messages

2.1    Message bubbles
A message bubble is a rectangle information window containing a message. Each bubble has one color-coded title compartment and one content compartment. The window is decorated by CSS definitions. The image below illustrates a sample message bubble. 


   Figure 1 – a hover-over-help message bubble

Bubbles are not viewable in the webpage until the user moves his/her mouse over action labels or images. In this case, the mouse cursor will turn into a finger-pointing hand and the pertaining bubble window will pop up near the hand.

2.2    Data structure
The message contents vary from static to dynamic considerably. However, all messages can share a common data structure, which typically consists of four parts:

•    Message ID: This is the primary key in each message, which is represented as a unique number. Given any single message ID, the framework is able to identify one and only one message.
•    Message title: This is a character string displayed in the title compartment in a bubble window.
•    Message content: This is character string that refers to the detail of a help message. The message content can contain HTML elements.
•    Color code: This is a character string representing the background color scheme of a bubble window. The value must be one of the following strings: “infor”, “data”, “warning”, or “link”.

2.3    Message types
Based on the dynamicity of the contents, we categorized all messages into three types. Each of the types is described in this section, with samples provided.

2.3.1    Static Messages
This type of message is considered static because its contents always retain the same. A static message can be the definition of a concept, the explanation of a field, or the instruction of a user action. The same messages will appear to any user on the same page when the page is visited. Valid examples include:

•    This is a <b>example</b> of a static message.
•    Click on the button below to submit your request.

2.3.2    Variable Messages
These messages contain replaceable variables which are represented by tokens. A token is a non-whitespace character string surrounded by “${” and “}”. The token will be completely replaced by its actual value at the page rendering time on the server. The value is based on user data, and normally will not change for a longer-than-user-session period. From users’ perspectives, the same user will see the same message with his customized values when browsing the same page, but different users may see different messages. The following are examples of valid messages in this category:

•    Your first name ${firstname}.
•    Your annual goal is to sell ${yourgoalnumber} cars. 

2.3.3    Dynamic Messages
The messages in this category are the most dynamic ones and contain variables represented by tokens, as well. However, the actual values are populated based on the data associated to the user session. If it happens that a user session is shared by multiple applications, these values may be changed even without a page refresh. This situation typically occurs in portal applications where multiple portlets can access the same user session.  It is possible that the same user will read different messages at a different time on the same page. The examples are –

•    You have talked to ${anumber} clients today.
•    It is ${servertimestamp} now.


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.)


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.