从本期介绍开始,我们来看看JSF 2.0对Ajax的支持,一贯的,我们还是采用最实际的方式,例子来做说明。
我们回到系列三中实现的例子,从这个例子开始,加入一点Ajax功能。
首先创建一个ManagedBean用来记录我们提交按钮的数量。示例如下:
Count.java
package test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "count")
@RequestScoped
public class Count implements Serializable {
private static final long serialVersionUID = 6499154494910177344L;
private int count = 0;
public int getCount() {
return count;
}
public void countIt() {
count++;
}
}
再来改造一下我们的echo.xhtml,如下:
echo.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:echo="http://java.sun.com/jsf/composite/echo"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>测试简单的复合组件</title>
<meta http-equiv="keywords" content="jsf2.0,组件,ajax" />
<meta http-equiv="description" content="测试简单的复合组件." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<body>
<div id="header" style="padding:100px 0 20px 100px;font-size:22px;font-weight:bold;border-bottom:solid 1px red">
这个应声器的作者是:#{echo.encoder.author}。
</div>
<div>
<h:form id="form" style="padding:20px 0 20px 100px">
<h:outputScript library="javax.faces" name="jsf.js" target="head"/>
<echo:echoInputText echo="#{echo}"></echo:echoInputText>
<div style="padding-left:50px">
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应"
onclick="jsf.ajax.request(this, event, {execute:'form', render: 'after'}); return false;"
actionListener="#{count.countIt}"/>
</div>
</h:form>
</div>
<h:panelGroup id="after">
<div style="padding:20px 0 0 100px">
<div style="padding:0 0 10px 0">应声器更新次数:#{count.count}</div>
响应:<h:outputText id="echo" value="#{echo.outText}" escape="false"></h:outputText>
</div>
</h:panelGroup>
</body>
</html>
看看有些什么变化,其中加入了一行
<div style="padding:0 0 10px 0">应声器更新次数:#{count.count}</div>
用来记录更新次数。<h:outputScript library="javax.faces" name="jsf.js" target="head"/> 这一句用来引入JSF2.0的ajax支持,意思就是将JSF2.0的Ajax支持的javascript引用加到<h:head></h:head>标签之间。
再有一个变化就是CommandButton:
<h:commandButton id="post" style="padding:3px;width:100px;" value="提交响应"
onclick="jsf.ajax.request(this, event, {execute:'form', render: 'after'}); return false;"
actionListener="#{count.countIt}"/>
加入了一个onclick动作和一个监听事件。看到重点了,这儿解释一下onclick中的两个重要参数,execute:’form’是表示提交的是当前id为form的表单,render:’after’表示只更新id为after的页面元素。actionListener调用的是Count类中的countIt方法,这是JSF的事件模型,在以前的版本中就存在的,就不多做说明了。
好了,输入http://localhost:8080/TestJsf2.0/echo.xhtml可以查看一下运行效果,只有after之间的内容改变了吧。在JSF2.0中加入Ajax支持就是这么简单,^_^。具体的说明可参考https://javaserverfaces.dev.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html
JSF2.0中的Ajax有四个方法:jsf.ajax.addOnError(callback),jsf.ajax.addOnEvent(callback),jsf.ajax.request(source, event, options),jsf.ajax.response(request, context)。其中request用来请求,并通过options项设置错误回调,事件回调方法以及其他运行表单,更新内容等信息,response是回调方法,一般不需要自己设置,只要回传的方法符合标准,他会自动调用,并更新相应的位置,一个标准的返回数据如下:
<?xml version="1.0" encoding="utf-8"?>
<partial-response><changes><update id="after"><![CDATA[<span id="after">
<div style="padding:20px 0 0 100px">
<div style="padding:0 0 10px 0">应声器更新次数:1</div>
响应:<span id="echo">ddddd</span>
</div></span>]]></update><update id="javax.faces.ViewState"><![CDATA[-8017186116961147735:-2243811565520699646]]></update></changes></partial-response>
这个信息,我是用TCP/IP monitor截取,其中的中文部分在这个工具中是乱码,我为了看着方便,替换成中文了。
这个例子是可以正常运行了,不过用的时候是不是有一点不太对劲?计数总是1。^_^,这是一个陷阱。现在我们再修改一下Count.java,修改后如下:
Count.java
package test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean(name = "count")
@ViewScoped
public class Count implements Serializable {
private static final long serialVersionUID = 6499154494910177344L;
private int count = 0;
public int getCount() {
return count;
}
public void countIt() {
count++;
}
}
与前面唯一的差别就是将@RequestScoped修改为了@ViewScoped。再看看计数正常了吧,^_^,留一点悬念给大家,从这个例子可以体会一下新加入的ViewScoped作用域的用法。如果技术值还一直是1,那肯定是你没有重新部署,redeploy一下,Ok!
例子是不是很简单,那所有的javascript代码去了哪儿?如果你愿意,可以将最终生成的代码保存一下,查看一下javascript代码。所有的过程都已经有实现专家组给我们封装起来了,容易出错的javascript调用的事情交给专家们去做吧,我们只来关注业务实现。
分享到:
相关推荐
JSF 2.0 Programming Cookbook JSF PAGE Ajax JSF J2EE Eclipse IDE support
JSF2.0实战 - 10、自定义Ajax更新方式源代码
JSF2.0标签手册DQSV
JSF JSF2.0 Ajax javaweb JSF与Ajax交互实现
jsf2.0 整合了ajax,这个是英文文档来的
Mojarra JSF 2.0库文件。开发JSF2.0 Web应用时放在lib目录下。
jsf2.0的开发配置说明,和简单的配置例子,开发例子,及JSF2.0的所有标签的详细分析。
JSF2.0实战 - 6、TextBox示例代码
个人收集的JSF2.0的开发简介 共64页 讲解了绝大部份JSF2.0的新特性
JSF2.0实战 - 7、自定义<h:head>源代码
jsf2.0数据校验,文档为英文,.. • Manual validation – Validation in the action controller method • Implicit automatic validation Tidh“id”ib – Type conversion and the “required” attribute • ...
JSF2.0系列简介.doc 和 文档想配的源代码,后面的AJAX的例子做,留给你们自己完成.希望能帮助到大家
jSF2.0与Spring整合实例+教程
JSF2.0 自带的ajax实现很方便, 有多个工程可演示,必须在Tomcat6,jboss5,glassfish3才支持JSF2.0
JSF 2.0 Ajax 世界中的 GMaps4JSF
jsf2.0 dataTable单行修改例子,包含了jsf dataTable修改一行数据的方法
JSF2.0_开发入门JSF2.0_开发入门JSF2.0_开发入门JSF2.0_开发入门JSF2.0_开发入门JSF2.0_开发入门JSF2.0_开发入门
jsf2.0+richfaces4.2.3需要的jar包
JSF2.0实战 - 1-3、Hello World,AJAX体验,onPageLoad示例代码
由于JSF2.0标准实现没有提供文件上传组件,而实际应用中很多时候需要上传文件,为了方便开发,我做了一个基于JSF2.0的文件上传组件,上传使用的是Apache 的commons-fileupload组件,我已经将commons-fileupload-...