JSF開發(fā)實(shí)戰(zhàn)的第一篇(jsf開發(fā)實(shí)戰(zhàn)一)演示了如何建立一個最簡單的JSF應(yīng)用,從那個例子中我們可以觀察到JSF的頁面組件是如何與后臺的javabean綁定的,也看到了JSF標(biāo)簽的最基本使用。在本文中我們會演示一個更加復(fù)雜的應(yīng)用,它包含了更豐富的JSF標(biāo)簽。
要開發(fā)的例子是一個用戶管理程序,管理員輸入帳號與密碼登陸,然后它可以看到所有用戶的列表,并且可以修改或者刪除其中的一些數(shù)據(jù)。利用myeclipse所帶的jsf-config.xml設(shè)計(jì)器,頁面流程如下:

可以看出,這個應(yīng)用設(shè)計(jì)到的業(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();//所有具體的方法都由它來實(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自動返回含有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è)計(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>
頁面中聲明了兩個文本框,分別映射UMDelegater對象中user對象的name屬性,和UMDelegater對象中user對象的password屬性。一旦這個表單被提交,這兩個文本框的值就會被自動賦給user對象,我們只需要從user中取數(shù)據(jù)就行了,不用再去執(zhí)行麻煩的request.getParameter(“”),更改編碼,轉(zhuǎn)換數(shù)據(jù)類型等操作。
我們同時(shí)還聲明了一個button,它與UMDelegater對象的login方法綁定,點(diǎn)擊該按鈕,系統(tǒng)會執(zhí)行UMDelegater.login方法,該方法從user對象中取出name和password,和數(shù)據(jù)庫中的記錄進(jìn)行比較。如果合法,那么就取出所有的數(shù)據(jù),放到一個DataModel對象中,具體代碼是:
List userList=UserManager.getAllUser();//取得所有用戶數(shù)據(jù),放到一個List中
DataModel allUser=new ListDataModel ();//DataModel是一個接口,ListDataModel是它的一個實(shí)現(xiàn)
allUsers.setWrappedData(userList);//將數(shù)據(jù)填充進(jìn)去備用
使用DataModel意義何在呢?JSF中,我們可以把一個html頁面上的table和一個DataModel綁定起來,這些數(shù)據(jù)會自動填充到table中,我們不必再自己去寫循環(huán),生成若干的<tr>、<td>來生成一個table。在list.jsp中我們會看到如何使用DataModel。
放好數(shù)據(jù)之后,登陸成功的操作就完成了,返回一個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>
我們使用了一個h:dataTable標(biāo)簽,它是JSF獨(dú)有的東西,它會被翻譯為一個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。
需要注意的是,每個用戶名都是個超鏈接,點(diǎn)擊之后可以重定向到edit.jsp,這個頁面可以修改用戶資料。這是通過如下代碼實(shí)現(xiàn)的: