使用ajax4jsf给jsf增加动态效果
Ajax4jsf 是一个添加Ajax功能到JSF项目中的开源框架,使用该框架不用写JS代码,只需要简单的引用类似<a4j:support event="onkeyup" reRender="rep">的语句就能将原来组件增加ajax支持。使用ajax4jsf的主要优点如下:
一在使用Ajax时充分显示JSF的优点.Ajax4jsf 完全被结合到 JSF 生命周期中. 当其他框架仅仅给你访问Managed Bean的便利时,Ajax4JSF带给你 Action 和 Value Change 监听器,激活服务端验证,在Ajax请求-响应周期中的转化这些功能。
二添加 AJAX 功能到已经存在的 JSF 项目.该框架被实现为使用一个组件库来添加ajax功能到你的页面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持. 这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后 如何使用JSF组件树来同步显示JSF页面
三使用内建的Ajax支持写自定义富组件.将来, 我们将有一个完全的组件开发包(CDK)来支持AJax4JSF. CDK 将包含代码生成工具和一个使用类似JSP语法的模版工具.这些功能将去除一些创建组件的一个例行工作.使用这个喝满油的组件工厂机器来创建一个带有Ajax功能的富组件将比使用传统的编码过程创建一个简单的组件还要简单.
四项目的Java类与资源包.除了核心的 AJAX 功能外, Ajax4jsf 也有管理资源的高级支持,例如:图片,JS代码和CSS样式表单,资源框架使 简单的打包这些资源到你自定义组件的Jar文件中成为可能
五动态(on-the-fly)将非常容易.作为另外一种附加的功能, 资源框架有一个动态产生图片的工具. 使用这个特性,你可以使用类似于使用Java Graphic2D库的方法来创建图片
六使用基于皮肤的技术来创建一个现代富用户界面的外观感觉(look-and-feel).Ajax4jsf 提供一个换肤特性 . 该特性允许通过命名的皮肤参数来简单的定义和管理不同颜色模式与其他UI特性. 你可以从JSP代码和Java代码(例如:基于UI的文本来产生动态的图片)来访问这些皮肤参数 . 注意:, 虽然换肤功能不是完全的替代传统的CSS,但是它还是值得称赞的
七测试components, actions, listeners, 和 pages 就像你在创建他们一样容易.一个制动测试工具正在开发中 .它将在你开发组件使为你的组件产生测试案例. 该测试框架不仅仅测试组件,也测试服务端和客户端的功能包括JS代码 .作为附加的有用工具,你不需要单独的部署测试程序到Servlet容器中 就可以做到这些了.
开始行动吧：
要使用Ajax4JSF 框架你仅仅需要JDK1.4或者更高,任何JSF实现,和你最喜欢的Servlet容器.在下一章我们将给你提供详细的环境信息.
Ajax4jsf 被设计为一个容易使用的框架.仅仅有一点简单的设置步骤就可以在你的JSF程序中使用Ajax功能了.
最新的Ajax4jsf 发布版在这里 https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/download.html 下载.
-
解压 ajax4jsf.zip 文件.
-
复制 ajax4jsf.jar and oscache-2.2.jar 到程序的 WEB-INF/lib 文件夹下.
-
把下面的内容添加到你的程序的 WEB-INF/web.xml 文件中:
<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>注意. 你可以复制和粘贴上面的内容在 README.txt 文件中.
-
添加下面的内容:
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>到你每个使用Ajax功能的JSP页面中.
配置如此easy吧，呵呵.
让我们来看一个简单的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 .
下面列举下常用的几个标签：