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

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

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

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

字体选择程序示例复合组件：基础如果您不熟悉如何使用或实现 JSF 2 复合组件，那么您可以从 “” 这篇文章中了解基本知识。

字体选择程序由 4 个文件组成：

中显示的页面，在 index.xhtml 中定义。
图标组件，位于 /resources/util/icon.xhtml 下。
一个侦听器（com.clarity.FontSelectionListener.java）。
一个 bean（com.clarity.FontSettings）。

图 2 展示了目录结构：
图 2. 字体选择程序示例的文件

清单 1 是所示页面的 facelet — index.xhtml：
清单 1. facelet (/web/index.xhtml)

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

<?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:actionListener for="link" type="com.clarity.FontSelectionListener"/>
      </util:icon>

      <util:icon id="plus" image="#{resource['images:plus.gif']}">
      <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>

中的 facelet 为图标组件声明一个名称空间，并在页面中使用该组件。这使用了 JSF 2.0 复合组件 101，详细信息请参见 “。”
请注意，两个图标都为图标的 link 组件配备了一个动作侦听器。当用户单击图标的链接时，JSF 调用服务器上的该侦听器，如清单 2 所示。
清单 2. 侦听器 (com/clarity/FontSelectionListener.java)

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

package com.clarity;

import javax.el.ELResolver;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;

public class FontSelectionListener implements ActionListener {
@Override
public void processAction(ActionEvent event)
      throws AbortProcessingException {
FacesContext c = FacesContext.getCurrentInstance();
ELResolver elResolver = c.getApplication().getELResolver();
FontSettings fs = (FontSettings)
   elResolver.getValue(c.getELContext(), null, "fontSettings");

if (((UIComponent)event.getSource()).getClientId().startsWith("minus"))
   fs.decrement();
else
   fs.increment();
}
}

在中，我查看触发事件的客户端标识符是否是 minus，如果是，我就知道用户单击了减号图标，然后我将减小字体大小。否则，我将增大字体大小。
请注意，侦听器会获取对 fontSettings 托管 bean 的引用。它通过获取对 Expression Language Resolver 的引用来完成此任务，只要给定了托管 bean 的名称，后者知道如何找到它们。fontSettings bean 如清单 3 所示：
清单 3. 字体设置 bean (com/clarity/FontSettings.java)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package com.clarity;

import java.io.Serializable;

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;

@Named
@SessionScoped
public class FontSettings implements Serializable {
private static int INCREMENT = 1;
private int size = 1;

public int getSize() { return size; }
public void setSize(int newValue) { size = newValue; }

public void increment() { size += INCREMENT; }
public void decrement() { size -= INCREMENT; }
}

前面的 3 个清单展示应用程序中除图标复合组件以外的所有代码。接下来将介绍图标复合组件。

收藏分享评分

回复引用

订阅 TOP

返回列表