如何使用弹出式气球组件

屏幕内的弹出式组件包含一个在完成信息检索时用于显示的隐藏图像/表。边框图像构成了包含文本的表的框架,从而使其外观变得更加漂亮。屏幕中的弹出式组件的内容是通过 JSF 标记的主体进行配置的。可以使用声明 <%@taglib prefix="ui" uri="http://java.sun.com/blueprints/ui" %> 来访问弹出式组件的标记库。

使用 JSF 弹出式组件的示例如下所示:

<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 标记属性

以上组件的标记名称为 "PopupTag",它具有以下属性:



"PopupTag" 的文本部分(以蓝色显示)是在弹出式组件中显示的实际内容。开发者目前必须设置表的大小以确保其不会超过背景图像的大小,这是现阶段最灵活的方法。为了帮助将表放在图像背景的中间,我们随 JSF 组件提供了一个透明的 GIF,用于帮助放置表以使其位于中心位置。可以使用图像的 width 属性来增加或缩减间距。创建边框背景图像时,需要非常耐心地对齐顶部、中间和底部图像,这些图像必须与显示弹出式组件的指向四个方向的箭头相匹配。弹出式组件的派生取决于屏幕在浏览器窗口内滚动的方式。

弹出式组件中显示的内容可以采用 JSF 或 HTML 格式。弹出式组件显示数据可以具有可变的长度,这是因为用于弹出式组件的中间背景图像能进行“拉伸”,而设置的位置算法在大约 5-10 行数据时效果最佳。进行调用的组件可以是 JSF 组件或普通 HTML,因为链接是通过 Javascript 函数调用并将目标弹出式组件名称作为参数建立的。对于下面这种情况,此段文本调用上面的 "pop1" PopupTag 组件,并在 "xmlHttpRequestURL" 属性中将 "LAB" 附加到 URL 上。


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

弹出式组件的位置取决于光标位置。显示弹出式组件的象限是根据光标在浏览器窗口中的位置来派生的,并考虑到屏幕的滚动方式。这种算法已进行了改进,以尽最大可能降低在可见区域之外显示弹出式组件的可能性。


注意:应认识到不同 HTML 文档类型定义 (DOCTYPE) 对组件造成的影响。对于弹出式气球组件,当 http://www.w3.org/TR/html4/loose.dtd DOCTYPE 与某些浏览器中的位置算法发生冲突时,就会出现问题。




© Sun Microsystems 2006。Java BluePrints Solutions Catalog 中的所有内容受版权保护,未经 Sun Microsystems 的明确书面许可,不得在其他产品中发布。