首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

后来添加的 Ajax 复合组件(2)

后来添加的 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>
      <hutputStylesheet library="css" name="styles.css"/>
      <title>#{msgs.windowTitle}</title>
   </h:head>
   
   <h:body>
      <hutputStylesheet library="css" name="styles.css"/>
      
      <hutputText 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>
         
        <hutputText id="readout" value="#{fontSettings.size}em"/>
      </h:panelGrid>
            
      <hutputText 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 个清单展示应用程序中除图标复合组件以外的所有代码。接下来将介绍图标复合组件。
返回列表