Go语言视频零基础入门到精通

javalearner

本文是良葛格先生在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来处理，您可以如下定义：

web.xml  
   
  <?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的&#65533;，则实际上会唤起/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下。


    接下来设计页面流程，我们将先显示一个登录网&#65533;/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>中指定的页面，&#65533;且指定了<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>
   

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

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

  

  
  
   
   

     
   

     
   
  



  



                        function TempSave(ElementID)
                        {
                                CommentsPersistDiv.setAttribute("CommentContent",document.getElementById(ElementID).value);
                                CommentsPersistDiv.save("CommentXMLStore");
                        }
                        function Restore(ElementID)
                        {
                                CommentsPersistDiv.load("CommentXMLStore");
                                document.getElementById(ElementID).value=CommentsPersistDiv.getAttribute("CommentContent");
                        }
               
                  











源码下载：http://file.javaxxz.com/2014/10/10/035330062.zip