JSF入门

本文是良葛格先生在http://www.javaworld.com.tw 上发表的系中的头两篇。其余文章请进入http://www.javaworld.com.tw 的JSF 版块

一、JSF 介绍

    Web 应用程序的开发与传统的单机程序开发在本质上存在着太多的差异，Web 应用程序开发人员至今不可避免的必須处理HTTP 的细节，而HTTP 无状态的（stateless ）本质，与传统应用程序必须维持程序运行过程中的信息有明显的违背，再则Web 应用程序面对网站上不同的使用者同时的存取， 其执行与安全问题以及资料验证、转换处理等問題，又是复杂且难解决的。

    另一方面，本质上是静态的HTML 与本质上是动态的应用程序又是一项违背，这造成不可避免的，处理网页设计的美术人员与程序设计人员，必须被彼此加 入至视图元件中的逻辑互相干扰，即便一些视图呈现逻辑以标记方式呈现，试图展现对网页设计美术人员的亲切，但它终究必须牵涉到相关的流程逻辑。   

 

    有很多方案试着解决种种的困境，而各自的着眼点各不相同，有的从程序设计人员的角度來解決，有的从网页设计人员的角度来解决，各种的框架被提出，所 造成的是各种不统一的标记与框架，为了提高效益的整合开发环境（IDE ）难以整合这些标记与框架，另一方面，开发人员的学习负担也不断的加重，他们必须一 人了解多个角色的工作。

   JavaServer Faces  的提出在试图解决这个问题，它试图在不同的角度上提供网页设计人员、应用程序设计人员、元件开发人员解决方案， 让不同技术的人员可以彼此合作又不互相干扰，它综合了各家厂商现有的技术特点，由Java Community Process （JCP ）团队研究出来的 一套标准，並在2004 年三月发表了JavaServer Faces 1.0 实现成果。

    从网页设计人员的角度来看，JavaServer Faces 提供了一套像是新版本的HTML 标记，但它不是静态的，而是动态的，可以与后端的动态 程序结合，但网页设计人员不需要理会后端的动态部分，网页设计人员甚至不太需要接触JSTL 这类的标记，也可以动态的展现资料（像是动态的查询表格內 容），JavaServer Faces 提供标准的标记，这可以与网页编辑程序结合在一起，另一方面，JavaServer Faces 也允许您自定义标 记。

   从应用程序设计人员的角度来看，JavaServer Faces 提供一个与传统应用程序开发相类似的模型（当然因某些本质上的差异，模型还是稍有不 同），他们可以基于事件驱动来开发程序，不必关切HTTP 的处理细节，如果必须处理一些视觉元件的属性的话，他们也可以直接在整合开发环境上拖拉这些元 件，点选设定元件的属性，JavaServer Faces 甚至还为应用程序设计人员处理了物件与字串（HTTP 传送本质上就是字串）间不匹配的转換问 题。


    从UI 元件开发人员的角度来看，他们可以设计通用的UI 元件，让应用程序的开发产能提高，就如同在设计Swing 元件等，UI 开发人员可以独立开发，只要定义好相关的属性选项来调整细节，而不用受到网页设计人员或应用程序设计人员的干扰。


    三个角色的知识领域原则上可以互不干扰，根据您的角色，您只要了解其中一个知识领域，就可以运用JavaServer Faces ，其它角色的知识领域您可以不用了解太多细节。


    当然，就其中一个角色单独来看，JavaServer Faces 隐藏了许多细节，若要全盘了解，其实JavaServer Faces 是复杂的， 每一个处理的环境都值得深入探讨，所以学习JavaServer Faces 时，您要选择的是通盘了解，还是从使用的角度来了解解，这就决定了您学习时所 要花费的心力。


    要使用JSF ，首先您要先取得JavaServer Faces 参考实现 （JavaServer Faces Reference Implementation ），在将来，JSF 会与Container 整合在一起，届时您只 要下载支援的Container ，就可以使用JSF 的功能。

    请至 JSF  官方网站的  下载区  下载参考实现，在下载区压缩档并解压之后，将其 lib  目录下的 jar  档案复制至您的Web 应用程序的 /WEB-INF/lib 目录下，另外您还需要 jstl.jar  与 standard.jar  档案，这些档案您可以在 sample  目录下，解压 缩当中的一个范例，在它的/WEB-INF/lib 目录下找到，将之一并复制至您的Web 应用程序的/WEB-INF/lib 目录下，您总共需要以下的档 案：

jsf-impl.jar 
jsf-api.jar 
commons-digester.jar 
commons-collections.jar 
commons-beanutils.jar 
jstl.jar 
standard.jar 

接下来配置Web 应用程序的web.xml ，使用JSF 时，所有的请求都透过FacesServlet 来处理，您可以如下定义：

 <?xml version="1.0" encoding="ISO-8859-1"?>
 
 <web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">
 
    <description>
        JSF Demo
    </description>
    <display-name>JSF Demo</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>
   
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
 </web-app>

 

    在上面的定义中，我们将所有.faces 的请求交由FaceServlet 来处理，FaceServlet 会唤起相对的.jsp 网页，例如请求是/index.faces 的話，则实际上会唤起/index.jsp 网页，完成以上的配置，您就可以开始使用JSF 了。

二、第一个JSF 程序 

    现在可以开发一个简单的程式了，我们将设计一个简单的登入程式，使用者送出名称，之后由程序显示使用者名称及欢迎信息。


程序开发人员
     先看看应用程序开发人员要作些什么事，我们撰写一个简单的JavaBean ：

UserBean.java 
 
 

package onlyfun.caterpillar;

 public class UserBean {
    private String name;
   
    public void setName(String name) {
        this.name = name;
    }
   
    public String getName() {
        return name;
    }
 } 

 

 

这个Bean 将储存使用者的名称，编译好之后放置在/WEB-INF/classes 下。


    接下来设计页面流程，我们将先显示一个登录网頁/pages/index.jsp ，使用者填入名称并送出表单，之后在/pages/welcome.jsp 中显示Bean 中的使用者名称与欢迎信息。


    为了JSF 知道我们所设计的Bean 以及页面流程，我们定义一个/WEB-INF/faces-config.xml ：

faces-config.xml 

 

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

 <faces-config>
    <navigation-rule>
        <from-view-id>/pages/index.jsp</from-view-id>
        <navigation-case>
            <from-outcome>login</from-outcome>
            <to-view-id>/pages/welcome.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
       
    <managed-bean>
        <managed-bean-name>user</managed-bean-name>
         <managed-bean-class>
             onlyfun.caterpillar.UserBean
         </managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
 </faces-config> 

 

     在<navigation-rule> 中，我们定义了页面流程，当请求来自<from-view-id> 中指定的页面， 並且指定了<navigation-case> 中的<from-outcome> 为login 时，则会将请求导向 至<to-view-id> 所指定的页面。


     在<managed-bean> 中我们可以统一管理我们的Bean ，我们设定Bean 物件的存活范围是session ，也就是使用者开启浏览器与程序互动过程中都存活。


    接下来要告诉网页设计人员的信息是，他们可以使用的Bean 名称，即<managed-bean-name> 中设定的名称，以及上面所定义的页面流程。


网页设计人员

首先网页设计人员撰写index.jsp 网页：

index.jsp 
 

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@page contentType="text/html;charset=GBK"%> 
 <html>
 <head>
 <title>第一个JSF程式</title>
 </head>
 <body>
    <f:view>
        <h:form>
            <h3>请输入您的名称</h3>
            名称: <h:inputText value="#{user.name}"/><p>
            <h:commandButton value="送出" action="login"/>
        </h:form>
    </f:view>
 </body>
 </html> 

 

 

    我们使用了JSF 的core 与html 标记库，core 是有关于UI 元件的处理，而html 则是有关于HTML 的进阶标记。


   <f:view> 与<html> 有类似的作用，当您要开始使用JSF 元件时，这些元件一定要 在<f:view> 与</f:view> 之间，就如同使用HTML 时，所有的标记一定要在<html> 与< /html> 之间。


    html 标记库中几乎都是与HTML 标记相关的进阶标记，<h:form> 会产生一个表单，我们使 用<h:inputText> 来显示user 这个Bean 物件的name 属性，而<h:commandButton> 会产生一个 提交按钮，我们在action 属性中指定将根据之前定义的login 页面流程中前往welcome.jsp 页面。


网页设计人员不必理会表单传送之后要作些什么，他只要设计好欢迎页面就好了：

welcome.jsp 
 

 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
 <%@page contentType="text/html;charset=GBK"%> 
 <html>
 <head>
 <title>第一个JSF程式</title>
 </head>
 <body>
    <f:view>
        <h:outputText value="#{user.name}"/> 您好！
        <h3>欢迎使用 JavaServer Faces！</h3>
    </f:view>
 </body>
 </html> 

 

 

    这个页面沒什么需要解释的了，如您所看到的，在网页上沒有程式逻辑，网页设计人员所作的就是遵照页面流程，使用相关名称取出资料，而不用担心实际上程式是如何运作的。

接下来启动Container ，( 站长注：我用的是Tomcat 5 ，整个目录结构请从本站下载) 连接上您的应用程序网址，例 如：http://localhost:8080/jsfDemo/pages/index.faces ，填入名称并送出表单，您的欢迎页面就会显示了。