讓我們來看一個簡單的JSF項目. 我們僅僅需要一個JSP頁面,里面包含一個Form和一些JSF標簽: <h:inputText> 和 <h:outputText>.
我們這個簡單的程序應該可以讓我們輸入一些文字到<h:inputText>中, 然后發送數據到Server,并在 <h:outputText>中顯示Server的響應(給我們一個Echo信息).
下面是一個我們需要的頁面代碼 (echo.jsp) :
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>repeater </title>
</head>
<body>
<f:view>
<h:form>
<h:inputText size="50" value="#{bean.text}" >
<a4j:support event="onkeyup" reRender="rep"/>
</h:inputText>
<h:outputText value="#{bean.text}" id="rep"/>
</h:form>
</f:view>
</body>
</html>
就如你看到的,唯一一行于常給JSF頁面代碼不同的就是下面的一行
<a4j:support event="onkeyup" reRender="rep"/>
在這里我們在父標簽(<h:inputText>)中添加了一個AJAX 支持. 該支持綁定了JavaScript事件“onkeyup” .因此, 每一次該事件發布給父標簽時,我們的程序將發送一個AJAX請求到Server.這意味著我們的受管理的bean將包含該“text” 域中我們輸入的最新數據.
<a4j:support> 標簽的“reRender” 屬性(attribute)定義我們的頁面的哪一部分被更新. 在這里,該頁面唯一被更新的部位是 <h:outputText> 標簽,因為他的ID值和“reRender” 的屬性值向匹配. 在一個頁面中更新多個元素(elements)也是很簡單的:僅僅把他們的IDs放在 “reRender” 屬性中就可以了.
當然了,為了運行這個程序我們還需要一個受管理的bean
package demo;
public class Bean {
private String text;
public Bean() {
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
下一步, 我們需要在faces-config.xml 中注冊上面的bean:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>bean</managed-bean-name>
<managed-bean-class>demo.Bean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>text</property-name>
<value/>
</managed-property>
</managed-bean>
</faces-config>
注意:這里沒有任何東西直接和Ajax4jsf 有關聯.
最后,不要忘了添加jar文件和更改 web.xml 文件:
<?xml version="1.0"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>a4jEchoText</display-name>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<listener>
<listener-class>
com.sun.faces.config.ConfigureListener
</listener-class>
</listener>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
</web-app>
就這樣了, 現在你的程序應該可以工作了.
最終,你可以在Servlet容器中部署你的程序了. 在你喜歡的容器中部署,然后在你的瀏覽器中輸入: http://localhost:8080/a4jEchoText/echo.jsf