要開發的例子是一個用戶管理程序，管理員輸入帳號與密碼登陸，然後它可以看到所有用戶的列表，並且可以修改或者刪除其中的一些數據。利用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，這個頁面可以修改用戶資料。這是通過如下代碼實現的：
＜h:commandLink action="#{UMDelegater.edit}"＞
＜h:outputText value="#{u.name}"/＞
＜/h:commandLink＞
可以看出，實際上系統調用了UMDelegater.edit方法，該方法的功能是根據頁面傳過來的用戶id查詢數據庫，找到相關記錄後返回一個User對象，然後重定向到edit.jsp，由於我們後面編寫edit.jsp的時候會把form元素與User對象綁定，所以該User對象所含有的數據會自動顯示到各個form元素上。
list.jsp的顯示效果如下：
看到這裏你也許會問，那麼我如何來美化這個表格？實際上這正式JSF這類框架面臨的最大問題，它大量的使用了標籤庫，目前流行的網頁製作工具(如deamweaver)又沒有提供足夠的支持，所以只能依靠挖掘dataTable標籤的各個屬性，並且大量依賴css才能實現頁面的美化。如果java世界能有一個強大的JSF IDE，能夠提供vs.net一樣的能力，那麼JSF也許會更容易流行。
下面我們來看看edit.jsp的內容，如下：
＜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="權限"/＞
＜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數據寫入數據庫，然後重新取一次數據，以免緩存做怪，看不到修改的效果。
Add.jsp也和edit.jsp很類似，它的內容如下：
＜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="權限"/＞
＜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系列暫時打住，無限期擱置。我想這兩篇文章已經能夠說明很多問題，已經足夠引導大家進入JSF的世界，自行研究解決其他細節。