....
<managed-bean>
<managed-bean-name>someBean</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.SomeBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>someProperty</property-name>
<list-entries>
<value-class>java.lang.Integer</value-class>
<value>1</value>
<value>2</value>
<value>3</value>
</list-entries>
</managed-property>
</managed-bean>
....
這是一個設定接受List型態的屬性，我們使用<list-entries>標籤指定將設定一個List物件，其中<value-class>指定將存入List的型態，而<value>指定其值，如果是基本型態，則會嘗試使用指定的 <value-class>來作Wrapper類別。
設定Map的話，則是使用<map-entries>標籤，例如：
....
<managed-bean>
<managed-bean-name>someBean</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.SomeBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>someProperty</property-name>
<map-entries>
<value-class>java.lang.Integer</value-class>
<map-entry>
<key>someKey1</key>
<value>100</value>
</map-entry>
<map-entry>
<key>someKey2</key>
<value>200</value>
</map-entry>
</map-entries>
</managed-property>
</managed-bean>
....
由於Map物件是以key-value對的方式來存入，所以我們在每一個<map-entry>中使用<key>與< value>標籤來分別指定。
您也可以直接像設定Bean一樣，設定一個List或Map物件，例如在JSF附的範例中，有這樣的設定：
....
<managed-bean>
<description>
Special expense item types
</description>
<managed-bean-name>specialTypes</managed-bean-name>
<managed-bean-class>
java.util.TreeMap
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<map-entries>
<value-class>java.lang.Integer</value-class>
<map-entry>
<key>Presentation Material</key>
<value>100</value>
</map-entry>
<map-entry>
<key>Software</key>
<value>101</value>
</map-entry>
<map-entry>
<key>Balloons</key>
<value>102</value>
</map-entry>
</map-entries>
</managed-bean>
....
而範例中另一個設定List的例子如下：
....
<managed-bean>
<managed-bean-name>statusStrings</managed-bean-name>
<managed-bean-class>
java.util.ArrayList
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<list-entries>
<null-value/>
<value>Open</value>
<value>Submitted</value>
<value>Accepted</value>
<value>Rejected</value>
</list-entries>
</managed-bean>
....
]]>
<web-app>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/beans.xml</param-value>
</context-param>
...
</web-app>
定義檔可以有多個，中間以 "," 區隔，例如：
/WEB-INF/navigation.xml,/WEB-INF/beans.xml
一個Bean最基本要定義Bean的名稱、類別與存活範圍，例如：
....
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
....
如果要在其它類別中取得Bean物件，則可以先取得javax.faces.context.FacesContext，它代表了JSF目前的執行環境物件，接著嘗試取得javax.faces.el.ValueBinding物件，從中取得指定的Bean物件，例如：
FacesContext context = FacesContext.getCurrentInstance();
ValueBinding binding =
context.getApplication().createValueBinding("#{user}");
UserBean user = (UserBean) binding.getValue(context);
如果只是要嘗試取得Bean的某個屬性，則可以如下：
FacesContext context = FacesContext.getCurrentInstance();
ValueBinding binding =
context.getApplication().createValueBinding(
"#{user.name}");
String name = (String) binding.getValue(context);
如果有必要在啟始Bean時，自動設置屬性的初始值，則可以如下設定：
....
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<value>caterpillar</value>
</managed-property>
<managed-property>
<property-name>password</property-name>
<value>123456</value>
</managed-property>
</managed-bean>
....
如果要設定屬性為 null 值，則可以使用<null-value/>標籤，例如：
....
<managed-property>
<property-name>name</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>password</property-name>
<null-value/>
</managed-property>
....
當然，您的屬性不一定是字串值，也許會是int、float、boolean等等型態，您可以設定<value> 值時指定這些值的字串名稱，JSF會嘗試進行轉換，例如設定為true時，會嘗試使用Boolean.valueOf()方法轉換為boolean的 true，以下是一些可能進行的轉換：
| 型態 | 轉換 |
| short、int、long、float、double、byte，或相應的Wrapper類別 | 嘗試使用Wrapper的valueOf()進行轉換，如果沒有設置，則設為 0 |
| boolean 或 Boolean | 嘗試使用Boolean.valueOf()進行轉換，如果沒有設置，則設為 false |
| char 或 Character | 取設置的第一個字元，如果沒有設置，則設為0 |
| String 或 Object | 即設定的字串值，如果沒有設定，則為空字串new String("") |
您也可以將其它產生的Bean設定給另一個Bean的屬性，例如：
....
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>other</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.OtherBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>user</property-name>
<value>#{user}</value>
</managed-property>
</managed-bean>
....
在上面的設定中，在OtherBean中的user屬性，接受一個UserBean型態的物件，我們設定為前一個名稱為user的UserBean物件。
]]>
JSF將Bean的管理集中在faces-config.xml中，一個例子如下：
....
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
....
這個例子我們在 第一個JSF程式 看過，<managed-bean-class>設定所要使用的Bean類別，<managed-bean-name>設定之名稱，可供我們在JSF頁面上使用Expression Language來取得或設定Bean的屬性，例如：
<h:inputText value="#{user.name}"/>
<managed-bean-scope>設定Bean的存活範圍，您可以設定為request、session 與application，設定為request時，Bean的存活時間為請求階最，設定為session則在使用者應用程式交互開始，直到關閉瀏覽器或顯式的結束會話為止（例如登出程式），設定為application的話，則Bean會一直存活，直到應用程式關閉為止。
您還可以將存活範圍設定為none，當設定為none時會在需要的時候生成一個新的Bean，例如您在一個method中想要生成一個臨時的Bean，就可以將之設定為none。
在JSF頁面上要取得Bean的屬性，是使用 JSF表示語言（Expression Language），要注意到的是，JSF表示語言是寫成 #{expression}，而 JSP 表示語言 是寫成 ${expression}，因為表示層可能是使用JSP，所以必須特別區分，另外要注意的是，JSF的標籤上之屬性設定時，只接受JSF表示語言。
]]>
- messages.properties
titleText=JSF Demo
hintText=Please input your name and password
nameText=name
passText=password
commandText=Submit
資源檔名稱由basename加上語言與地區來組成，例如：
- basename.properties
- basename_en.properties
- basename_zh_TW.properties
沒有指定語言與地區的basename是預設的資源檔名稱，JSF會根據瀏覽器送來的Accept-Language header中的內容來決定該使用哪一個資源檔名稱，例如：
Accept-Language: zh_TW, en-US, en
如果瀏覽器送來這些header，則預設會使用繁體中文，接著是美式英文，再來是英文語系，如果找不到對應的訊息資源檔，則會使用預設的訊息資源檔。
由於訊息資源檔必須是ISO-8859-1編碼，所以對於非西方語系的處理，必須先將之轉換為Java Unicode Escape格式，例如您可以先在訊息資源檔中寫下以下的內容：
- messages_zh_TW.txt
titleText=JSF示範
hintText=請輸入名稱與密碼
nameText=名稱
passText=密碼
commandText=送出
然後使用JDK的工具程式native2ascii來轉換，例如：
native2ascii -encoding Big5 messages_zh_TW.txt messages_zh_TW.properties
轉換後的內容會如下：
- messages_zh_TW.properties
titleText=JSF\u793a\u7bc4
hintText=\u8acb\u8f38\u5165\u540d\u7a31\u8207\u5bc6\u78bc
nameText=\u540d\u7a31
passText=\u5bc6\u78bc
commandText=\u9001\u51fa
接下來您可以使用<f:loadBundle>標籤來指定載入訊息資源，一個例子如下：
- index.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@page contentType="text/html;charset=UTF-8"%>
<f:view>
<f:loadBundle basename="messages" var="msgs"/>
<html>
<head>
<title><h:outputText value="#{msgs.titleText}"/></title>
</head>
<body>
<h:form>
<h3><h:outputText value="#{msgs.hintText}"/></h3>
<h:outputText value="#{msgs.nameText}"/>:
<h:inputText value="#{user.name}"/><p>
<h:outputText value="#{msgs.passText}"/>:
<h:inputSecret value="#{user.password}"/><p>
<h:commandButton value="#{msgs.commandText}"
actionListener="#{user.verify}"
action="#{user.outcome}"/>
</h:form>
</body>
</html>
</f:view>
如此一來，如果您的瀏覽器預設接受zh_TW語系的話，則頁面上就可以顯示中文，否則預設將以英文顯示，也就是messages.properties的內容，為了能顯示多國語系，我們設定網頁編碼為UTF8。
<f:view>可以設定locale屬性，直接指定所要使用的語系，例如：
<f:view locale="zh_TW">
<f:loadBundle basename="messages" var="msgs"/>
直接指定以上的話，則會使用繁體中文來顯示，JSF會根據<f:loadBundle>的basename屬性加上<f:view>的locale屬性來決定要使用哪一個訊息資源檔，就上例而言，就是使用 messages_zh_TW.properties，如果設定為以下的話，就會使用messages_en.properties：
<f:view locale="en">
<f:loadBundle basename="messages" var="msgs"/>
您也可以在faces-config.xml中設定語系，例如：
<faces-config>
<application>
<local-config>
<default-locale>en</default-locale>
<supported-locale>zh_TW</supported-locale>
</local-config>
</application>
.....
</faces-config>
在<local-config>一定有一個<default-locale>，而<supported- locale>可以有好幾個，這告訴JSF您的應用程式支援哪些語系。
當然，如果您可以提供一個選項讓使用者選擇自己的語系會是更好的方式，例如根據user這個Bean的locale屬性來決定頁面語系：
<f:view locale="#{user.locale}">
<f:loadBundle basename="messages" var="msgs"/>
在頁面中設定一個表單，可以讓使用者選擇語系，例如設定單選鈕：
<h:selectOneRadio value="#{user.locale}">
<f:selectItem itemValue="zh_TW"
itemLabel="#{msgs.zh_TWText}"/>
<f:selectItem itemValue="en"
itemLabel="#{msgs.enText}"/>
</h:selectOneRadio>
]]>
JSF EL是以#開始，將變數或運算式放置在 { 與 } 之間，例如：
#{someBeanName}
變數名稱可以是faces-config.xml中定義的名稱，如果是Bean的話，可以透過使用 '.' 運算子來存取它的屬性，例如：
...
<f:view>
<h:outputText value="#{userBean.name}"/>
</f:view>
...
在JSF標籤的屬性上，" 與 " （或'與'）之間如果含有EL，則會加以運算，您也可以這麼使用它：
...
<f:view>
名稱, 年齡：<h:outputText
value="#{userBean.name}, #{userBean.age}"/>
</f:view>
...
一個執行的結果可能是這樣顯示的：
名稱, 年齡：Justin, 29
EL的變數名也可以程式執行過程中所宣告的名稱，或是JSF EL預設的隱含物件，例如下面的程式使用param隱含物件來取得使用者輸入的參數：
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@page contentType="text/html; charset=Big5"%>
<html>
<head>
<title></title>
</head>
<body>
<f:view>
<b> 您好, <h:outputText value="#{param.name}"/> </b>
</f:view>
</body>
</html>
param是JSF EL預設的隱含物件變數，它代表request所有參數的集合，實際是一個java.util.Map型態物件，JSF所提供的隱含物件，大致上對應於 JSP 隱含物件，不過JSF隱含物件移除了pageScope與pageContext，而增加了facesContext與view，它們分別對應於 javax.faces.context.FacesContext與javax.faces.component.UIViewRoot。
對於Map型態物件，我們可以使用 '.' 運算子指定key值來取出對應的value，也可以使用 [ 與 ] 來指定，例如：
...
<f:view>
<b> 您好, <h:outputText value="#{param['name']}"/> </b>
</f:view>
...
在 [ 與 ] 之間，也可以放置其它的變數值，例如：
...
<f:view>
<h:outputText value="#{someBean.someMap[user.name]}"/>
</f:view>
...
如果變數是List型態或陣列的話，則可以在 [] 中指定索引，例如：
....
<f:view>
<h:outputText value="#{someBean.someList[0]}"/>
<h:outputText value="#{someBean.someArray[1]}"/>
<h:outputText
value="#{someBean.someListOrArray[user.age]}"/>
</f:view>
....
您也可以指定字面常數，對於true、false、字串、數字，JSF EL會嘗試進行轉換，例如：
....
<h:outputText value="#{true}"/>
....
<h:outputText value="#{'This is a test'}"/>
....
如果要輸出字串，必須以單引號 ' 或雙引數 " 括住，如此才不會被認為是變數名稱。
在宣告變數名稱時，要留意不可與JSF的保留字或關鍵字同名，例如不可取以下這些名稱：
true false null div mod and or not eq ne lt gt le ge instanceof empty
使用EL，您可以直接實行一些算術運算、邏輯運算與關係運算，其使用就如同在一般常見的程式語言中之運算。
算術運算子有：加法 (+), 減法 (-), 乘法 (*), 除法 (/ or div) 與餘除 (% or mod) 。下面是算術運算的一些例子：
| 運算式 | 結果 |
| #{1} | 1 |
| #{1 + 2} | 3 |
| #{1.2 + 2.3} | 3.5 |
| #{1.2E4 + 1.4} | 12001.4 |
| #{-4 - 2} | -6 |
| #{21 * 2} | 42 |
| #{3/4} | 0.75 |
| #{3 div 4} | 0.75，除法 |
| #{3/0} | Infinity |
| #{10%4} | 2 |
| #{10 mod 4} | 2，也是餘除 |
| #{(1==2) ? 3 : 4} | 4 |
如同在Java語法一樣 ( expression ? result1 : result2）是個三元運算，expression為true顯示result1，false顯示result2。
邏輯運算有：and(或&&)、or(或!!)、not(或!)。一些例子為：
| 運算式 | 結果 |
| #{true and false} | false |
| #{true or false} | true |
| #{not true} | false |
關係運算有：小於Less-than (< or lt)、大於Greater-than (> or gt)、小於或等於Less-than-or-equal (<= or le)、大於或等於Greater-than-or-equal (>= or ge)、等於Equal (== or eq)、不等於Not Equal (!= or ne)，由英文名稱可以得到lt、gt等運算子之縮寫詞，以下是Tomcat的一些例子：
| 運算式 | 結果 |
| #{1 < 2} | true |
| #{1 lt 2} | true |
| #{1 > (4/2)} | false |
| #{1 > (4/2)} | false |
| #{4.0 >= 3} | true |
| #{4.0 ge 3} | true |
| #{4 <= 3} | false |
| #{4 le 3} | false |
| #{100.0 == 100} | true |
| #{100.0 eq 100} | true |
| #{(10*10) != 100} | false |
| #{(10*10) ne 100} | false |
左邊是運算子的使用方式，右邊的是運算結果，關係運算也可以用來比較字元或字串，按字典順序來決定比較結果，例如：
| 運算式 | 結果 |
| #{'a' < 'b'} | true |
| #{'hip' > 'hit'} | false |
| #{'4' > 3} | true |
EL運算子的執行優先順序與Java運算子對應，如果有疑慮的話，也可以使用括號()來自行決定先後順序。
]]>
....
<navigation-rule>
<from-view-id>/pages/index.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/pages/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
....
對於JSF，每一個視圖（View）都有一個獨特的識別（identifier），稱之為View ID，在JSF中的View ID是從Web應用程式的環境相對路徑開始計算，設定時都是以/作為開頭，如果您請求時的路徑是/pages/index.faces，則JSF會將副檔名改為/pages/index.jsp，以此作為view-id。
在<navigation-rule>中的<from-view-id>是個選擇性的定義，它規定了來源頁面的條件，<navigation-case>中定義各種導覽條件，<from-outcome>定義當表單結果符合的條件時，各自改導向哪一個目的頁面，目的頁面是在<to-view-id>中定義。
您還可以在<navigation-case>中加入<from-action>，進一步規範表單結果必須根據哪一個動作方法（action method），當中是使用 JSF Expression Language 來設定，例如：
....
<navigation-rule>
<from-view-id>/pages/index.jsp</from-view-id>
<navigation-case>
<from-action>#{user.verify}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
</navigation-case>
....
</navigation-rule>
....
在導航時，預設都是使用forward的方式，您可以在<navigation-case>中加入一個<redirect/>，讓JSF發出讓瀏覽器重新導向（redirect）的header，讓瀏覽器主動要求新網頁，例如：
....
<navigation-rule>
<from-view-id>/pages/index.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
<redirect/>
</navigation-case>
....
</navigation-rule>
....
您的來源網頁可能是某個特定模組，例如在/admin/下的頁面，您可以在<from-view-id>中使用wildcards，也就是使用 * 字元，例如：
....
<navigation-rule>
<from-view-id>/admin/*</from-view-id>
<navigation-case>
<from-action>#{user.verify}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
</navigation-case>
....
</navigation-rule>
....
在上面的設定中，只要來源網頁是從/admin來的，都可以開始測試接下來的<navigation-case>。
<from-view-id>如果沒有設定，表示來源網頁不作限制，您也可以使用 * 顯式的在定義檔中表明，例如：
....
<navigation-rule>
<from-view-id>/*</from-view-id>
<navigation-case>
....
</navigation-rule>
....
或者是這樣：
....
<navigation-rule>
<from-view-id>*</from-view-id>
<navigation-case>
....
</navigation-rule>
....
]]>
首先我們修改一下UserBean：
- UserBean.java
package onlyfun.caterpillar;
public class UserBean {
private String name;
private String password;
private String errMessage;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setPassword(String password) {
this.password = password;
}
public String getPassword() {
return password;
}
public void setErrMessage(String errMessage) {
this.errMessage = errMessage;
}
public String getErrMessage() {
return errMessage;
}
public String verify() {
if(!name.equals("justin") ||
!password.equals("123456")) {
errMessage = "名稱或密碼錯誤";
return "failure";
}
else {
return "success";
}
}
}
在UserBean中，我們增加了密碼與錯誤訊息屬性，在verify()方法中，我們檢查使用者名稱與密碼，它傳回一個字串，"failure"表示登入錯誤，並會設定錯誤訊息，而"success"表示登入正確，這個傳回的字串將決定頁面的流程。
接下來我們修改一下 faces-config.xml 中的頁面流程定義：
- faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
<navigation-rule>
<from-view-id>/pages/index.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/pages/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
根據上面的定義，當傳回的字串是"success"時，將前往 welcome.jsp，如果是"failure"的話，將送回 index.jsp。
接下來告訴網頁設計人員Bean名稱與相關屬性，以及決定頁面流程的verify名稱，我們修改 index.jsp 如下：
- index.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@page contentType="text/html;charset=Big5"%>
<html>
<head>
<title>第一個JSF程式</title>
</head>
<body>
<f:view>
<h:form>
<h3>請輸入您的名稱</h3>
<h:outputText value="#{user.errMessage}"/><p>
名稱: <h:inputText value="#{user.name}"/><p>
密碼: <h:inputSecret value="#{user.password}"/><p>
<h:commandButton value="送出"
action="#{user.verify}"/>
</h:form>
</f:view>
</body>
</html>
當要根據verify運行結果來決定頁面流程時，action屬性中使用 JSF Expression Language "#{user.verify}"，如此JSF就知道必須根據verify傳回的結果來導航頁面。
<h:outputText>可以取出指定的Bean之屬性值，當使用者因驗證錯誤而被送回原頁面時，這個錯誤訊息就可以顯示在頁面上。
]]>
程式開發人員
先看看應用程式開發人員要作些什麼事，我們撰寫一個簡單的JavaBean：- UserBean.java
package onlyfun.caterpillar;
public class UserBean {
private String name;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
這個Bean將儲存使用者的名稱，編譯好之後放置在/WEB-INF/classes下。
接下來設計頁面流程，我們將先顯示一個登入網頁/pages/index.jsp，使用者填入名稱並送出表單，之後在 /pages/welcome.jsp中顯示Bean中的使用者名稱與歡迎訊息。
為了讓JSF知道我們所設計的Bean以及頁面流程，我們定義一個/WEB-INF/faces-config.xml：
- faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
<navigation-rule>
<from-view-id>/pages/index.jsp</from-view-id>
<navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/pages/welcome.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>
onlyfun.caterpillar.UserBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
在<navigation-rule>中，我們定義了頁面流程，當請求來自<from-view- id>中指定的頁面，並且指定了<navigation-case>中的<from-outcome>為login時，則會將請求導向至<to-view-id>所指定的頁面。
在<managed-bean>中我們可以統一管理我們的Bean，我們設定Bean物件的存活範圍是session，也就是使用者開啟瀏覽器與程式互動過程中都存活。
接下來要告訴網頁設計人員的資訊是，他們可以使用的Bean名稱，即<managed-bean-name>中設定的名稱，以及上面所定義的頁面流程。
網頁設計人員
首先網頁設計人員撰寫index.jsp網頁：
- index.jsp
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@page contentType="text/html;charset=Big5"%>
<html>
<head>
<title>第一個JSF程式</title>
</head>
<body>
<f:view>
<h:form>
<h3>請輸入您的名稱</h3>
名稱: <h:inputText value="#{user.name}"/><p>
<h:commandButton value="送出" action="login"/>
</h:form>
</f:view>
</body>
</html>
我們使用了JSF的core與html標籤庫，core是有關於UI元件的處理，而html則是有關於HTML的進階標籤。
<f:view>與<html>有類似的作用，當您要開始使用JSF元件時，這些元件一定要在<f: view>與</f:view>之間，就如同使用HTML時，所有的標籤一定要在<html>與< /html>之間。
html標籤庫中幾乎都是與HTML標籤相關的進階標籤，<h:form>會產生一個表單，我們使用<h: inputText>來顯示user這個Bean物件的name屬性，而<h:commandButton>會產生一個提交按鈕，我們在action屬性中指定將根據之前定義的login頁面流程中前往welcome.jsp頁面。
網頁設計人員不必理會表單傳送之後要作些什麼，他只要設計好歡迎頁面就好了：
- welcome.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@page contentType="text/html;charset=Big5"%>
<html>
<head>
<title>第一個JSF程式</title>
</head>
<body>
<f:view>
<h:outputText value="#{user.name}"/> 您好！
<h3>歡迎使用 JavaServer Faces！</h3>
</f:view>
</body>
</html>
這個頁面沒什麼需要解釋的了，如您所看到的，在網頁上沒有程式邏輯，網頁設計人員所作的就是遵照頁面流程，使用相關名稱取出資料，而不用擔心實際上程式是如何運作的。
接下來啟動Container，連接上您的應用程式網址，例如：http://localhost: 8080/jsfDemo/pages/index.faces，填入名稱並送出表單，您的歡迎頁面就會顯示了。
]]>
]]>
]]>