開(kāi)門第一篇，當(dāng)然是要做一個(gè) JSF 程序，增強(qiáng)點(diǎn)信心和興趣吧，很簡(jiǎn)單的一個(gè) welcome 程序，比 helloworld 高級(jí)一點(diǎn)吧，呵呵，先做個(gè)基礎(chǔ)，才好做后面的事嘛。

1． 首先從 SUN 網(wǎng)站下載 JSF1.1 ：          http://java./javaee/javaserverfaces/download.html 。由于 1.2 的支持情況還不完善，建議使用 1.1 。

2． 用 eclipse 建立一個(gè) web 項(xiàng)目，把下載的 ZIP 文件中的 LIB 中的 JAR 包復(fù)制到， WEB 項(xiàng)目的 LIB 下。

3． 在 WEB-INF 在建立兩個(gè)文件，一個(gè)是 web.xml 用于配置 web 應(yīng)用，另一個(gè)是 faces-config.xml 用于配置 jsf 的信息。首先建立 WEB-INF 下的 web.xml 文件，主要是配置 jsf 的 servlet ，不詳細(xì)說(shuō)明了。

 1 <? xml version="1.0" encoding="ISO-8859-1" ?>
 2  
 3   < web-app  xmlns ="http://java./xml/ns/j2ee"
 4     xmlns:xsi ="http://www./2001/XMLSchema-instance"
 5     xsi:schemaLocation ="http://java./xml/ns/j2ee 
 6     http://java./xml/ns/j2ee/web-app_2_4.xsd"
 7     version ="2.4" >
 8  
 9      < description >
10         JSF Demo
11      </ description >
12      < display-name > JSF Demo </ display-name >
13      < servlet >
14          < servlet-name > Faces Servlet </ servlet-name >
15          < servlet-class >
16             javax.faces.webapp.FacesServlet
17          </ servlet-class >
18          < load-on-startup > 1 </ load-on-startup >
19      </ servlet >
20    
21      < servlet-mapping >
22          < servlet-name > Faces Servlet </ servlet-name >
23          < url-pattern > *.faces </ url-pattern >
24      </ servlet-mapping >
25    
26      < welcome-file-list >
27          < welcome-file > index.jsp </ welcome-file >
28      </ welcome-file-list >
29 </ web-app >
30

4．編寫一個(gè)JavaBean，也就是一個(gè)managed-bean，它是JSF吹棒自己的一個(gè)優(yōu)勢(shì)：POJO對(duì)象，負(fù)責(zé)處理后臺(tái)業(yè)務(wù)：

 1 package  jsf.bean;
 2
 3 public   class  UserBean  {
 4      private  String name;
 5    
 6      public   void  setName(String name)  {
 7          this .name  =  name;
 8     }
 9    
10      public  String getName()  {
11          return  name;
12     }
13 }
14

4． 編寫JSF的配置文件faces-config.xml，這個(gè)配置了一個(gè)導(dǎo)航規(guī)則navigation-rule，和一個(gè)managed-bean：

 1 <? xml version="1.0" ?>
 2 <! DOCTYPE faces-config PUBLIC
 3  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
 4  "http://java./dtd/web-facesconfig_1_0.dtd" >
 5
 6 < faces-config >
 7      < navigation-rule > <! —- 導(dǎo)航規(guī)則-- >
 8          < from-view-id > /index.jsp </ from-view-id > <! —- 限定于此頁(yè)的規(guī)則-- >
 9          < navigation-case >
10              < from-outcome > welcome </ from-outcome > <! —- action中使用的導(dǎo)航名稱-- >
11              < to-view-id > /welcome.jsp </ to-view-id > <! —-要跳轉(zhuǎn)到的目標(biāo)-- >
12          </ navigation-case >
13      </ navigation-rule >
14        
15      < managed-bean >
16          < managed-bean-name > user </ managed-bean-name > <! —- bean的名稱-- >
17           < managed-bean-class > <! —- bean 的類名-- >
18              jsf.bean.UserBean        
19   </ managed-bean-class >
20          < managed-bean-scope > session </ managed-bean-scope > <! —- bean的生命周期-- >
21      </ managed-bean >
22 </ faces-config >
23
24

5． 編寫index.jsp文件，里面有一個(gè)輸入框，輸入你的名稱，點(diǎn)擊提交，就跳轉(zhuǎn)到welcome.jsp頁(yè)面了。

 1 <!--     引入JSF核心庫(kù)  -->
 2 <% @taglib uri = " http://java./jsf/core "  prefix = " f "   %>
 3 <!--    引入JSF html庫(kù) -->
 4 <% @taglib uri = " http://java./jsf/html "  prefix = " h "   %>
 5 <% @page contentType = " text/html;charset=Big5 " %>  
 6 < html >
 7 < head >
 8 < title > 第一個(gè)JSF程序 </ title >
 9 </ head >
10 < body >
11      < f:view > <! —- 表明下面是JSF渲染的內(nèi)容 -- >
12          < h:form > <! —- html庫(kù)中的form , inputText,commandButton標(biāo)簽，相當(dāng)于html標(biāo)準(zhǔn)中的<form > < input  type =”text” >< button >  -->
13              < h3 > 您的名稱： </ h3 >
14    <! —- 將輸入的值保存到user bean的name屬性 -- >
15              < h:inputText  value ="#{user.name}" />< p >
16              < h:commandButton  value ="提交"  action ="welcome" />
17    <!--   這里的 action=”welcome” 就是上面faces-config.xml中配置的navigation-rule，當(dāng)點(diǎn)擊提交時(shí)，就會(huì)跳轉(zhuǎn)到welcome.jsp -->
18          </ h:form >
19      </ f:view >
20 </ body >
21 </ html >
22

6． 編寫welcome.jsp文件，用于顯示一個(gè)歡迎提示信息。

 1 <% @ taglib uri = " http://java./jsf/core "  prefix = " f "   %>
 2 <% @ taglib uri = " http://java./jsf/html "  prefix = " h "   %>
 3 <% @page contentType = " text/html;charset=Big5 " %>  
 4 < html >
 5 < head >
 6 < title > 第一個(gè)JSF程序 </ title >
 7 </ head >
 8 < body >
 9      < f:view >
10   <! —- 顯示 user bean的 name屬性 -- >
11          < h:outputText  value ="#{user.name}" />  您好！
12          < h3 > 歡迎進(jìn)入JSF的世界 </ h3 >
13      </ f:view >
14 </ body >
15 </ html >
16

7． 把本項(xiàng)目（jsfdemo）部署到Tomcat5下，打開(kāi)瀏覽器輸入 http://localhost:8080/jsfdemo