隨筆分類(23)

JSF開發實戰(二)

bromon原創　請尊重版權

    JSF開發實戰的第一篇(http://www.tkk7.com/bromon/archive/2005/12/16/24189.html)演示了如何建立一個最簡單的JSF應用，從那個例子中我們可以觀察到JSF的頁面組件是如何與后臺的javabean綁定的，也看到了JSF標簽的最基本使用。在本文中我們會演示一個更加復雜的應用，它包含了更豐富的JSF標簽。

    要開發的例子是一個用戶管理程序，管理員輸入帳號與密碼登陸，然后它可以看到所有用戶的列表，并且可以修改或者刪除其中的一些數據。利用myeclipse所帶的jsf-config.xml設計器，頁面流程如下：

 

    可以看出，這個應用設計到的業務邏輯有：

用戶登陸、修改用戶信息、增加新用戶、刪除用戶

    我們在后臺的數據庫操作中使用hibernate框架來輔助開發，相關的技術細節請自行查閱文檔。

    首先建立pojo文件：User.java，它包含幾個基本屬性：

private int id;
private String name;
private String password;
private int power;

請自行完成set/get方法，并且編寫對應的hbm.xml文件。

我 們的主要工作之一，是要建立好供jsf頁面組件使用的javabean，把它命名為UMDelegater.java。它會調用UserManager來 完成業務邏輯，這里是一個代理模式。UserManager的內容只是簡單的增/刪/查/改的操作，這里不再具體列出。UMDelegater的內容是：
package org.bromon.jsf.control;

import java.util.List;

import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;

import org.bromon.jsf.model.UserManager;//自行建立的工具類，負責所有的hibernate操作
import org.bromon.jsf.model.pojo.User;//pojo對象

public class UMDeletager {
    private UserManager um=new UserManager();//所有具體的方法都由它來實現
    private User user=new User();
        private DataModel  allUsers=new ListDataModel();//JSF的內置對象，用來封裝html中table的數據

        //----------set/get方法---------------------
    public DataModel getAllUsers() {
        return allUsers;
    }

    public void setAllUsers(List list) {
        allUsers.setWrappedData(list);
    }
    public UserManager getUm() {
        return um;
    }
    public void setUm(UserManager um) {
        this.um = um;
    }
    public User getUser() {
        return user;
    }
    public void setUser(User user) {
        this.user = user;
    }
    
    //-----功能方法---------
    public String login()
    {
        String s=um.login(this.getUser());
        if(s.equals("ok"))
        {
            this.setAllUsers(um.loadAll());//如果登陸成功，就取出所有的用戶信息
            return "login:ok";
        }else
        {
            swapper.setLoginFailInfo(s);
            return "login:fail";
        }
    }
    
    public String edit()
    {
        this.user=(User)allUsers.getRowData();//頁面中的table自動返回含有id的user對象
        this.user=um.loadById(user.getId());
        if(user!=null)
        {
            return "edit";
        }else
        {
            return "error";
        }
    }
    
    public String update()
    {
        um.update(this.getUser());
        this.setAllUsers(um.loadAll());//重新取一次數據，目的是更新緩存
        return "update:ok";
    }
    
    public String addNew()
    {
        this.setUser(new User());//生成一個新的user對象，不含任何數據，它會被自動映射成一個沒有數據的form
        return "add";
    }
    
    public String add()
    {
        um.add(this.getUser());
        this.setAllUsers(um.loadAll());//重新取一次數據，目的是更新緩存
        return "add:ok";
    }
}

    在jsf-config.xml中聲明這個bean：

＜managed-bean＞
        ＜managed-bean-name＞UMDelegater＜/managed-bean-name＞
＜managed-bean-class＞org.bromon.jsf.control.UMDeletager＜/managed-bean-class＞
        ＜managed-bean-scope＞session＜/managed-bean-scope＞
    ＜/managed-bean＞

業務邏輯就設計完成了，下面可以開始編寫jsf文件，首先是index.jsp:

首先引入標簽庫，并且聲明page屬性：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

然后是構建頁面：

＜body＞
    ＜f:view＞
        ＜h:form＞
            ＜h:panelGrid columns="3"＞
                 ＜h:outputLabel for="name" value="帳號:"/＞
                 ＜h:inputText id="name" value="# {UMDelegater.user.name}" required="true"/＞
                ＜h:message for="name"/＞
                
                 ＜h:outputLabel for="password" value="密碼:"/＞
                 ＜h:inputSecret id="password" value="# {UMDelegater.user.password}" required="true" /＞
                ＜h:message for="password"/＞
            ＜/h:panelGrid＞
            ＜h:panelGroup＞
                 ＜h:commandButton value="登陸" action="# {UMDelegater.login}"/＞
            ＜/h:panelGroup＞
        ＜/h:form＞
    ＜/f:view＞
  ＜/body＞

頁 面中聲明了兩個文本框，分別映射UMDelegater對象中user對象的name屬性，和UMDelegater對象中user對象的 password屬性。一旦這個表單被提交，這兩個文本框的值就會被自動賦給user對象，我們只需要從user中取數據就行了，不用再去執行麻煩的 request.getParameter(“”)，更改編碼，轉換數據類型等操作。

我們同時還聲明了一個button，它與 UMDelegater對象的login方法綁定，點擊該按鈕，系統會執行UMDelegater.login方法，該方法從user對象中取出name 和password，和數據庫中的記錄進行比較。如果合法，那么就取出所有的數據，放到一個DataModel對象中，具體代碼是：

List userList=UserManager.getAllUser();//取得所有用戶數據，放到一個List中
DataModel allUser=new ListDataModel ();//DataModel是一個接口，ListDataModel是它的一個實現

allUsers.setWrappedData(userList);//將數據填充進去備用

使 用DataModel意義何在呢？JSF中，我們可以把一個html頁面上的table和一個DataModel綁定起來，這些數據會自動填充到 table中，我們不必再自己去寫循環，生成若干的<tr>、<td>來生成一個table。在list.jsp中我們會看到如 何使用DataModel。

放好數據之后，登陸成功的操作就完成了，返回一個login:ok，就可以重定向到list.jsp。如果用 戶登陸失敗，那么會返回login:fail，重定向到error.jsp，它的內容就不敘說了。下面我們看看list.jsp里面有什么，下面是它的 <body>代碼：

＜body＞
    ＜f:view＞
        ＜h:form＞
             ＜h:dataTable id="users" value="#{UMDelegater.allUsers}" var ="u" border="1" width="80%" ＞
                ＜h:column＞
                     ＜f:facet name="header"＞
                         ＜h: outputText value="id"/＞
                     ＜/f:facet＞
                     ＜h:outputText value="# {u.id}"/＞
                ＜/h:column＞
                
                ＜h:column＞
                     ＜f:facet name="header"＞
                         ＜h: outputText value="帳號"/＞
                     ＜/f:facet＞
                     ＜h:commandLink action="# {UMDelegater.edit}"＞
                         ＜h: outputText value="#{u.name}"/＞
                     ＜/h:commandLink＞
                ＜/h:column＞
                
                ＜h:column＞
                     ＜f:facet name="header"＞
                         ＜h: outputText value="密碼"/＞
                     ＜/f:facet＞
                     ＜h:outputText value="# {u.password}"/＞
                ＜/h:column＞
                
                ＜h:column＞
                     ＜f:facet name="header"＞
                         ＜h: outputText value="權限代碼"/＞
                     ＜/f:facet＞
                     ＜h:outputText value="# {u.power}"/＞
                ＜/h:column＞
            ＜/h:dataTable＞
            ＜p＞
                 ＜h:commandLink action="#{UMDelegater.addNew} " value="增加用戶" /＞
            ＜/p＞
        ＜/h:form＞
    ＜/f:view＞
  ＜/body＞

我 們使用了一個h:dataTable標簽，它是JSF獨有的東西，它會被翻譯為一個html的table，通過指定h:dataTable的value= "#{UMDelegater.allUsers}"屬性，它就與我們剛才生成的DataModel對象關聯起來，數據會被自動填充。我們只需要聲明 dataTable中的每一列的表頭，數據來自哪個字段就可以了，如下：
＜h:column＞
    ＜f:facet name="header"＞
        ＜h:outputText value="id"/＞
    ＜/f:facet＞
    ＜h:outputText value="#{u.id}"/＞
＜/h:column＞

表格最后還有一個“增加用戶”的按鈕，它與UMDelegater.addNew綁定，它會把我們重定向到add.jsp。
需要注意的是，每個用戶名都是個超鏈接，點擊之后可以重定向到edit.jsp，這個頁面可以修改用戶資料。這是通過如下代碼實現的：

＜h:commandLink action="#{UMDelegater.edit}"＞
    ＜h:outputText value="#{u.name}"/＞
＜/h:commandLink＞

可 以看出，實際上系統調用了UMDelegater.edit方法，該方法的功能是根據頁面傳過來的用戶id查詢數據庫，找到相關記錄后返回一個User對 象，然后重定向到edit.jsp，由于我們后面編寫edit.jsp的時候會把form元素與User對象綁定，所以該User對象所含有的數據會自動 顯示到各個form元素上。

list.jsp的顯示效果如下：



看 到這里你也許會問，那么我如何來美化這個表格？實際上這正式JSF這類框架面臨的最大問題，它大量的使用了標簽庫，目前流行的網頁制作工具(如 deamweaver)又沒有提供足夠的支持，所以只能依靠挖掘dataTable標簽的各個屬性，并且大量依賴css才能實現頁面的美化。如果java 世界能有一個強大的JSF IDE，能夠提供vs.net一樣的能力，那么JSF也許會更容易流行。

下面我們來看看edit.jsp的內容，如下：

＜body＞
    ＜f:view＞
        ＜h:form＞
             ＜h:inputHidden id="id" value="#{UMDelegater.user.id}"/＞
            ＜h:panelGrid columns="3"＞
                 ＜h:outputLabel for="name" value="帳號"/＞
                 ＜h:inputText id="name" value="# {UMDelegater.user.name}" required="true"/＞
                ＜h:message for="name"/＞
                
                 ＜h:outputLabel for="power" value="權限"/＞
                 ＜h:inputText id="power" value="# {UMDelegater.user.power}" required="true"/＞
                ＜h:message for="power"/＞
            ＜/h:panelGrid＞
            ＜h:panelGroup＞
                 ＜h:commandButton value="保存" action="# {UMDelegater.update}"/＞
            ＜/h:panelGroup＞
        ＜/h:form＞
    ＜/f:view＞
  ＜/body＞

可以看出，edit.jsp并沒有什么特別需要留意的，只是一個最簡單的form與bean的綁定，“保存”按鈕與UMDelegater.update方法綁定，它的功能是把修改后的form數據寫入數據庫，然后重新取一次數據，以免緩存做怪，看不到修改的效果。

Add.jsp也和edit.jsp很類似，它的內容如下：

＜body＞
    ＜f:view＞
          ＜h:form＞
              ＜h:panelGrid columns="3"＞
                   ＜h:outputLabel for="name" value= "帳號:" /＞
                   ＜h:inputText id="name" value="# {UMDelegater.user.name}" required="true"/＞
                   ＜h:message for="name"/＞
                  
                   ＜h:outputLabel for="password"  value="密碼:"/＞
                   ＜h:inputText id="password" value ="#{UMDelegater.user.password}" required="true"/＞
                   ＜h:message for="password"/＞
                  
                   ＜h:outputLabel for="power" value ="權限"/＞
                   ＜h:inputText id="power" value="# {UMDelegater.user.power}" required="true"/＞
                   ＜h:message for="power"/＞
              ＜/h:panelGrid＞
              ＜h:panelGroup＞
                   ＜h:commandButton value="保存"  action="#{UMDelegater.add}"/＞
              ＜/h:panelGroup＞
          ＜/h:form＞
      ＜/f:view＞
  ＜/body＞

以上代碼和edit.jsp幾乎相同，請大家自行閱讀理解，一口氣寫了8頁，不想再?唆了。

由于最近時間很不充裕，所以JSF系列暫時打住，無限期擱置。我想這兩篇文章已經能夠說明很多問題，已經足夠引導大家進入JSF的世界，自行研究解決其他細節。