Java开发网 Java开发网
注册 | 登录 | 帮助 | 搜索 | 排行榜 | 发帖统计  

您没有登录

» Java开发网 » 技术文章库  

按打印兼容模式打印这个话题 打印话题    把这个话题寄给朋友 寄给朋友    该主题的所有更新都将Email到你的邮箱 订阅主题
flat modethreaded modego to previous topicgo to next topicgo to back
作者 [轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven
kam





发贴: 119
积分: 30
于 2004-07-28 14:06 user profilesend a private message to usersearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
[翻译]JSF(JavaServer Faces) 介绍
by Budi Kurniawan 07/30/2003 from http://www.onjava.com
英文原文

  JavaServer Pages(JSF) 在 Java 的 WEB 编程中已经被认为是下一个重大的事件。通过 JSF ,你可以在网页上使用 WEB 组件,来捕获用户行为产生的事件。不远的将来,Java 工具将支持这个技术,开发 WEB 应用程序将与我们现在开发 SWING 程序类似:拖放控件、写事件侦听器。本文是一个 JSF 的简要介绍,并且提供一个 JSF 的例子,用来展示 JSF 的事件驱动特性。要理解本文,您需要对 servlets, JSP, JavaBeans, 与标签库有一定的理解。

  首先,一个 JSF 应用就是一个 servlet/JSP 应用。它有一个配置描述符,有 JSP 页面、客户定制标签、静态资源等等。不同的是,JSF 应用是事件驱动的。你通过写一个事件侦听类来决定应用程序的行为。以下建立一个 JSF 应用所需要的几个步骤:
1、建立 JSP 页面,用 JSF 组件包装 HTML 元素。
2、写一个 JavaBean 用来保持用户输入与组件数据的状态。
3、写一个事件侦听器来决定当某事件发生时应该有什么反映,比如用户点击了一个按钮或者提交了表单。JSF 支持两个事件:ActionEvent 与 valueChangeEvent 。ActionEvent 是针对用户提交表单与点击按钮的,而 valueChangeEvent 是当一个 JSF 组件改变了时触发。

  现在,让我们来看一下 JSF 动作的细节。

JSF 怎样工作

  JSP 页面是 JSF 应用的用户接口。每个页面包括一些 JSF 组件用来描述 WEB 控件,如表单、输入框、按钮等等。组件可以嵌入另一个组件中,正如输入框可以在表单中。每个 JSP 页面就这样表示为组件树。JaveBeans 从用户的请求中获取数据并存储。

  这是有意思的部分:每当用户做任何事情,如点击按钮或者提交表单,都有事件产生。然后事件消息通过 HTTP 传到服务器。在服务器端,是一个配置了叫做 Faces servlet 的特殊 servlet 的 WEB 容器。Faces servlet(javax.faces.webapp.FacesServlet)是所有 JSF 应用的引擎。每个 JSF 应用在 WEB 容器中都有独立的 Faces servlet 。另一个重要的对象是 javax.faces.context.FacesContext , 它包括了所有关于当前用户请求的必要信息。

  Faces servlet 的后台处理是相当复杂的。然而你没有必要了解这些细节,只需要记住:Faces servlet 为 JSP 页面创建了组件树,对组件树的控制又对应着事件。Faces servlet 知道怎么去创建组件树,因为它已经访问了当前应用中所有的 JSP 页面。Faces servlet 还会创建一个 Event 对象,并把它传递给所有注册过的侦听器。你可以通过与当前请求相对应的 FacesContext 得到这个页面的组件树。

  客户端浏览器上 WEB 控件产生的事件,被包含在一个 HTTP 请求中,放在一起还有如浏览器类型、请求地址等其它信息。因此,所有需要 Faces servlet 处理的请求必须指向这个 servlet 。那你怎样通过调用 Faces servelt 来处理每个 HTTP 请求呢?很容易,只需要在配置描述符里用一个 servlet-mapping 元素把一个特殊的 URL 式样映射到 Faces servlet。通常,你会用到 /faces/* 样式,如下所示:

<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

  请求地址必须包含有在 <url-pattern> 元素中描述的样式。这个要求不容易达到。另外也需要注意的是 <servlet> 元素,它包含 Faces servlet ,有一个 <load-on-startup> 元素,用来确是否应用程序第一次启动时 servlet 是否加载。
  为了捕获组件产生的事件,你需要为这个组件写一个侦听器,并把它注册给这个组件。通过在表示组件的客户端标签中嵌入 <action_listener> 元素能做到这一点。例如,为了让一个名叫 jsfApp.MyActionListener 的事件侦听器,来捕获一个名叫 submitButton 的命令按钮产生的事件,在你的 JSP 页面中写如下的代码即可:

<h:command_button id="submitButton" label="Add" commandName="submit" >
<f:action_listener type="jsfApp.MyActionListener" />
</h:command_button>

  一个 action listener 必须实现 javax.faces.event.ActionListener 接口,而一个 value-changed listener 必须实现 java.faces.event.valueChangedLister 接口。下面让我们来创建一个简单的 JSF 应用,以展现 JSF 是怎么样事件驱动的。

一个简单的 JSF 应用

  我们将创建一个简单的应用,它可以实现对二个数字相加。为了运行这个应用,你需要准备 TOMCAT5 与 JSF v1.0 EA4(包含在 Java Web Services Developer Pack (JWSDP) 1.2中)。这个应用程序包括:
adder.jsp JSP 页面。
NumberBean 存放用户数据的 JavaBean
MyActionListener 事件侦听器
web.xml 配置描述文件
  为了使这个应用能正常工作,还需要几个 jar 文件,包括 JSF 标准实现与其它类库。如果你安装了 JWSDP 1.2,你就可以在 jsflib 目录下找到所需要的这些文件。把这些 .jar 文件拷贝到 WEB-INF/lib 目录下。下面是整个的 .jar 与 .tld 文件列表:
jsf-api.jar 包含有 Faces servlet 与其它相关 javax.faces 包下面的类
jfs-ri.jar 是 JSF 的参考实现
jstl_el.jar
standard.jar
  此外,一个 JSF 的应用还需要如下的类库,它们是 Apache Jakarta 项目的一部分:
commons-beanutils.jar
commons-digester.jar
commons-logging.jar is

以下的几小段讨论这个 JSF 示例的每个部分。最后的一小段,“编译与运行”,解释 JSF 应用怎么样运行。

创建目录结构

  首先为你的 JSF 应用创建一个目录结构。在 TOMCAT 中,它在 webapps 目录下。“图1”描述了叫做 myJSFApp 的应用程序的目录结构。



写配置描述符

  与其它的 servlet/JSP 应用一样,这个应用程序也需要一个配置描述文件。如“清单1”表示。

Listing 1. The deployment descriptor (the web.xml file)

<?xml version="1.0"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd";>

<web-app>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>

  在这个配置描述文件中有二个部分。 <servlet> 元素注册 Faces servlet , <servlet-mapping> 元素声明任何包含有 /faces/ 式样的请求地址,必须传递给 Faces servlet 。

创建 JSP 页面

  一个叫做 adder.jsp 的 JSP 页面提供用户接口,如“清单2”所示:

Listing 2. The adder.jsp page

<%@ taglib uri="http://java.sun.com/jsf/html"; prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core"; prefix="f" %>
<html>
<head>
<title>Add 2 numbers</title>
</head>
<body>
<jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" />
<f:use_faces><br />
<h:form id="addForm" formName="addForm" ><br />
First Number:<br />
<h:input_number id="firstNumber" valueRef="NumberBean.firstNumber" /><br />
Second Number:
<h:input_number id="secondNumber" valueRef="NumberBean.secondNumber" /><br />
Result:
<h:output_number id="output" valueRef="NumberBean.result"/><br>
<h:command_button id="submitButton" label="Add" commandName="submit" >
<f:action_listener type="jsfApp.MyActionListener" />
</h:command_button>
</h:form>
</f:use_faces>
</body>
</html>

  我们首先定义了俩个标签,它用到 JSF 的两个标签库:html 与 core 。这俩个标签库的定义可以在 jsf-ri.jar 文件中找到,所以你不用为它担心。它们的前缀分别是 h / f 。
<%@ taglib uri="http://java.sun.com/jsf/html"; prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core"; prefix="f" %>
   <jsp:useBean> 这个动作元素定义 NumberBean JavaBean 为 session scope 。
   <jsp:useBean id="NumberBean" class="jsfApp.NumberBean" scope="session" />
  接着是 JSF 控件了。注意 JSF 控件需要嵌入到 <f:use_faces> 标签中:
<f:use_faces>
...
</f:use_faces>
  在这里面,有一个表单。
<h:form id="addForm" formName="addForm">
...
</h:form>
  内嵌在这个表单里的是二个 input_numbers, 一个 output_number, 与一个 command_button 。
第一个数字:
<h:input_number id="firstNumber" valueRef="NumberBean.firstNumber" /><br />
第二个数字:
<h:input_number id="secondNumber" valueRef="NumberBean.secondNumber" /><br />
结果:
<h:output_number id="output" valueRef="NumberBean.result" /><br />
<h:command_button id="submitButton" label="Add" commandName="submit">
<f:action_listener type="jsfApp.MyActionListener" />
</h:command_button>
  注意命令按钮的事件侦听器。“图2”描述了这个 JSP 页面的组件树(树根省略)。

  主组件是表单,它有四个子组件。

写对象模型

  在这个应用中,你需要用一个 JavaBean 来存二个数字与相加的结果。“清单3”是这个 JavaBean 的内容:NumberBean

Listing 3. The NumberBean JavaBean

package jsfApp;
public class NumberBean {
int firstNumber = 0;
int secondNumber = 0;

public NumberBean () {
System.out.println("Creating model object");
}

public void setFirstNumber(int number) {
firstNumber = number;
System.out.println("Set firstNumber " + number);
}

public int getFirstNumber() {
System.out.println("get firstNumber " + firstNumber);
return firstNumber;
}

public void setSecondNumber(int number) {
secondNumber = number;
System.out.println("Set secondNumber " + number);
}

public int getSecondNumber() {
System.out.println("get secondNumber " + secondNumber);
return secondNumber;
}

public int getResult() {
System.out.println("get result " + (firstNumber + secondNumber));
return firstNumber + secondNumber;
}
}

写事件侦听器

  命令按钮的事件侦听器是这个 JSF 应用的最有趣的部分。它表述一个事件怎么样引起一个侦听器去侦听。侦听器简单地只是输出信息到控制台。然而,它显示了重要的信息,如 JSP 页面组件树的层次结构,正是这些组件触发了事件。“清单4”展示事件侦听器:

Listing 4. The action listener for the command button (MyActionListener.java)

package jsfApp;

import java.util.Iterator;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;
import javax.faces.event.PhaseId;
import javax.faces.tree.Tree;

public class MyActionListener implements ActionListener {

public PhaseId getPhaseId() {
System.out.println("getPhaseId called");
return PhaseId.APPLY_REQUEST_valueS;
}

public void processAction(ActionEvent event) {
System.out.println("processAction called");

// the component that triggered the action event
UIComponent component = event.getComponent();
System.out.println("The id of the component that fired the action event: "
+ component.getComponentId());

// the action command
String actionCommand = event.getActionCommand();
System.out.println("Action command: " + actionCommand);

FacesContext facesContext = FacesContext.getCurrentInstance();
Tree tree = facesContext.getTree();
UIComponent root = tree.getRoot();

System.out.println("----------- Component Tree -------------");
navigateComponentTree(root, 0);
System.out.println("----------------------------------------");
}

private void navigateComponentTree(UIComponent component, int level) {
Iterator children = component.getChildren();

// indent
for (int i=0; i<level; i++)
System.out.print(" ");

// print component id
System.out.println(component.getComponentId());

// navigate children
while (children.hasNext()) {
UIComponent child = (UIComponent) children.next();
navigateComponentTree(child, level + 1);
}
}
}

编译与运行

  为了编译这个应用,我们转到 myJSFApp/WEB-INF/classes 这个目录。如果你用的是 windows 系统,打出如下命令:
javac -classpath ../lib/jsf-api.jar;../lib/jsf-ri.jar;../../../../common/lib/servlet.jar jsfApp/*.java
  注意你必须用到 lib 目录下的类库与 servlet.jar 库。

  然后运行 Tomcat ,在地址栏输入如下地址:
http://localhost:8080/myJSFApp/faces/adder.jsp
  注意你在 JPS 页面文件名前用了 /faces/ 式样。然后可以在浏览器中看到”如图3“所示:

  在控制台,你可以看到如下信息:
Model Object Created
get firstNumber 0
get secondNumber 0
get result 0
getPhaseId called
  现在在二个输入框中分别输入二个数字,然后点击 ADD 按钮。浏览器将显示计算结果“如图4”:

  更重要的,再检查一下控制台,看到如下信息:
get firstNumber 0
get secondNumber 0
processAction called
The id of the component that fired the action event: submitButton
Action command: submit
----------- Component Tree -------------
null
addForm
firstNumber
secondNumber
output
submitButton
----------------------------------------
Set firstNumber 10
Set secondNumber 20
get firstNumber 10
get secondNumber 20
get result 30

总结
  在这篇文章中,你学到了 JSF 区别于其它 servlet/JSP 应用的最重要的特点:事件驱动。你也创建了一个包含一个 JSP 页面的简单应用。更重要的,你写了能响应事件的侦听器。
  实际应用中的 JSF 应用复杂得多,通常是很多 JSP 页面。这样情况下,你需要从一个页面导航到另一个页面。然而这应是另一篇文章的主题。

下面是原代码下载
CODE



澳門JAVA CLUB

大家可常來交流, 增進兩岸三地的java技術, 提升我國人電腦水平

话题树型展开
人气 标题 作者 字数 发贴时间
12860 [轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven kam 11060 2004-07-28 14:06
11119 Re:[轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven lcwling 18 2004-07-28 20:47
11185 Re:[轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven kam 90 2004-07-28 22:05
11166 Re:[轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven libinbin 8 2004-07-29 10:17
12162 Re:[轉貼][翻译]JSF(JavaServer Faces) 介绍 by fajaven neverlose 20 2004-08-14 04:01

flat modethreaded modego to previous topicgo to next topicgo to back
  已读帖子
  新的帖子
  被删除的帖子
Jump to the top of page

   Powered by Jute Powerful Forum® Version Jute 1.5.6 Ent
Copyright © 2002-2021 Cjsdn Team. All Righits Reserved. 闽ICP备05005120号-1
客服电话 18559299278    客服信箱 714923@qq.com    客服QQ 714923