itVincent Blog - Java Working Fun!

第一個 JSF 程序

開門第一篇，當然是要做一個 JSF 程序，增強點信心和興趣吧，很簡單的一個 welcome 程序，比 helloworld 高級一點吧，呵呵，先做個基礎，才好做后面的事嘛。

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

2． 用 eclipse 建立一個 web 項目，把下載的 ZIP 文件中的 LIB 中的 JAR 包復制到， WEB 項目的 LIB 下。

3． 在 WEB-INF 在建立兩個文件，一個是 web.xml 用于配置 web 應用，另一個是 faces-config.xml 用于配置 jsf 的信息。首先建立 WEB-INF 下的 web.xml 文件，主要是配置 jsf 的 servlet ，不詳細說明了。

?

?1 <? xml?version="1.0"?encoding="ISO-8859-1" ?>
?2 ?
?3 ? < web-app? xmlns ="http://java.sun.com/xml/ns/j2ee"
?4 ????xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
?5 ????xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee?
?6 ????http://java.sun.com/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．編寫一個JavaBean，也就是一個managed-bean，它是JSF吹棒自己的一個優勢：POJO對象，負責處理后臺業務：

?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，這個配置了一個導航規則navigation-rule，和一個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.sun.com/dtd/web-facesconfig_1_0.dtd" >
?5
?6 < faces-config >
?7 ???? < navigation-rule > <! —-?導航規則-- >
?8 ???????? < from-view-id > /index.jsp </ from-view-id > <! —-?限定于此頁的規則-- >
?9 ???????? < navigation-case >
10 ???????????? < from-outcome > welcome </ from-outcome > <! —-?action中使用的導航名稱-- >
11 ???????????? < to-view-id > /welcome.jsp </ to-view-id > <! —-要跳轉到的目標-- >
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文件，里面有一個輸入框，輸入你的名稱，點擊提交，就跳轉到welcome.jsp頁面了。

?1 <!-- ????引入JSF核心庫? -->
?2 <% @taglib?uri = " http://java.sun.com/jsf/core " ?prefix = " f " ? %>
?3 <!-- ???引入JSF?html庫 -->
?4 <% @taglib?uri = " http://java.sun.com/jsf/html " ?prefix = " h " ? %>
?5 <% @page?contentType = " text/html;charset=Big5 " %> ?
?6 < html >
?7 < head >
?8 < title > 第一個JSF程序 </ title >
?9 </ head >
10 < body >
11 ???? < f:view > <! —-?表明下面是JSF渲染的內容?-- >
12 ???????? < h:form > <! —-?html庫中的form?,?inputText,commandButton標簽，相當于html標準中的<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，當點擊提交時，就會跳轉到welcome.jsp -->
18 ???????? </ h:form >
19 ???? </ f:view >
20 </ body >
21 </ html >
22

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

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

7．?把本項目（jsfdemo）部署到Tomcat5下，打開瀏覽器輸入 http://localhost:8080/jsfdemo

有什么疑問可以回復或者發郵件一起討論啊！mailto:itvincent@126.com