JSF 2 简介: 后来添加的 Ajax 复合组件
2010-07-13 00:00:00 来源：WEB开发网未归档的 <composite:clientBehavior>
<composite:clientBehavior> 标记由 JSF 2.0 专家组的一个小组进行了充实。它是在 JSF Reference Implementation (Mojarra) 中实现，但并没有针对 JSF 2.0 的记录，因此，您不会在 Javadocs 或 JSF 规范中找到关于它的任何信息。
缺少的文档称为规范 bug。JSF 专家组将向规范和 Javadocs 添加文档来修复这一 bug。
<composite:clientBehavior> 标记为包含在复合组件中的一个组件公开一个 Ajax 事件。在 清单 5 中，我使用逻辑名称 click 声明了一个客户端行为，该名称与一个真实事件相关联 — 图标链接触发的 action 事件。下面总结了 <composite:clientBehavior> 标记的有效属性：
name：页面作者使用的事件名称。
default：true 或 false。如果为 true，则使用 name 属性指定的事件为默认事件。
event：事件的实际名称。
targets：组件 ID 的空格分隔列表，JSF 将行为重新定位到这些组件。
现在页面作者可以将 Ajax 行为附加到图标组件了，如清单 6 所示：
清单 6. facelet，版本 2
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:corejsf="http://corejsf.com"
xmlns:util="http://java.sun.com/jsf/composite/util">
<h:head>
<h:outputStylesheet library="css" name="styles.css"/>
<title>#{msgs.windowTitle}</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputText value="#{msgs.fontSizeHeading}"
style="padding-left: 30px; font-size: 2em;"/>
<h:panelGrid columns="3" style="padding-left: 80px;">
<util:icon id="minus" image="#{resource['images:minus.gif']}">
<f:ajax event="click" render=":readout :fontPreview"/>
<f:actionListener for="link" type="com.clarity.FontSelectionListener"/>
</util:icon>
<util:icon id="plus" image="#{resource['images:plus.gif']}">
<f:ajax event="click" render=":readout :fontPreview"/>
<f:actionListener for="link" type="com.clarity.FontSelectionListener"/>
</util:icon>
<h:outputText id="readout" value="#{fontSettings.size}em"/>
</h:panelGrid>
<h:outputText id="fontPreview" value="Aa"
style="font-size: #{fontSettings.size}em; font-style: italic"/>
</h:body>
</html>
在复合组件外呈现组件
在 清单 6 中，我为 <f:ajax> 标记的 render 属性指定了 readout 和 fontPreview 组件。请注意，我为这些组件标识符添加了一个冒号作为前缀。
这个冒号迫使 JSF 从组件层次结构的顶部开始搜索组件，否则，JSF 将从离 Ajax 所附加的组件最近的命名容器（通常为一个表单）开始搜索。在图标示例中，该组件为图标的链接，表单为图标的包含该链接的表单。如果删除了冒号，JSF 将开始从图标表单中搜索 readout 和 fontPreview 组件，这将产生错误。
在 清单 6 中，我向图标添加了一个 <f:ajax> 标记。当用户单击图标时，JSF 对服务器进行 Ajax 调用；当调用返回时，JSF 呈现 readout 和 fontPreview 组件。
如果让我选择，我可以在图标的接口中向 <composite:clientBehavior> 标记添加一个 default="true" 属性。这使页面作者不必指定 click 事件，将 清单 6 中的 <f:ajax> 标记精减为一个 <f:ajax render=":readout :fontPreview">。
结束语
在本文中，我展示了 JSF 2 如何（尽管使用了未经验证的标记）使页面作者能够轻松地将 Ajax 功能添加到复合组件。确实，可以看到，您可以使页面作者能够将发送大量 HTTP 请求的复合组件转变为发送 Ajax 请求的组件。所有这些都只需在复合组件的接口中添加一行 XML 代码来完成。
在 JSF 2 简介的下一期，我将离开复合组件的话题，探讨如何在 JSF 2 中使用 Contexts and Dependency Injection (CDI)。
本文示例源代码或素材下载
中查找“JSF 2 简介: 后来添加的 Ajax 复合组件”更多相关内容
中查找“JSF 2 简介: 后来添加的 Ajax 复合组件”更多相关内容更多精彩
赞助商链接
