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"
%>.
<ui:PopupTag id="pop1" xmlHttpRequestURL="DetailServlet?animalcode="
elementNamePairs="name=value1,description=value2,image=imageId">ui
<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>
</:PopupTag>
<response>
<name>Labrador Retriever</name
>
<description>A breed of dog originating in Newfoundland, having a short coat and a tapering tail.</description
>
<image>../images/dog2.gif</image
>
</response>
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.