一个简单的JSF应用程序(使用exdel工具)

一个简单的JSF应用程序(使用exdel工具)
在这个指南中，我们将给你展示一个没有用任何特别的IDE开发的JSF应用程序的例子。在这里，我们将不会详述JSF的原理，有很多的书和网站介绍这方面的内容。取而代之的是，我们将快速地进入这个简单应用程序的结构之中，我们希望这个基础的例子能带你开发高级的应用程序。

JavaServer Faces是什么?

经我们的许诺，我们将尽可能保持简单。 JavaServer Faces是一个使用JAVA构建WEB应用程序的新的框架。 JavaServer Faces 给你提供了下列主要的特性：

页面导航规则

标准的用户接口组件象 input fields, buttons, and links

用户输入验证

容易的错误处理

Java bean 管理

事件处理

国际化支持

 

JSF 提供可用于任何WEB应用程序的公共组件，这样可以使你专注在你自己的特殊应用之中 (而不是担心诸如如何创建从一个页面到另一个页面的链接之类)，我们的目标将变得更加清晰。

你需要什么？

为了完成这个指南，你需要下列软件:

JDK 1.4

Tomcat 5.0或其它的servlet容器 (JBoss, Resin, JRun)，在这个例子中我们使用Tomcat。

Ant

 

我们将提供这个项目中的许多文件，你不需要自己创建它们。我们将主要精力集中在目前的JSF应用程序上，而不是创建 Ant scripts或 web.xml文件。这些文件我们提供，你仅需要从这个指南中复制和粘贴内容。

我们准备构建什么？

现在你已经猜到了，我们将用JSF构建一个"Hello, world" (实际上是"Welcome to JSF, <user>!") 类型的应用程序。 它将使你有一个坚实JSF起步。

我们将创建两个页面。第一个页面提示用户键入他的名字，而第二个页面将显示一条问候语。 下面是输入页：



这是输出结果页：

JSF 应用程序的结构

在jsfks.zip文件中我们为你提供了这个应用的基本的结构，你可以下载download和解压，在解压后你将看到下面这个结构：

jsfks
/ant
build.xml
/JavaSource
/WebContent
/WEB-INF
/classes
/lib
jsf-impl.jar
jsf-api.jar
faces-config.xml
web.xml
/pages

这是一个JSF应用的典型结构，现在，让我们穿越这个结构的不同部分。
 

文件夹或文件	说明
jsfks	项目文件夹
/ant	这个文件夹包含缺省的ANT构建文件build.xml。
/JavaSource	这个文件夹放你的 Java源文件和属性文件
/WebContent	这个文件夹保存真正的 Web 应用文件，它们被应用服务器或 servlet 容器使用。
/WEB-INF	这个在WebContent 内的文件夹保存 Web应用运行时使用的文件，但这些文件对浏览器是不可见的。
/classes	这个在WEB-INF 内的文件夹保存已编译的Java类文件和从JavaSource复制来的属性文件。
/lib	这个在WEB-INF 内的文件夹保存你的应用所需要的库文件。
jsf-impl.jar         jsf-api.jar	这两个在lib 文件夹内的文件是 JavaServer Faces v1.1参考实现所带的库文件，每一个JSF应用都需要这些文件。
web.xml	这个在WEB-INF 文件夹内的文件是你的WEB 应用的部署描述符文件，这是一个 XML 文件，描述构成你的应用的servlets 和其它的组件。
faces-config.xml	这个在WEB-INF 文件夹中的文件是JavaServer Faces 配置文件，这个文件列出了资源bean 和导航法则。
pages	这个在WebContent下的文件夹保存JSP 和HTML 陈述页。

我们为你提供了两个完成了的项目文件web.xml and build.xml, 这样你不需要花费时间创建它们。(这个指南不讨论如何创建这种文件)

我们将完成下列步骤：

创建JSP页面

定义一个导航法则

创建一个managed bean

创建一个资源包属性文件

编辑 JSP页面

创建 index.jsp文件

编译这个应用程序

配置和运行这个应用程序

让我们开始吧。
 

项目下载

首先请注意，如果你想省略一些步骤而运行这个WEB应用，那么我们给你提供了这个完整的应用，如果你想这样做，你能download 和解压jsfks-done.zip。然后省略"compile" step 并从下面开始。

创建JSP页

在WebContent/pages/下，创建inputname.jsp 和greeting.jsp 文件，你仅仅需要创建JSP文件，目录结构已经存在。

稍后我们将完成这些文件的内容。

现在我们有了两个JSP页面，我们能创建导航法则了。

导航

导航是JavaServer Faces的核心。这个应用的导航法则在faces-config.xml 文件中描述。 这个文件已经存在于基本的目录结构中。你只需要创建它的内容。

在这个应用中,我们恰恰想从inputname.jsp 到greeting.jsp。. 如图，它看起来有些象这样：



Image from Exadel Studio Pro

图片中的导航法则在下面定义。这个法则说如果执行inputname.jsp的结果是greeting,则从视图页inputname.jsp到视图页greeting.jsp，所有的法则都在下面：

<navigation-rule>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>greeting</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>

 

当然，这是非常简单的导航法则，你能非常容易地创建更复杂的。 为了阅读更多的导航法则的内容，请访问JSP Navigation Example

创建 Managed Bean

下一步, 我们在JavaSource文件夹里创建jsfks目录，在jsfks文件夹里，我们创建一个PersonBean.java 文件。这个类直接了当，它是一个简单的Java bean ，有一个属性和setter/getter 方法。在用户点击提交按钮后，这个bean简单地捕获用户键入的用户名。bean的方法提供了JSP页和应用逻辑之间的桥梁。 (请注意JSP页面的name域必须准确匹配bean的name属性)

PersonBean.java

把这些代码放在PersonBean.java中：

package jsfks;

public class PersonBean {

String personName;

/**
* @return Person Name
*/
public String getPersonName() {
return personName;
}

/**
* @param Person Name
*/
public void setPersonName(String name) {
personName = name;
}
}

 

以后我们将看到如何把bean与JSP页面连接起来。

在faces-config.xmk中声明Bean

现在，我们在faces-config.xml的第二部分声明我们在上一步创建的Java bean。 这个片断定义bean的名字PersonBe
bbc9
an，下一行是bean的全名jsfks.PersonBean，request设置bean在这个应用中的范围。

 

<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>jsfks.PersonBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>
</managed-bean>

 

faces-config.xml

你的faces-config.xml 文件最终应该是这样：

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>
<navigation-rule>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>greeting</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule><managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>jsfks.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>

 

创建一个属性文件 (资源包）

属性文件带有 param=value对。在JSP页面中我们使用存储在属性文件中的信息。把信息从JSP页面中分离，不用编辑JSP页面我们便可以快速修改这些信息。

在 JavaSource/jsfks文件夹中创建一个bundle 文件夹并在其中创建messages.properties文件。我们需要把它放入JavaSource文件夹中， 这样在项目编译期间，属性文件将被复制到classes目录， 在那里java运行时能找到它。

messages.properties

把这些文本放入属性文件:

inputname_header=JSF KickStart
prompt=Tell us your name:
greeting_text=Welcome to JSF
button_text=Say Hello
sign=!

 

现在我们有了创建JSP页面所需的一切。

编辑JSP页

在jsks/WebContent/pages里已经创建了两个文件。

inputname.jsp

把下面的代码放入文件：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

<html>
<head>
<title>enter your name page</title>
</head>
<body>
<f:view>
<h1>
<h:outputText value="#{msg.inputname_header}"/>
</h1>
<h:form id="helloForm">
<h:outputText value="#{msg.prompt}"/>
<h:inputText value="#{personBean.personName}" />
<h:commandButton action="greeting" value="#{msg.button_text}" />
</h:form>
</f:view>
</body>
</html>

 

现在让我们解释这个文件顶部的重要部分：

 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

第一行告诉我们哪里去找 定义了HTML元素的JSF 标记，第二行告诉我们哪里去找 定义了code JSF 元素的JSF标记， 第三行装载属性文件(资源包) ，它包含在JSP页面中我们想要显示的信息。
 

 

<h:outputText value="#{msg.inputname_header}"/>

这个标记简单地告诉我们访问这个页面顶部定义的资源包，然后在属性资源文件中查找名为inputname_header的属性值并输出。
 

 

1 <h:form id="helloForm">
2   <h:outputText value="#{msg.prompt}"/>
3   <h:inputText id="name" value="#{personBean.personName}" />
4   <h:commandButton action="greeting" value="#{msg.button_text}" />
5 </h:form>

第一行、 使用JSF标记创建一个 HTML 表单。
第二行、 使用属性文件中prompt的值输出一个信息。
第三行、 创建一个HTML输入文本域。 这个id就是文本域的id。而value属性绑定到了我们先前创建的                   managed bean的属性。
第四行、. HTML 表单的提交按钮。 button的value属性来自属性文件。action属性设置为greeting, 它匹配 faces-config.xml文件中的"outcome"，这就是JSF知道导航的原因。
 

greeting.jsp

放这些代码在第二个JSP文件中：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>
<html>
<head>
<title>greeting page</title>
</head>
<body>
<f:view>
<h3>
<h:outputText value="#{msg.greeting_text}" />,
<h:outputText value="#{personBean.personName}" />
<h:outputText value="#{msg.sign}" />
</h3>
</f:view>
</body>
</html>

 

这个页面非常简单。首先，前面三行与第一个JSP页面相同。 这些行引入 JSF标记库和带有信息的属性文件 (资源包)

我们感兴趣的代码在<h3>..</h3> 标记之间。第一行取一个来自资源包的信息并在页面中输出。 第二行访问一个特定的Java bean的属性personName, 并在页面中输出它的内容。

一旦这个页面在 Web浏览器中显示，你将看到下面这些内容：

Welcome to JSF, name!

创建index.jsp文件

我们创建第三个JSP文件，它是一个没有功能的介绍页，它使用JSP标记"forward"转至inputname.jsp。

在WebContent文件夹中创建index.jsp文件。注意这个文件不象其它的JSP文件创建在pages文夹中。

有了Index.jsp文件，我们可以象下面这样启动我们的应用程序：

http://locahost:8080/jsfks/

 

现在把这些代码放入文件中：

<html>
<body>
<jsp:forward page="/pages/inputname.jsf" />
</body>
</html>

如果你注意到了forward的路径, 你会发现文件的后缀是.jsf 而不是.jsp。这是因为在

web.xml

文件中，

*.jsf是

URL 模式，它将被Tomcat内的JavaServer Faces servlet 处理，"forware"到“/pages/inputname.jsp"。
 

我们几乎已经完成了这个例子。

编译

我们为你提供了ant构建代码。为了构建这个应用，从ant文件夹运行build.xml：

 

ant build

 

配置

在你运行这个应用程序之前，在servlet容器内部我们需要配置它。我们需要在 Tomcat's {TomcatHome}/conf/server.xml file文件中注册一个上下文。

插入代码：

<Context debug="0"
docBase="Path_to_WebContent"
path="/jsfks" reloadable="true"/>

应该插在接近server.xml 文件的尾部，Host 元素内部而在</Host> 标记之前。 当然, Path_to_WebContent 需要用你系统的WebContent路径代替（如

c:/examples/jsfks/WebContent

).
 

运行

启动Tomcat 服务 (可能要用Tomcat's bin 目录中的startup.bat)。当Tomcat启动以后，打开浏览器并键入：: http://localhost:8080/jsfks. (端口 8080 是Tomcat的默认端口，尽管你的配置可能不同)。

尝试

在你做了这些后尝试修改应用程序总是好的学习经验，让我们尝试做一个简单的修改。

我们想初始化name值， 换句话说，当我们第一次运行这个应用时，输入文本域显示一个已存在的值。

在JSF中，这非常简单。在faces-config.xml 文件中我们能提供初始化值，在managed bean 部分，下面粗体形式的部分就是我们需要增加的。这些行声明了一个java.lang.String类型的属性，并设置它的值为JavaJoe.

<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>jsfks.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>personName</property-name>
<property-class>java.lang.String</property-class>
<value>JavaJoe</value>
</managed-property>
</managed-bean>

 

你甚至不需要重新编译，只要重新启动 Tomcat 并开始这个应用。