隨筆分類(23)

JSF開發(fā)實(shí)戰(zhàn)(二)

bromon原創(chuàng)　請尊重版權(quán)

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

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

 

    可以看出，這個(gè)應(yīng)用設(shè)計(jì)到的業(yè)務(wù)邏輯有：

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

    我們在后臺的數(shù)據(jù)庫操作中使用hibernate框架來輔助開發(fā)，相關(guān)的技術(shù)細(xì)節(jié)請自行查閱文檔。

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

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

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

我 們的主要工作之一，是要建立好供jsf頁面組件使用的javabean，把它命名為UMDelegater.java。它會調(diào)用UserManager來 完成業(yè)務(wù)邏輯，這里是一個(gè)代理模式。UserManager的內(nèi)容只是簡單的增/刪/查/改的操作，這里不再具體列出。UMDelegater的內(nèi)容是：
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;//自行建立的工具類，負(fù)責(zé)所有的hibernate操作
import org.bromon.jsf.model.pojo.User;//pojo對象

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

        //----------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自動(dòng)返回含有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());//重新取一次數(shù)據(jù)，目的是更新緩存
        return "update:ok";
    }
    
    public String addNew()
    {
        this.setUser(new User());//生成一個(gè)新的user對象，不含任何數(shù)據(jù)，它會被自動(dòng)映射成一個(gè)沒有數(shù)據(jù)的form
        return "add";
    }
    
    public String add()
    {
        um.add(this.getUser());
        this.setAllUsers(um.loadAll());//重新取一次數(shù)據(jù)，目的是更新緩存
        return "add:ok";
    }
}

    在jsf-config.xml中聲明這個(gè)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＞

業(yè)務(wù)邏輯就設(shè)計(jì)完成了，下面可以開始編寫jsf文件，首先是index.jsp:

首先引入標(biāo)簽庫，并且聲明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"%>

然后是構(gòu)建頁面：

＜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＞

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

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

List userList=UserManager.getAllUser();//取得所有用戶數(shù)據(jù)，放到一個(gè)List中
DataModel allUser=new ListDataModel ();//DataModel是一個(gè)接口，ListDataModel是它的一個(gè)實(shí)現(xiàn)

allUsers.setWrappedData(userList);//將數(shù)據(jù)填充進(jìn)去備用

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

放好數(shù)據(jù)之后，登陸成功的操作就完成了，返回一個(gè)login:ok，就可以重定向到list.jsp。如果用 戶登陸失敗，那么會返回login:fail，重定向到error.jsp，它的內(nèi)容就不敘說了。下面我們看看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="權(quán)限代碼"/＞
                     ＜/f:facet＞
                     ＜h:outputText value="# {u.power}"/＞
                ＜/h:column＞
            ＜/h:dataTable＞
            ＜p＞
                 ＜h:commandLink action="#{UMDelegater.addNew} " value="增加用戶" /＞
            ＜/p＞
        ＜/h:form＞
    ＜/f:view＞
  ＜/body＞

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

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

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

可 以看出，實(shí)際上系統(tǒng)調(diào)用了UMDelegater.edit方法，該方法的功能是根據(jù)頁面?zhèn)鬟^來的用戶id查詢數(shù)據(jù)庫，找到相關(guān)記錄后返回一個(gè)User對 象，然后重定向到edit.jsp，由于我們后面編寫edit.jsp的時(shí)候會把form元素與User對象綁定，所以該User對象所含有的數(shù)據(jù)會自動(dòng) 顯示到各個(gè)form元素上。

list.jsp的顯示效果如下：



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

下面我們來看看edit.jsp的內(nèi)容，如下：

＜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="權(quán)限"/＞
                 ＜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并沒有什么特別需要留意的，只是一個(gè)最簡單的form與bean的綁定，“保存”按鈕與UMDelegater.update方法綁定，它的功能是把修改后的form數(shù)據(jù)寫入數(shù)據(jù)庫，然后重新取一次數(shù)據(jù)，以免緩存做怪，看不到修改的效果。

Add.jsp也和edit.jsp很類似，它的內(nèi)容如下：

＜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 ="權(quán)限"/＞
                   ＜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頁，不想再?唆了。

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