JSF開發(fā)實(shí)戰(zhàn)(二)
bromon原創(chuàng) 請尊重版權(quán)
JSF開發(fā)實(shí)戰(zhàn)的第一篇(
jsf開發(fā)實(shí)戰(zhàn)一)演示了如何建立一個(gè)最簡單的JSF應(yīng)用，從那個(gè)例子中我們可以觀察到JSF的頁面組件是如何與后臺的javabean綁定的，也看到了JSF標(biāo)簽的最基本使用。在本文中我們會(huì)演示一個(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。它會(huì)調(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ù)，它會(huì)被自動(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è)文本框的值就會(huì)被自動(dòng)賦給user對象，我們只需要從user中取數(shù)據(jù)就行了，不用再去執(zhí)行麻煩的request.getParameter(“”)，更改編碼，轉(zhuǎn)換數(shù)據(jù)類型等操作。
我們同時(shí)還聲明了一個(gè)button，它與UMDelegater對象的login方法綁定，點(diǎn)擊該按鈕，系統(tǒng)會(huì)執(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ù)會(huì)自動(dòng)填充到table中，我們不必再自己去寫循環(huán)，生成若干的<tr>、<td>來生成一個(gè)table。在list.jsp中我們會(huì)看到如何使用DataModel。
放好數(shù)據(jù)之后，登陸成功的操作就完成了，返回一個(gè)login:ok，就可以重定向到list.jsp。如果用戶登陸失敗，那么會(huì)返回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ú)有的東西，它會(huì)被翻譯為一個(gè)html的table，通過指定h:dataTable的value="#{UMDelegater.allUsers}"屬性，它就與我們剛才生成的DataModel對象關(guān)聯(lián)起來，數(shù)據(jù)會(huì)被自動(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綁定，它會(huì)把我們重定向到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í)候會(huì)把form元素與User對象綁定，所以該User對象所含有的數(shù)據(jù)會(huì)自動(dòng)顯示到各個(gè)form元素上。
list.jsp的顯示效果如下：
看到這里你也許會(huì)問，那么我如何來美化這個(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也許會(huì)更容易流行。
下面我們來看看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＞