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

jinjianlee

JSF開發(fā)實戰(zhàn)(二)
By  bromon 發(fā)表于 2005-10-27 14:49:00  
JSF開發(fā)實戰(zhàn)(二)

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

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

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



         

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

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

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

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

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ù)邏輯，這里是一個代理模式。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();//所有具體的方法都由它來實現(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自動返回含有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());//生成一個新的user對象，不含任何數(shù)據(jù)，它會被自動映射成一個沒有數(shù)據(jù)的form
                return "add";
        }
       
        public String add()
        {
                um.add(this.getUser());
                this.setAllUsers(um.loadAll());//重新取一次數(shù)據(jù)，目的是更新緩存
                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＞

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

首先引入標(biāo)簽庫，并且聲明page屬性：





然后是構(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＞

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

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

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

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

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

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

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

我們使用了一個h:dataTable標(biāo)簽，它是JSF獨有的東西，它會被翻譯為一個html的table，通過指定h:dataTable的value
="#{UMDelegater.allUsers}"屬性，它就與我們剛才生成的DataModel對象關(guān)聯(lián)起來，數(shù)據(jù)會被自動填充。我們只需要聲明
dataTable中的每一列的表頭，數(shù)據(jù)來自哪個字段就可以了，如下：
＜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，這個頁面可以修改用戶資料。這是通過如下代碼實現(xiàn)的：

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

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

list.jsp的顯示效果如下：

  


看到這里你也許會問，那么我如何來美化這個表格？實際上這正式JSF這類框架面臨的最大問題，它大量的使用了標(biāo)簽庫，目前流行的網(wǎng)頁制作工具(如
deamweaver)又沒有提供足夠的支持，所以只能依靠挖掘dataTable標(biāo)簽的各個屬性，并且大量依賴css才能實現(xiàn)頁面的美化。如果java
世界能有一個強大的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并沒有什么特別需要留意的，只是一個最簡單的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頁，不想再啰唆了。

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

本文來自ChinaUnix博客，如果查看原文請點：http://blog.chinaunix.net/u/10369/showart_254501.html