JSF整理(二)

来源:互联网 发布:医学统计软件破解版 编辑:程序博客网 时间:2024/05/08 04:41
二、第一个JSF程序

程序开发人员
先看看应用程序开发人员要作些什么事,我们撰写一个简单的JavaBean:
  1. UserBean.java
  2. package onlyfun.caterpillar;
  3.  public class UserBean {
  4.     private String name;
  5.     public void setName(String name) {
  6.         this.name = name;
  7.     }
  8.     public String getName() {
  9.         return name;
  10.     }
  11.  }
  这个Bean将储存使用者的名称,编译好之后放置在/WEB-INF/classes下。

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

  为了让JSF知道我们所设计的Bean以及页面流程,我们定义一个/WEB-INF/faces-config.xml:
  1. faces-config.xml
  2. <?xml version="1.0"?>
  3.  <!DOCTYPE faces-config PUBLIC
  4.  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
  5.  "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
  6.  <faces-config>
  7.     <navigation-rule>
  8.         <from-view-id>/pages/index.jsp</from-view-id>
  9.         <navigation-case>
  10.             <from-outcome>login</from-outcome>
  11.             <to-view-id>/pages/welcome.jsp</to-view-id>
  12.         </navigation-case>
  13.     </navigation-rule>
  14.     <managed-bean>
  15.         <managed-bean-name>user</managed-bean-name>
  16.          <managed-bean-class>
  17.              onlyfun.caterpillar.UserBean
  18.          </managed-bean-class>
  19.         <managed-bean-scope>session</managed-bean-scope>
  20.     </managed-bean>
  21.  </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网页:
  1. index.jsp
  2. <%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
  3.  <%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
  4.  <%@page contentType="text/html;charset=utf-8"%>
  5.  <html>
  6.  <head>
  7.  <title>第一个JSF程式</title>
  8.  </head>
  9.  <body>
  10.     <f:view>
  11.         <h:form>
  12.             <h3>请输入您的名称</h3>
  13.             名称: <h:inputText value="#{user.name}"/><p>
  14.             <h:commandButton value="发送" action="login"/>
  15.         </h:form>
  16.     </f:view>
  17.  </body>
  18.  </html>
 我们使用了JSF的core标签库(前缀为:f)与html标签库(前缀为:h),core是有关于UI元件的处理,而html则是有关于HTML的包装标签。
    <f:view>与<html>有类似的作用,当您要开始使用JSF元件时,这些元件一定要在<f:view>与</f:view>之间,就如同使用HTML时,所有的标籤一定要在<html>与</html>之间。
    以前缀h开头的html标签库中几乎都是与HTML标签相关的包装标签,<h:form>会产生一个表单,我们使用<h:inputText>来显示user这个Bean物件的name属性,而<h:commandButton>会产生一个提交按钮,我们在action属性中指定将根据之前定义的login页面流程中前往welcome.jsp页面。
    网页设计人员不必理会表单传送之后要作些什么,他只要设计好欢迎页面就好了:
  1. welcome.jsp
  2. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
  3.  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
  4.  <%@page contentType="text/html;charset=utf-8"%>
  5.  <html>
  6.  <head>
  7.  <title>第一个JSF程式</title>
  8.  </head>
  9.  <body>
  10.     <f:view>
  11.         <h:outputText value="#{user.name}"/> 您好!
  12.         <h3>欢迎使用 JavaServer Faces!</h3>
  13.     </f:view>
  14.  </body>
  15.  </html>
    这个页面没什么需要解释的了,如您所看到的,在网页上没有程式逻辑,网页设计人员所作的就是遵照页面流程,使用相关名称取出资料,而不用担心实际上程式是如何运作的。

  接下来启动Container,连接上您的应用程式网址,例如:http://localhost:8080/jsfDemo/pages/index.faces,填入名称并送出表单,您的欢迎页面就会显示了。