How to Use the Popup Balloon Component

The in-screen-popup component consists of a hidden image/table that is shown once the information is retrieved. The border image frames the table that holds the text, giving it a more elegant look. The contents of the in-screen-popup is configurable through the body of the JSF tag.  The tag library for the popup can be accessed using the declaration <%@taglib prefix="ui" uri="http://java.sun.com/blueprints/ui" %>.

An example of the JSF popup component's use is as follows:

<ui:PopupTag id="pop1" xmlHttpRequestURL="DetailServlet?animalcode="
elementNamePairs="name=value1,description=value2,image=imageId">

<img id="spaceImage" height="10px" width="16px" src="images/spacer.gif" align="left">

<table border="1" width="260px" bgcolor="#ffffff" cellpadding="5" cellspacing="5">
<tr>
<th align="right"><span id="title1">Breed:</span></th>
<td><span id="value1">value1</span></td>
</tr>
<tr>
<th align="right" valign="top"><span id="title2">Desription:</span></th>
<td><span id="value2">Value2</span></td>
</tr>
<tr>
<td colspan="2" align="center"><img name="image" id="imageId" src=""
width="120" height="90" alt="[Loading Image...]" border="2"/></td>
</tr>
</table>
</
ui:PopupTag>

JSP Tag Attributes

Above, the component tag name is "PopupTag", that has the following attributes:



The text portion of the "PopupTag" (shown in BLUE) is the actually markup that is being displayed in the popup. The developer currently has to set the size of the table to make sure it doesn't exceed the size of the background images, which at the time was the most flexible alternative.  To help center the table on the image background a transparent GIF was delivered with the JSF component, to be used to help position the table so it looks centered. Use the image's width attribute to add or subtract spacing. Creating the border background image takes a good amount of patience to align the top, middle and bottom images that have to match up with the arrows that point from each of the four quadrants where the the popup may be displayed.  This derivation is dependent on how the screen is scrolled inside the browser window. 

 The markup that is displayed in the popup can be either in JSF or HTML format.  The popup display data can be variable length because the background image used for the popup middle image does "stretch" but the position algorithm is set and works best with about 5-10 lines of data.  The calling component can be either a JSF component or plain HTML because the link is made through a Javascript function call using the name of the target popup as a parameter. In the case below, this span of text is calling the "pop1" PopupTag component from above, with "LAB" to be appended to the URL in the "xmlHttpRequestURL" attribute.


<span onmouseover="show('pop1', event, 'LAB')" onmouseout="hide('pop1')">Labrador Retriever</span>

The positioning of the popup is dependent on the position of the cursor. The quadrant in which the popup is displayed is derived based on where in the browser window the cursor is, taking into mind how the screen is scrolled. The algorithm has been refined to minimize the popup displaying out of the viewable area as much as possible.


NOTE: Be cognizant of the effect different HTML Document Type Definitions (DOCTYPE) have on your component.  In the case of the Popup Balloon, we ran into a problem when the http://www.w3.org/TR/html4/loose.dtd DOCTYPE interferred with the positioning algorythm in certain browsers.




© Sun Microsystems 2006. All of the material in The Java BluePrints Solutions Catalog is copyright-protected and may not be published in other works without express written permission from Sun Microsystems.