`
yingfang05
  • 浏览: 123370 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JSF 2.0的一个AJAX例子

    博客分类:
  • jsf
阅读更多
首先创建一个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!
分享到:
评论

相关推荐

    JSF2.0 的ajax实现的例子,配有详细的中文注释

    **JSF 2.0(JavaServer ...总结来说,这个JSF 2.0的Ajax实现示例是一个宝贵的教育资源,可以帮助开发者快速理解和应用JSF的Ajax功能。通过详细阅读代码和中文注释,你将能够熟练地在自己的项目中使用Ajax提升用户体验。

    jsf2.0实例

    文档《JSF2.0系列简介.doc》可能详细介绍了JSF 2.0的基础知识和实践指导,而压缩包中提供的源代码可能是为了演示如何在实际项目中使用JSF 2.0。这些示例可能涵盖了以下内容: - **创建基本的JSF页面**:展示如何...

    Jsf2.0 Refrence

    **JSF 2.0(JavaServer Faces 2.0)是Java EE平台中的一个用于构建Web用户界面的组件框架。这个框架允许开发者通过声明式的方式处理用户交互,减轻了编写大量HTML和JavaScript代码的负担。** 在"Jsf2.0 Reference...

    jsf 2.0(jar+源码+api+新特性示例)

    **JSF 2.0(JavaServer Faces 2.0)是Java EE 6中引入的一个重要的Web应用程序开发框架,用于构建用户界面。这个框架基于MVC(Model-View-Controller)模式,提供了丰富的组件库和事件处理机制,极大地简化了前端...

    在Java EE 6中使用JSF 2.0简化页面制作

    下面是一个简单的Facelets页面示例,这个例子展示了如何在Java EE 6中使用JSF 2.0和Facelets: 1. 首行定义了XML版本和编码。 2-3. DOCTYPE声明定义了文档遵循的XHTML标准。 4-7. 这里定义了页面的命名空间,包括...

    jsf2.0 局部刷新

    在这个例子中,当 `input` 输入框失去焦点(`event="blur"`)时,会发送一个 AJAX 请求到服务器,更新 `output` 输出框的值。 ### 3. `render` 和 `execute` 属性 - `render` 属性:指定需要更新的组件的客户端 ID...

    JSF2.0实战 - 1-3、Hello World,AJAX体验,onPageLoad

    以下是一个简单的AJAX调用例子: 1. **添加AJAX行为**:在JSF页面中,可以使用`&lt;f:ajax&gt;`标签来触发AJAX请求。例如,我们可以添加一个按钮,当点击时更新页面的一部分: ```html &lt;f:ajax execute="@this" ...

    web 2.0 and Ajax

    Web 2.0和Ajax的兴起标志着互联网从一个简单的信息展示平台转变为一个高度互动、用户中心和持续进化的生态系统。这些技术和服务的创新不仅改变了我们使用互联网的方式,也深刻影响了社会的多个层面。随着技术的不断...

    JSF2-Getting-Started.zip_Getting Started

    要开始使用JSF2.0,你需要设置一个兼容的Java EE服务器(如Tomcat、GlassFish),安装JSF库,然后创建一个基本的JSF项目。可以使用Maven或Gradle等构建工具管理依赖,并通过IDE(如Eclipse或IntelliJ IDEA)创建和...

    Sun_JSF2AndAjax.pdf

    - **`&lt;f:ajax&gt;`标签**:这是一个关键的JSF标签,用于在不刷新整个页面的情况下触发Ajax请求。通过设置`render`和`execute`属性,可以指定哪些组件应该重新渲染,哪些组件应该重新执行。 - `render`属性默认为`@none...

    JSF(动态操作组件的例子)

    这个"JSF(动态操作组件的例子)"项目是为开发者提供一个实践JSF动态操作组件的实例,帮助理解如何在JSF应用中创建、修改和删除组件。下面将详细介绍JSF的核心概念以及动态操作组件的相关知识点。 1. **JSF框架概述**...

    JavaServer.Faces.3rd.Edition

    - **SampleBean.java**是一个托管bean的例子,演示了如何设置和获取bean属性。 - **请求参数处理**: - GET请求参数会在页面渲染前设置bean属性。 - 当按钮被渲染时,会调用`getContinueOutcome()`方法,同时将...

    JSF例子

    **JSF(JavaServer Faces)** 是一个Java平台上的用户界面框架,用于构建Web应用程序。它简化了前端和后端的交互,提供了组件化、事件处理和生命周期管理等功能。JSF的核心是组件模型,允许开发者使用预定义的UI组件...

    JSF1.2+Spring2.0+Hibernate3.2的一个登陆实例

    在本实例中,我们探索的是一个基于JSF 1.2、Spring 2.0和Hibernate 3.2的登录应用。这个集成框架是企业级Java应用程序开发的常见选择,因为它提供了模型-视图-控制器(MVC)架构、依赖注入(DI)以及持久化管理的...

    jsfajax4jsf

    `&lt;f:ajax&gt;`是JSF 2.0引入的一个内建标签,它使得开发者能够在JSF组件上轻松添加Ajax功能。通过`&lt;f:ajax&gt;`,你可以指定触发Ajax请求的事件、更新的DOM区域以及处理响应的后台方法。 例如: ```html ...

    《jsf第一步》源码ch14-21

    `p:ajax`标签是PrimeFaces库提供的一个例子,用于实现Ajax功能。 通过学习和实践这些章节的源码,开发者可以掌握JSF的基本用法,了解如何创建组件化、可维护的Web应用,并逐渐进阶到更复杂的JSF特性,如自定义组件...

    jsf demo 各种实例

    **JSF(JavaServer Faces)** 是一个Java平台上的用户界面框架,用于构建Web应用程序。它提供了一种组件化和事件驱动的方式来创建交互式的Web界面。JSF的核心概念包括组件、事件、渲染器和生命周期,这使得开发人员...

    Core JavaServer Faces 3rd Edition JSF核心编程第三版

    - **WEB-INF/classes/com/corejsf/SampleBean.java**:这是一个管理Bean的例子,用于存储业务逻辑。 - **Outcome 映射**:成功或错误的结果可以通过`faces-config.xml`中的映射进行配置,如果没有指定映射,则默认...

    值得看的jsf入门教程

    - JSF是一个MVC(Model-View-Controller)架构的框架,用于构建动态、数据驱动的Web应用。 - 它提供了一种声明式的方式处理用户输入,减轻了开发者的工作负担。 - JSF通过UI组件、事件处理和数据绑定等特性,提高...

Global site tag (gtag.js) - Google Analytics