web開發架構——JSF開發實戰

JSF開發實戰的第一篇(jsf開發實戰一)示範了如何建立一個最簡單的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，這個頁面可以修改使用者資料。這是通過如下代碼實現的：