`

JSF 2.0简介：Ajax对页面的增加与删除操作例子（系列之六）

    博客分类：
  • jsf
AjaxJSFBeanXHTMLCache 
阅读更多
上一篇我们初步接触了一下JSF2.0的Ajax模型，为了适应Ajax的应用场景，JSF2.0中还引入了f:ajax标签，我们这一篇就用来初步使用一下，并采用managed  bean处理页面的元素，看看整个处理过程是否更简介可控。

还是从上一篇中的例子开始，首先看看我们改写后的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}"/>
                            <h:commandButton  id="add"  style="padding:3px;width:100px;"  value="增加计数"  action="#{count.addCount}">
                                <f:ajax  execute="@this"  render="@none"  />
                            </h:commandButton>
                            <h:commandButton  id="delete"  style="padding:3px;width:100px;"  value="删除计数"  action="#{count.deleteCount}">
                                <f:ajax  execute="@this"  render="@none"  />
                            </h:commandButton>
            </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>

仔细观察一下，唯一的变化就是加入了两个button，并且分别加入了ajax的支持。
                            <h:commandButton  id="add"  style="padding:3px;width:100px;"  value="增加计数"  action="#{count.addCount}">
                                <f:ajax  execute="@this"  render="@none"  />
                            </h:commandButton>
此button解释一下就是执行managed  bean的addCount方法，并只做局部刷新。

再来看看managed  bean的变化，在count.java中加入了两个方法，如下：

count.java

        public  void  addCount()  {
                FacesContext  ctx  =  FacesContext.getCurrentInstance();
                ExternalContext  extContext  =  ctx.getExternalContext();
                if  (ctx.getPartialViewContext().isAjaxRequest())  {
                        try  {
                                extContext.setResponseContentType("text/xml");
                                extContext.addResponseHeader("Cache-Control",  "no-cache");
                                PartialResponseWriter  writer  =
                                            ctx.getPartialViewContext().getPartialResponseWriter();
                                writer.startDocument();
                                writer.startInsertBefore("echo");
                                writer.writeAttribute("id",  "before",  "id");
                                writer.writeAttribute("style",  "padding:0  0  10px  0",  "style");
                                writer.startElement("div",  null);
                                writer.writeText("应声器更新次数："+this.count,  null,  null);
                                writer.endElement("div");
                                writer.endInsert();
                                writer.endDocument();
                                writer.flush();
                                ctx.responseComplete();
                        }  catch  (Exception  e)  {
                                throw  new  FacesException(e);
                        }
                }
        }
        
        public  void  deleteCount()  {
                FacesContext  ctx  =  FacesContext.getCurrentInstance();
                ExternalContext  extContext  =  ctx.getExternalContext();
                if  (ctx.getPartialViewContext().isAjaxRequest())  {
                        try  {
                                PartialResponseWriter  writer  =
                                            ctx.getPartialViewContext().getPartialResponseWriter();
                                extContext.setResponseContentType("text/xml");
                                extContext.addResponseHeader("Cache-Control",  "no-cache");
                                writer.startDocument();
                                writer.delete("before");
                                writer.endDocument();
                                writer.flush();
                                ctx.responseComplete();
                        }  catch  (Exception  e)  {
                                throw  new  FacesException(e);
                        }
                }
        }

此两个方法从字面上理解来，一个是来给页面加入元素，一个是删除页面上的一个元素。可以在浏览器中输入http://localhost:8088/TestJsf2.0/echo.xhtml看看运行效果。这儿很容易就改变了页面的元素，不需要你写任何Ajax代码。所有的代码都采用java编写，调试等工作都会变得容易。

再来解释一下bean中的Partial  Response，这是在JSF2.0中新引入的生命周期模型，字面意思就是局部请求返回，也就是局部更新，正好与Ajax提倡的理念配合的天衣无缝。

具体的f:ajax标签的解释可以参考https://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/，另外针对Partial  Response的解释限于篇幅和本文的性质就暂时告一段落，想了解更多我们可以再开篇幅讨论。

至此，关于JSF2.0中引入的最大的两个改变就介绍完了，我们也初步了解了JSF2.0开发的便捷与优雅之处。以后针对更多的特性以及更深入的话题，我们可以多多探讨，当然，在应用中肯定还会碰到JSF2.0的不足之处，我们也可以一起讨论。
欢迎大家一起探讨开发中的问题，以及各类思想。也可以将问题反应在JSF组中，以促进共同进步！
分享到：
| JSF 2.0简介：初识Ajax，一个简单的例子（ ...
评论
1 楼 jackotty 2010-01-22  
我想请教lz，addCount()、deleteCount()到底干了什么？因为我的页面没有显示任何的元素，count也没有改变。谢谢！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在这个例子中，我们将深入探讨JSF 2.0如何实现Ajax功能，并通过详细的中文注释来辅助理解。** ### 1. JSF 2.0 的Ajax基础 Ajax（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下更新部分网页内容...

    jsf2.0实例

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

    Jsf2.0 Refrence

    "Jsf2.0 Refrence"书籍中的代码示例（jsf2-tcr-code-examples）将帮助读者更好地理解这些概念，通过实际操作加深对JSF的理解。这些例子涵盖了从基本组件使用到复杂应用场景的各个方面，对于学习和实践JSF 2.0非常有...

    jsf2.0 局部刷新

    这一过程主要通过 AJAX（Asynchronous JavaScript and XML）技术实现，它利用 JavaScript 在后台与服务器进行通信，获取更新的数据，并仅更新页面的指定部分。在 JSF 中，`&lt;f:ajax&gt;` 标签是实现这一功能的关键组件。...

    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简化页面制作

    JSF 2.0还引入了其他增强功能，如 faces-config.xml配置文件的简化，以及对Ajax支持的增强，使得页面交互更为动态。总的来说，JSF 2.0和Facelets的结合极大地简化了Java EE 6中复杂页面的开发，提高了开发效率和代码...

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

    通过以上讲解，我们对JSF 2.0的"Hello World"程序、AJAX功能以及如何模拟`onPageLoad`事件有了初步的理解。在实际项目中，这些基本概念将构成更复杂功能的基础。继续学习和实践，你将能够利用JSF的强大功能构建出...

    Sun_JSF2AndAjax.pdf

    ### JSF 2.0与Ajax：深入理解与实践 #### 概述 《Sun_JSF2AndAjax.pdf》这份文档深入探讨了JavaServer Faces（JSF）2.0框架中Ajax技术的应用与实践，提供了丰富的示例和技巧，帮助开发者理解和掌握在现代Web应用中...

    web 2.0 and Ajax

    部分内容：提到了Jim Driscoll对Web 2.0和Ajax的讲解，涵盖了定义、历史背景、Web 2.0的例子以及其关键特性。 ### Web 2.0与Ajax知识点详述 #### 1. Web 2.0定义 - 由Tim O'Reilly提出 Web 2.0代表了一个网络平台...

    JSF2-Getting-Started.zip_Getting Started

    JSF2.0通过`f:ajax`标签提供了内置的Ajax支持，允许你异步更新页面部分区域。例如： ```xml &lt;h:inputText id="name" value="#{myBean.name}"&gt; &lt;f:ajax event="blur" render="message" /&gt; &lt;/h:inputText&gt; &lt;h:...

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

    10. **Ajax支持**：JSF 2.0及更高版本引入了Ajax功能，允许部分页面更新，这对于动态操作组件来说尤为重要，因为可以无需刷新整个页面就能改变或添加组件。 通过学习这个"JSF(动态操作组件的例子)"，开发者可以深入...

    JSF例子

    JSF 2.0引入了内置的AJAX支持，允许部分页面更新，无需刷新整个页面。`&lt;f:ajax&gt;`标签可以与组件配合使用，实现异步数据交换，提高用户体验。 ### JSF与MVC模式 JSF遵循Model-View-Controller（MVC）设计模式，其中...

    jsfajax4jsf

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

    《jsf第一步》源码ch14-21

    10. **AJAX支持**：JSF 2.0引入了 partial page rendering 和 Ajax 支持，允许部分更新页面，提高用户体验。`p:ajax`标签是PrimeFaces库提供的一个例子，用于实现Ajax功能。 通过学习和实践这些章节的源码，开发者...

    《JSF入门》简体中文版

    7. **JSF与Ajax**：JSF 2.0及以后版本引入了对Ajax的支持，使得部分页面可以异步更新。书中会探讨如何使用JSF的Ajax功能，如`&lt;f:ajax&gt;`标签和RichFaces等扩展库。 8. **JSF与CDI集成**：JSF可以与Contexts and ...

    jsf demo 各种实例

    通过对"jsfdemo"中的例子进行实践和研究，开发者可以深入理解JSF的工作原理，掌握如何构建和部署JSF应用，并熟悉如何利用Eclipse和Tomcat这样的工具链来支持开发流程。同时，也可以了解到如何结合其他Java EE技术，...

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

    - **主要升级**：JSF 2.0 是一次重要的版本更新，不仅增加了许多有用的新特性，而且还简化了编程模型，引入了注解和“约定优于配置”的原则来处理常见的任务。 - **新特性**： - **Facelets 标签**：用于模板化页面...

    值得看的jsf入门教程

    - JSF 2.0引入了Partial State Saving和Ajax支持，使得部分页面更新成为可能。 - `p:ajax`标签可以从PrimeFaces库中使用，用于实现异步请求。 10. **集成第三方库** - JSF生态系统中有许多优秀的库，如...

    JavaServer.Faces.3rd.Edition

    - **Ajax支持**: JSF 2.0内置了对Ajax的支持，使得创建动态Web应用更加简单。 - **复合组件**: 开发者现在可以轻松创建和使用复合组件，以提高代码重用性和可维护性。 #### 三、书籍主要内容概览 - **Facelets标签...

Magicbox
Global site tag (gtag.js) - Google Analytics