簡(jiǎn)單的 AJAX Echo 項(xiàng)目
讓我們來(lái)看一個(gè)簡(jiǎn)單的JSF項(xiàng)目. 我們僅僅需要一個(gè)JSP頁(yè)面,里面包含一個(gè)Form和一些JSF標(biāo)簽: <h:inputText> 和 <h:outputText>.
我們這個(gè)簡(jiǎn)單的程序應(yīng)該可以讓我們輸入一些文字到<h:inputText>中, 然后發(fā)送數(shù)據(jù)到Server,并在 <h:outputText>中顯示Server的響應(yīng)(給我們一個(gè)Echo信息).
下面是一個(gè)我們需要的頁(yè)面代碼 (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頁(yè)面代碼不同的就是下面的一行
<a4j:support event="onkeyup" reRender="rep"/>
在這里我們?cè)诟笜?biāo)簽(<h:inputText>)中添加了一個(gè)AJAX 支持. 該支持綁定了JavaScript事件“onkeyup” .因此, 每一次該事件發(fā)布給父標(biāo)簽時(shí),我們的程序?qū)l(fā)送一個(gè)AJAX請(qǐng)求到Server.這意味著我們的受管理的bean將包含該“text” 域中我們輸入的最新數(shù)據(jù).
<a4j:support> 標(biāo)簽的“reRender” 屬性(attribute)定義我們的頁(yè)面的哪一部分被更新. 在這里,該頁(yè)面唯一被更新的部位是 <h:outputText> 標(biāo)簽,因?yàn)樗腎D值和“reRender” 的屬性值向匹配. 在一個(gè)頁(yè)面中更新多個(gè)元素(elements)也是很簡(jiǎn)單的:僅僅把他們的IDs放在 “reRender” 屬性中就可以了.
當(dāng)然了,為了運(yùn)行這個(gè)程序我們還需要一個(gè)受管理的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 中注冊(cè)上面的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>
注意:這里沒(méi)有任何東西直接和Ajax4jsf 有關(guān)聯(lián).
最后,不要忘了添加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>
就這樣了, 現(xiàn)在你的程序應(yīng)該可以工作了.
最終,你可以在Servlet容器中部署你的程序了. 在你喜歡的容器中部署,然后在你的瀏覽器中輸入: http://localhost:8080/a4jEchoText/echo.jsf