javascript
JSF入门
http://www.zhuoda.org/irini/58867.html
1. 什么是 Java Server Faces(jsf)?
?? JSF為JAVA的 Web應用用戶界面的開發人員提供了標準的編程接口、豐富可擴展的UI組件庫（一個核心的JSP標記庫用來處理事件、執行驗證以及其他非UI相關的操作和一個標準的HTML 標記庫來表示 UI組件）、事件驅動模型等一套完整的Web應用框架，通過 JSF ，您可以在頁面中輕松自如地使用 WEB 組件、捕獲用戶行為所產生的事件、執行驗證、建立頁面導航…，當使用支持JSF的開發工具來開發 JSF 應用的時候，一切將會變得異常簡單，GUI方式拖放組件、修改組件屬性、建立組件間關聯以及編寫事件偵聽器等等
?? JSF 有三部分：
???? 一套預制的UI組件集
???? 一個事件驅動的編程模型
???? 一個允許第三方開發者提供附加組件的組件模型
?? JSF包含處理事件所需的所有代碼和組件組織，開發者可以忽略這些細節而專注于應用邏輯。
2. 第一個JSF程序
?
?? JSF只是J2EE的一個標準，是一套接口集和一些基本實現，要使用JSF需要下載jsf的實現，可以到JSF 官方網站的 下載區 下載參考實現，也可以到 apache 下載 myfaces,這里以使用sun的參考實現為例，在下載壓縮文件并解壓縮之后，將其 lib 目錄下的 jar 文件復制至您的Web應用程序的/WEB-INF/lib目錄下，另外您還需要 jstl.jar 與 standard.jar 文件，這些文件您可以在 sample 目錄下的應用中找到，建好我們的應用目錄結構：
?? hellojsf
?? |-- build.xml
?? |-- src
?? |-- WEB-INF
?? |----|-- web.xml
?? |----|-- faces-config.xml
?? |----|-- classes
?? |----|-- lib
?? |----|----|--jsf-impl.jar
?? |----|----|--jsf-api.jar
?? |----|----|--commons-digester.jar
?? |----|----|--commons-collections.jar
?? |----|----|--commons-beanutils.jar
?? |----|----|--commons-logging.jar
?? |----|----|--standard.jar
?? |----|----|--jstl.jar
?? 可能只有faces-config.xml，它是jsf的基本配置文件，后面就可以看到它的作用。
?? //build.xml
<project name="helloapp" default="compile" basedir=".">
<!-- ================= Property Definitions ==================== -->
<property name="src.home" value="${basedir}/src" />
<property name="classes.home" value="${basedir}/WEB-INF/classes" />
<property name="lib.home" value="${basedir}/WEB-INF/lib" />
<!-- ================= "compile" Target ==================== -->
<target name="compile">
?<javac srcdir="${src.home}" destdir="${classes.home}" debug="on">
??<classpath>
???<fileset dir="${lib.home}">
????<include name="*.jar"/>
???</fileset>
??</classpath>
?</javac>
</target>
</project>
?? 下面我們就開始寫程序了，沒有什么復雜邏輯，不用細說他的流程，直接寫了。
?? //hello.jsp 保存在根目錄下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
?<html>
??<head>
???<title>
???JSF in Action - Hello, world!
???</title>
??</head>
??<body>
???<h:form id="welcomeForm">
????<h:outputText id="welcomeOutput"
?????value="Welcome to JavaServer Faces!"
?????style="font-family: Arial, sans-serif; font-size: 24;
?????color: green;"/>
????<p>
????<h:message id="errors" for="helloInput" style="color: red"/>
????</p>
????<p>
????<h:outputLabel for="helloInput">
?????<h:outputText id="helloInputLabel" value="Enter number of controls to display:"/>
????</h:outputLabel>
????<h:inputText id="helloInput" value="#{helloBean.numControls}" required="true">
?????<f:validateLongRange minimum="1" maximum="500"/>
????</h:inputText>
????</p>
????<p>
????<h:panelGrid id="controlPanel"
?????binding="#{helloBean.controlPanel}"
?????columns="20" border="1" cellspacing="0"/>
????</p>
????<h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/>
????<h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/>
???</h:form>
??</body>
?</html>
</f:view>
?? 從這個頁面可以看出，jsf 就是用他自己的UI組件代替了html標簽，又加了些特有的屬性，很容易理解，值得注意的是，所有組件都要定義在<f:view></f:view>之內，熟悉jsp的可能對”#{helloBean.numControls}“感覺很熟悉，不同的是這個是以”#“開頭的，”binding“屬性的值是個jsf el 表達式，它指定了helloBean類中的controlPanel方法可以直接對此組件進行操作，h:commandButton 是按鈕組件，可以產生 action event, 他的 actionListener 屬性制定了用helloBean類中的addControls方法來處理這個action event，其他的都比較容易理解，來看下個頁面。
?? //goodbye.jsp 保存在根目錄下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
?<html>
??<head>
???<title>
???JSF in Action - Hello, world!
???</title>
??</head>
??<body>
???<h:form id="goodbyeForm">
???<p>
???<h:outputText id="welcomeOutput" value="Goodbye!"
????style="font-family: Arial, sans-serif; font-size: 24;
????font-style: bold; color: green;"/>
???</p>
???<p>
???<h:outputText id="helloBeanOutputLabel" value="Number of controls displayed:"/>
???<h:outputText id="helloBeanOutput" value="#{helloBean.numControls}"/>
???</p>
???</h:form>
??</body>
?</html>
</f:view>
?? 這個頁面更簡單，只是一些輸出。
?? 在 hello.jsp goodbye.jsp 中都通過 jsf el 表達式引用了一個 backing bean, 叫 helloBean, 他包括了我們這個應用所需的一切
?? //HelloBean.java 保存在 src 下
package org.jia.hello;
import javax.faces.application.Application;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import java.util.List;
public class HelloBean
{
?private int numControls;
?private HtmlPanelGrid controlPanel;
?public int getNumControls()
?{
??return numControls;
?}
?public void setNumControls(int numControls)
?{
??this.numControls = numControls;
?}
?public HtmlPanelGrid getControlPanel()
?{
??return controlPanel;
?}
?public void setControlPanel(HtmlPanelGrid controlPanel)
?{
??this.controlPanel = controlPanel;
?}
?public void addControls(ActionEvent actionEvent)
?{
??Application application = FacesContext.getCurrentInstance().getApplication();
??List children = controlPanel.getChildren();
??children.clear();
??for (int count = 0; count < numControls; count++)
??{
???HtmlOutputText output = (HtmlOutputText)application.createComponent(HtmlOutputText.COMPONENT_TYPE);
???output.setValue(" " + count + " ");
???output.setStyle("color: blue");
???children.add(output);
??}
?}
?public String goodbye()
?{
??return "success";
?}
}
?? jsf 的 backing bean 很簡單，不需要繼承于某個特定類，只是一個包含事件處理方法的javabean
??
?? 這里面最復雜的就是 addControls 方法了，它是一個 action listener 方法，因為他接收了一個唯一的參數 ActionEvent，在 hello.jsp 中：”<h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/>“，這句話告訴 jsf，當用戶點擊"Redisplay"按鈕時jsf會用這個方法來處理 action event
?? goodbye方法象 addControls 一樣，是 event listener 的一種類型，但他是于 jsf 的導航系統聯系起來的，所以他的工作就是返回一個字符串或邏輯輸出，這樣導航系統就可以決定下一個要加載的頁面，這一類的方法叫做 action methods. 在 hello.jsp 中：”<h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/>“，當用戶點擊”Goodbye“按鈕時，goodbye方法會被執行，他只是返回"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>
?<managed-bean>
??<description>The one and only HelloBean.</description>
??<managed-bean-name>helloBean</managed-bean-name>
??<managed-bean-class>org.jia.hello.HelloBean</managed-bean-class>
??<managed-bean-scope>session</managed-bean-scope>
?</managed-bean>
?<navigation-rule>
??<description>Navigation from the hello page.</description>
??<from-view-id>/hello.jsp</from-view-id>
??<navigation-case>
???<from-outcome>success</from-outcome>
???<to-view-id>/goodbye.jsp</to-view-id>
??</navigation-case>
?</navigation-rule>
</faces-config>
?? jsf 象大多數框架一樣，有一個配置文件，在之中你可以定義 導航規則、初始化javabean、注冊你自己的jsf組件、驗證器，和一些面向jsf應用其他方面的其他配置
?? 在這個配置文件中定義了一個bean, 指定了他的名字（這個名字就是我們在頁面中使用的名字），類全名，和使用范圍。還定義了一個導航規則，hello.jsp有一個”Goodbye“按鈕轉到其他頁，所以只有一個單獨的navigation-case，當輸出為”success"時，就會顯示goodbye.jsp。
?? 現在我們已經寫完了頁面，backing bean, 和配置文件，下面寫完web.xml后就可以看到效果了
?? //web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
?<display-name>hello world</display-name>
?<description>
??Welcome to JavaServer Faces.
?</description>
?<servlet>
??<servlet-name>Faces Servlet</servlet-name>
??<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
??<load-on-startup>1</load-on-startup>
?</servlet>
?<servlet-mapping>
??<servlet-name>Faces Servlet</servlet-name>
??<url-pattern>/faces/*</url-pattern>
?</servlet-mapping>
?<welcome-file-list>
??<welcome-file>faces/hello.jsp</welcome-file>
?</welcome-file-list>
</web-app>
?? FacesServlet 是做jsf 應用是一定要指定的，還設了默認頁為 hello.jsp.
?? 運行build, 啟動web server, 在地址欄中打入應用地址，看到剛剛寫的應用了吧，通過實際效果結合代碼，相信我們已經對jsf 已經有一個基本認識了。
?
總結
- 上一篇： JiBX初步
- 下一篇： Eclipse里web的依赖工程部署的简