您的位置：首页 > Web前端 > JavaScript

JSF入门

2005-04-22 17:01 417 查看

第一章[/b]JSF[/b]的简述[/b]
[/b]
[thinker-yhm1218@hotmail.com]

一、什么是[/b]JSF
[/b]

[/b]
JSF即JavaServer Faces，是一种新的用于构架j2ee应用用户界面的技术，适合于基于MVC架构的应用中。JSF[/b]技术的主要功能有：
[/b]

Managed Bean [/i]工具[/i]
[/i]
验证工具[/i]
[/i]
丰富且可扩展的组件库
[/i]
插入式呈现工具包
[/i]
对具体用户事件响应的导航[/i]
[/i]
跨请求保留应用程序状态[/i]
[/i]
转换模型[/i]
[/i]
本文将通过cnjsf这个应用程序对以上功能进行展开描述，要理解本文，您需要对 Web开发、servlet, JSP, JavaBeans, 与标签库有一定的理解。

二、[/b]JSF[/b]的工作原理[/b]
[/b]

[/b]
JSF应用程序实质上是一个运行在一个与 Java(TM) 2 Platform, Enterprise Edition (J2EE(TM) platform) 兼容的容器中的 Servlet 或者 Java Server Pages(JSP) 应用程序。但是，JSF 不要求在应用程序中使用 JSP 页面，您可以自由选择直接使用 Servlets 或者其他模板技术。如果确实对 JSP 容器使用了 JSF，您将通过 JSF 的客户组件标签从内建的 JSF 内核和 HTML 组件库中受益。JSF 组件代表像文本字段、表单、按钮、表格、复选框等的 Web 控件。

使用 JSF 创建一个 JSP 页面时（如图1-1中的myform.jsp），在服务器的内存中（如图1-1中的WEB Container）会建立一个组件树，每一个组件标签对应树中的一个 UIComponent 实例(图1-1中的myUI)。该框架使用组件树来处理应用程序的请求（如图1-1中的HTTP Request）并且创建一个呈现出的响应(如图1-1中的HTTP Response)。当用户生成一个事件时，例如，点击了一个按钮，JSF 生命周期即处理该事件并且产生适当的响应。这是一个对大多数GUI编程的表单而言常见的一种的范例。每当用户做任何事情，如点击按钮或者提交表单，都有事件产生。然后事件消息通过 HTTP 传到服务器。在服务器端，是一个配置了叫做 Faces servlet 的特殊 servlet 的 WEB 容器。Faces servlet(javax.faces.webapp.FacesServlet)是所有 JSF 应用的引擎。每个 JSF 应用在 WEB 容器中都有独立的 Faces servlet 。

FacesServlet 是进入 JSF 框架的入口点。它处理请求处理生命周期并且用作一个前端控制器。JSF 也有保存重要请求信息的上下文的概念。上下文对象被称为 FacesContext（javax.faces.context.FacesContext）。在 JSF 生命周期的每个阶段上下文对象都被修改并且每次请求时都是有效的。

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

UI在服务端的运行原理图（图1-1）

三、一个简单的[/b]JSF[/b]应用程序[/b](A Simple JSF Application)
[/b]

[/b]
1、创建JSF应用程序的步骤

开发一个简单的JSF应用程序通常需要完成以下四个步骤：

u 创建页面（通常为JSP页面），用JSF组件封装HTML元素

u 在应用程序资源配置文件中定义页面导航

u 写Backing beans 用来保持用户输入与组件数据的状态。

u 在应用程序资源配置文件中加入managed bean 描述

以上四个步骤可以同时进行，也可以按照任何顺序随机进行。但是，不同开发者之间建议保持联系。例如，页面设计师(page author)需要知道对象(bean object)的名称，以便通过页面访问。

下面，我们将通过一个简单的应用程序(Hello World)，让你可以更加形象的理解上述内容。

2、运行应用程序

[[/i]需要本应用程序工程文件包的可发[/i]Email[/i]到[/i]yhm1218@163.com]
[/i]
本应用程序是一个简单的用户注册表单提交程序。为了运行这个应用程序，你需要准备Tomcat5.0与JSF1.1(包含在 Java Web Services Developer Pack (JWSDP) 1.4中)。为了使这个应用能正常工作，还需要几个 jar 文件，包括 JSF 标准实现与其它类库。如果你安装了 JWSDP 1.4，你就可以在 jsflib 目录下找到所需要的这些文件。把这些 .jar 文件拷贝到 WEB-INF/lib 目录下。下面是整个的 .jar 与 .tld 文件列表：

jsf-api.jar 包含有 Faces servlet 与其它相关 javax.faces 包下面的类

jfs-impl.jar 是 JSF 的实现

jstl.jar

standard.jar

commons-beanutils.jar

commons-collections.jar

commons-digester.jar

commons-logging.jar

当然，如果您正在使用Jbuilder 2005，那么，您只需要把本程序的工程以Jbuilder 2005的方式打开，编辑工程的项目属性，设置Server为Tomcat5.0，重新编译工程,编译通过之后,启动Tomcat5.0。OK，你现在可以访问http://localhost:8080/web/index.faces。[Jbuilder 2005集成了JSF]

3、应用程序简要解析

（1）创建页面（Creating the pages）

本应用程序共有四个JSP页面

index.jsp----欢迎页

关于index.jsp页面引申的一些说明:

JSP页面为Web应用程序提供UI，JSF提供了两个JSP标签库（后续的章节中我们会对这方面的知识进行详细讲解），它们将组件展现给页面设计师(page author)。您可以定制这些组件或者创建自己的组件。标准的组件作为基本的HTML4.01组件呈现，使得JavaScript绝对最小，这确保您的页面在所有的浏览器按期望的样子显示。

1、要使用包含组件的内建JSF标签库，您需要在JSP页面中包含以下指令

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

2、注意您的JSF页面需要所有JSF标签都包含在<f:view>..</f:view>标签之间，从而可以正确的建立组件树。

3、<f:loadBundle basename="ApplicationResources" var="bundle"/>用来绑定一个资源文件，实现消息的本地化。basename属性指定文件包路径，本应用程序中文件放在src目录下，var属性指定变量名。资源文件如下：

ApplicationResources.properties

#公共变量

cnjsf.welcome.message=Hello World

cnjsf.welcome.title=::CNJSF网欢迎您::

cnjsf.reg=注册

cnjsf.username=用户名

cnjsf.password=密码

cnjsf.success=注册成功

cnjsf.failure=注册失败

cnjsf.reback=返回

ApplicationResources_zh.properties

#/u516c/u5171/u53d8/u91cf

cnjsf.welcome.message=Hello World

cnjsf.welcome.title=::CNJSF/u7f51/u6b22/u8fce/u60a8::

cnjsf.reg=/u6ce8/u518c

cnjsf.username=/u7528/u6237/u540d

cnjsf.password=/u5bc6/u7801

cnjsf.success=/u6ce8/u518c/u6210/u529f

cnjsf.failure=/u6ce8/u518c/u5931/u8d25

cnjsf.reback=/u8fd4/u56de

把资源文件的信息绑定到[/i]JSF[/i]标签中：[/i]<h:outputText value="#{bundle['cnjsf.reg']}"/>
[/i]
这段代码翻译成[/i]HTML[/i]是：[/i]<span>[/i]注册[/i]</span>
[/i]
4、

<h:form id="indexForm">

<h:commandLink id="link" action="register">

<h:outputText value="#{bundle['cnjsf.reg']}"/>

</h:commandLink>

</h:form>

翻译成HTML是：

注意：[/i][/b]CommandLink[/i][/b]标签将[/i][/b]render JavaScript,[/i][/b]所以假如您要使用这个标签，请确保[/i][/b]
[/i][/b]
您的浏览器支持[/i][/b]JavaScript.
[/i][/b]

register.jsp---注册页

<%@ page contentType="text/html; charset=GBK" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view>

<f:loadBundle basename="ApplicationResources" var="bundle"/>

<html><head><title>

<h:outputText value="#{bundle['cnjsf.welcome.title']}"/>

-----<h:outputText value="#{bundle['cnjsf.reg']}"/>

</title></head>

<body bgcolor="#ffffff">

<div align="center"><h1><h:outputText value="#{bundle['cnjsf.reg']}"/></h1>

<h:form id="registrationForm">

<h:panelGrid columns="1">

<h:outputLabel for="username">

<h:outputText value="#{bundle['cnjsf.username']}"/>

</h:outputLabel>

<h:inputText id="username" value="#{register.username}" required="true"/>

<h:message for="username" style="color:red"/>

<h:outputLabel for="password">

<h:outputText value="#{bundle['cnjsf.password']}" />

</h:outputLabel>

<h:inputSecret redisplay="false" id="password" value="#{register.password}" required="true" /><h:message for="password" style="color:red"/>

<h:commandButton

action="#{register.registerAction}" value="#{bundle['cnjsf.reg']}"/>

</h:panelGrid>

</h:form></div></body></html>

</f:view>

failure----注册失败跳转页

success----注册成功页

（2）页导航定义（Defining Page Navigation）

页导航定义，主要是对文件faces-config.xml(在struts中就是struts-configs.xml)进行配置。[[/i]关于[/i]faces-config.xml[/i]的配置说明本文会在后续章节中进行详细介绍[/i]]
[/i]
本应用程序定义完页导航的faces-config.xml：

<?xml version="1.0" encoding="UTF-8"?>

<!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 xmlns="http://java.sun.com/JSF/Configuration">

<navigation-rule>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/success.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>failure</from-outcome>

<to-view-id>/failure.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>reback</from-outcome>

<to-view-id>/register.jsp</to-view-id>

</navigation-case>

</navigation-rule>

<navigation-rule>

<from-view-id>/index.jsp</from-view-id>

<navigation-case>

<from-outcome>register</from-outcome>

<to-view-id>/register.jsp</to-view-id>

</navigation-case>

</navigation-rule>

</faces-config>

（3）创建对象模型（Creating ModelBean）

本应用程序创建了一个ModelBean对象----RegisterBean。与其他JavaBeans组件一样，ModelBean包含了一组访问方法，它也预制了一个默认的字符表，同时也存储用户定制的字符[/i],通过Managed Bean工具创建完该ModelBean,在视图中定义的JSF组件就可以通过名字引用[参考register.jsp中的action="#{register.registerAction}"]。

RegisterBean源代码如下所示：

package com.cnjsf.helloworld;

public class RegisterBean {

private String username;

private String password;

public RegisterBean() {

}

public void setUsername(String username) {

this.username = username;

}

public void setPassword(String password) {

this.password = password;

}

public String getUsername() {

return username;

}

public String getPassword() {

return password;

}

public String registerAction() {

if (username.equals("cnjsf")){

return "success";

} else {

return "failure";

}

}

public String reBack() {

return "reback";

}

}

（4）配置应用程序（Configuring the Application Configuration resource file）

1、所有JSF的具体配置信息都将进入（2）中所讲的faces-config.xml中应用程序配置文件中，在配置文件中可以定义Managed Bean、Navigation Rule、Converter和Validator等。在（2）中我们已经定义了Navigation,现在我们加入Managed Bean:

<?xml version="1.0" encoding="UTF-8"?>

<!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 xmlns="http://java.sun.com/JSF/Configuration">

<managed-bean>

<managed-bean-name>register</managed-bean-name>

<managed-bean-class>com.cnjsf.helloworld.RegisterBean</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

<navigation-rule>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/success.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>failure</from-outcome>

<to-view-id>/failure.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>reback</from-outcome>

<to-view-id>/register.jsp</to-view-id>

</navigation-case>

</navigation-rule>

<navigation-rule>

<from-view-id>/index.jsp</from-view-id>

<navigation-case>

<from-outcome>register</from-outcome>

<to-view-id>/register.jsp</to-view-id>

</navigation-case>

</navigation-rule>

</faces-config>

注：在<managed-bean>…</managed-bean>条目中bean名称和类之间创建了一个映射，该映射由Managed Bean创建工具使用。”modelBean”第一次被引用时，将创建模型对象并将它保存到适当的作用域(request,session)。

[*[/i]一个说明[/i][/b]：什么是[/i] Managed Bean?[/i] Managed Bean [/i]只是具有一个[/i] public [/i]无参数构造函数的类，这与[/i] JavaBeans 1.0 [/i]的方法命名约定是一致的，并且和使用[/i] Managed Bean [/i]工具的[/i] Faces [/i]应用程序也是一样的。[/i]Managed Bean [/i]工具在[/i]WEB-INF/faces-config.xml [/i]文件中进行配置。在该文件中您可以放置任何数量的[/i]<managed-bean>[/i]声明，每个声明包含一个名字、一个类和作用域。在[/i] Web [/i]应用程序自身中，您可以使用在[/i] JavaServer Faces Expression Language [/i]表达式中定义的[/i] Bean [/i]名称来引用[/i] bean[/i]。您第一次引用[/i] bean[/i]时，它将被创建并放置在适当的作用域中。[/i]Managed Bean [/i]是非常灵活的，它允许您通过指定属性来定制自己的[/i] bean[/i]，这些属性包括[/i] Java [/i]数组、映射、列表和其他[/i] Managed Bean[/i]。[/i]]
[/i]
2、为了使您的Web应用程序能够使用JSF框架，您还得做最后一件事情------部署描述符(web.xml)，需要在部署描述符中定义FacesServlet和一个FacesServlet映射，本应用程序的描述符部署如下：

<?xml version="1.0" encoding="UTF-8"?>

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

<display-name>web</display-name>

<servlet>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.faces</url-pattern>

</servlet-mapping>

</web-app>

FacesServlet 实例作为JSF框架中的一个前端控制器，它处理所有与JSF相关的请求，在上面的描述符中使用了扩展名映射，Web容器会将所有请求发送到Faces Servlet，以获取扩展名如”*.faces”的页面。

(5) 工作流程(Flow)

本应用程序的注册--工作流程Flow图如下所示

动作处理：[/b]
[/b]
[/b]通过工作流程图，我们可以看出在工作流程图中首页面(Register.jsp)是很特殊的，因为工作流程可以使得该页面重新加载。当用户希望向字符表中添加字符时就会重载页面。这一添加是通过在页面中放置一个按钮来实现的，在按钮被按下时引发相应的动作。

在“Register.jsp”中您可以看到该按钮的声明：

<h:commandButton

action="#{register.registerAction}" value="#{bundle['cnjsf.reg']}"/>

实际动作处理程序的实现在RegisterBean.java文件中。“registerAction”方法进行注册表单提交的相关处理

public String registerAction() {

if (username.equals("cnjsf")){

return "success";

} else {

return "failure";

}

}

当调用带有动作监听器的CommandButtod时，就会调用动作程序，registerAction方法验证用户输入的用户名，如果输入”cnjsf”则动作处理程序返回一个”success”值，否则返回”failure”值。导航处理程序可以通过该值来决定下一个动作并根据结果来决定导航的方向。本应用程序如果返回”success”，则页面跳转到”success.jsp”,如果返回”failure”,相应的跳转到”failure.jsp”。由此可见，动作处理程序和导航处理程序的设计决定了它们可以轻松地互操作。

总结：[/b]
[/b]
[/b] 本章对JSF进行了一个简要的概述，粗略的介绍了JSF的工作原理，并通过一个简单的应用程序演示了组件、导航、动作处理、应用程序配置等使用方法，让您对Web应用程序构建JSF框架有了初步的了解，相信以这个应用程序为起点，您可以很轻松的创建更加复杂并且健壮的Web应用程序。

[[/i]参考：J2EE 参考指南的第17章JavaServer Faces Technology
[/i]
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html
[/i]
Introducing JavaServer Faces [/i]作者 Budi Kurniawan

http://www.onjava.com/pub/a/onjava/2003/07/30/jsf_intro.html
[/i]
JavaServer Faces [/i]简介[/i] 作者 Ed Burns 和 Justyna Horwat

]
[/i]

[/i]

[/b]
第二章[/b] UI[/b]组件模式[/b]
[/b]
（[/b]UI Component Model[/b]）[/b]
[/b]
一、概述[/b]
[/b]
上一章，我们对JSF进行了简要的概述，我们了解到JSF的核心是UI Component，JSF应用程序的UI是由许多可配置和重复使用的JSF UI组件构成的，这些组件可以是简单的如按钮之类的，也可以是复杂的，如table可以包含其他组件。

JSF提供了丰富、灵活的组件体系结构：

l UI Component 类，详细说明了UI Component的状态和行为（state and vehavior）。

l 组件呈现模式，定义了如何以不同的方式呈现组件。

l 事件和监听器模式，定义了如何处理组件事件。

l 转化器模式，定义了如何在一个组件上注册数据转化器。

l 验证器模式，定义了如何在一个组件上注册验证器。

本章将对以上内容进行简要的介绍。

二、UI组件类(UI Component Classes)

三、组件呈现模式(Component rendering Model)

四、转化模式（Conversion Model）

五、事件和监听器模式(Event and Listener Model)

六、验证模式（Validation Model）

七、导航模式（Navigation Model）

八、管理Bean（Bean Management）

九、一个JSF页面的生命周期

第三章[/b] JSF[/b]在[/b]JSP[/b]中的使用[/b]
[/b]
(Using JSF in JSP)
[/b]
一、本文的范例

二、JSF核心标签列表

三、在JSP中使用HTML组件标签

1、UI组件标签的通用属性

（1）id属性

（2）immediate属性

（3）rendered属性

（4）style和styleClass属性

（5）value和binding属性

2、UI组件标签的使用

（1）UIForm

（2）UIColumn

（3）UICommand

（4）UIData

（5）UIGraphic

（6）UIInput 和 UIOutput

（7）UIPanel

（8）UISelectBoolean

（9）UISelectMany

（10）UIMessage 和 UIMessages

（11）UISelectOne

（12）UISelectItem,UISelectItem,和 UISelectItemGroup

四、在JSP中使用本地化消息(Localized Messages)

五、在JSP中使用标准转化器(Standard Converters)

（1）DateTimeConverter

（2）NumberConverter

六、几种模式的应用

（1）在组件上注册事件监听器(Registering Listeners on Components)

（2）使用标准的验证器(Using the Standard Validators)

（3）组件值的绑定和对外部数据源的实例化(Binding Components Values and Instances to External Data Sources)

（4）调用后端Bean方法(Referencing a Backing Bean Method)

第四章[/b] [/b]使用[/b]JSF[/b]进行开发[/b]
[/b]
(Developing with JSF Technology)
[/b]
一、编写组件属性（Writing Component Properties）

（一）编写绑定到组件值的属性（Writing Properties Bound to Component Values）

1、 UIInput 和 UIOutput 属性(UIInput Properties and UIOutput Properties)

2、 UIData属性(UIData Properties)

3、 UISelectBoolean属性(UISelectBoolean Properties)

4、 UISelectMany属性(UISelectMany Properties)

5、 UISelectOne属性(UISelectOne Properties)

6、 UISelectItem属性(UISelectItem Properties)

（二）编写绑定到组件实例的属性（Writing Properties Bound to Component Instances）

二、资源的本地化(Performing Localization)

1、创建资源文件(Creating a Resource Bundle)

2、动态数据本地化(Localizing Dynamic Data)

3、消息本地化(Localizing Messages)

4、通过信息工厂创建信息(Creating a Message with a Message Factory)

5、通过FacesMessage创建消息(Using FacesMessage to Create a Message)

三、创建自定义的转化器(Creating a Custom Converter)

四、事件监听器的实现(Implementing an Event Listener)

1、实现值改变监听器（Implementing Value-Change Listeners）

2、实现Action监听器 (Implementing Action Listeners)

五、创建自定义的验证器（Creating a Custom Validator）

1、实现验证器的接口(Implementing the Validator Interface)

2、创建自定义标签(Creating a Custom Tag)

3、编写标签句柄(Writing the Tag Handler)

4、编写标签库描述符(Writing the Tag Library Descriptor)

六、编写后端Bean方法 (Writing Backing Bean Methods)

1、编写句柄导航方法(Writing a Method to Handle Navigation)

2、Writing a Method to Handle an Action Event

3、编写执行验证方法(Writing a Method to perform Validation)

4、编写执行值改变事件方法(Writing a Method to Handle a Value-Change Event)

第五章[/b] [/b]创建自定义[/b]UI[/b]组件[/b]
[/b]
（[/b]Creating Custom UI Components[/b]）[/b]
[/b]
第六章[/b]JSF[/b]应用程序的配置[/b]
[/b]
(Configuring JSF Application)
[/b]
第七章[/b]Web[/b]应用程序的本地化和国际化[/b]
[/b]
(Internationalizing and Localizing Web Applications)
[/b]

[/b]
[附:时间关系，相关翻译暂时停止，其他章节的请参考J2EE tutorial的第17-23章 ]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsf properties servlet bean jsp action

相关文章推荐

新的分享

章节导航