后来添加的 Ajax 复合组件（4）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-20 19:03 | 只看该作者

后来添加的 Ajax 复合组件（4）

使用 <composite:clientBehavior> 添加 Ajax 支持为了让页面作者能够将 Ajax 添加到 <util:icon> 组件内的链接，我使用 <composite:clientBehavior> 标记，如清单 5 所示：
清单 5. <util:icon 复合组件，版本 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
   <composite:attribute    name="image" required="true"/>
   <composite:actionSource name="link"  targets="#{cc.clientId}:iconForm:link"/>
   <composite:clientBehavior name="click"
                           event="action"
                        targets="#{cc.clientId}:iconForm:link"/>
</composite:interface>

<composite:implementation>
   <div id="#{cc.clientId}">
      <h:form id="iconForm">
         <h:commandLink id="link" immediate="true">
            <h:graphicImage value="#{cc.attrs.image}"/>
         </h:commandLink>
      </h:form>
   </div>
</composite:implementation>
</html>

未归档的 <composite:clientBehavior> 标记由 JSF 2.0 专家组的一个小组进行了充实。它是在 JSF Reference Implementation (Mojarra) 中实现，但并没有针对 JSF 2.0 的记录，因此，您不会在 Javadocs 或 JSF 规范中找到关于它的任何信息。
缺少的文档称为规范 bug（参见获取链接以了解更多信息）。JSF 专家组将向规范和 Javadocs 添加文档来修复这一 bug。

<composite:clientBehavior> 标记为包含在复合组件中的一个组件公开一个 Ajax 事件。在中，我使用逻辑名称 click 声明了一个客户端行为，该名称与一个真实事件相关联 — 图标链接触发的 action 事件。下面总结了 <composite:clientBehavior> 标记的有效属性：

name：页面作者使用的事件名称。
default：true 或 false。如果为 true，则使用 name 属性指定的事件为默认事件。
event：事件的实际名称。
targets：组件 ID 的空格分隔列表，JSF 将行为重新定位到这些组件。

现在页面作者可以将 Ajax 行为附加到图标组件了，如清单 6 所示：
清单 6. facelet，版本 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?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

utputStylesheet library="css" name="styles.css"/>
<title>#{msgs.windowTitle}</title>
</h:head>

<h:body>
<h

utputStylesheet library="css" name="styles.css"/>

<h

utputText 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

utputText id="readout" value="#{fontSettings.size}em"/>
   </h:panelGrid>

   <h

utputText id="fontPreview" value="Aa"
style="font-size: #{fontSettings.size}em; font-style: italic"/>

</h:body>
</html>

在复合组件外呈现组件在  中，我为 <f:ajax> 标记的 render 属性指定了 readout 和 fontPreview 组件。请注意，我为这些组件标识符添加了一个冒号作为前缀。
这个冒号迫使 JSF 从组件层次结构的顶部开始搜索组件，否则，JSF 将从离 Ajax 所附加的组件最近的命名容器（通常为一个表单）开始搜索。在图标示例中，该组件为图标的链接，表单为图标的包含该链接的表单。如果删除了冒号，JSF 将开始从图标表单中搜索 readout 和 fontPreview 组件，这将产生错误。

在  中，我向图标添加了一个 <f:ajax> 标记。当用户单击图标时，JSF 对服务器进行 Ajax 调用；当调用返回时，JSF 呈现 readout 和 fontPreview 组件。
如果让我选择，我可以在图标的接口中向 <composite:clientBehavior> 标记添加一个 default="true" 属性。这使页面作者不必指定 click 事件，将  中的 <f:ajax> 标记精减为一个 <f:ajax render=":readout :fontPreview">。

收藏分享评分

回复引用

订阅 TOP

返回列表