新的起点 新的开始

快乐生活 !

深入浅出JSF2系列一 最酷的特性 支持AJAX.

  随着JSF2规范通过,JSF2已经慢慢进入我们的视线,本系列以Sun 推荐实现JSF2-Mojarra 为基础,来深入浅出看看JSF2给我们带来了什么。
  首先看看最酷的特性,支持AJAX。
  JSF是基于组件的web Framework,本身有生命周期控制,在JSF1.2的Spec中,没有支持AJAX,而为了提高Web的可用性,AJAX又是必须的。怎么做呢?Oracle的ADF Faces ,Apache 的MyFaces 以及IceFaces等个自有各自的实现,其中ADF Faces和MyFace提出 PPR(Partial Page Rendering)局部渲染技术,其实在本质上就是AJAX。 通过一个事件比如CommandButton CommandLink 等刷新局部需要更改的页面,而不是整个页面。这些实现虽然能够解决问题,但毕竟不是规范不是统一的实现,导致JSF的开发学习成本提高。JSF2面对这种局面,在规范中明确指出JSF2支持AJAX。
        下面的例子来自Mojarra Samlple,看看JSF2中AJAX的使用:
    
1. 准备条件:
     从https://javaserverfaces.dev.java.net下载jSF2 jsf-api.jar  jsf-impl.jar
2.  选择熟悉的IDE和JEE 服务器,本文为Eclipse 和JBoss。
3.  创建Web工程,导入jsf-api.jar  jsf-impl.jar到lib中。
4.  拷贝samples\basic-ajax
5.  Run count.xhtml

分析AJAX调用:

<!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">
<h:head>
    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    
<title>Ajax</title>
</h:head>
<h:body>
    
<h:form id="form1" prependId="false">
        <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
        <h:outputStylesheet name="stylesheet.css"/>
        
<h:outputText id="out1" value="#{count.count}"/>
        
<br/>
         
<h:outputText id="test1" value="otherValue"/>
         
<h:outputText id="test" value="#{count.countStr}"/>
        
<br/>
        
<!-- Increment the counter on the server, and the client -->
        
<h:commandButton id="button1" value="Count"
                         onclick="jsf.ajax.request(this, event, {execute: this.id, render: 'out1'}); return false;"/>
        <br/>
        
<!-- Resets the counter, doesn't refresh the page -->
        <h:commandButton id="reset" value="reset"
                            onclick
="jsf.ajax.request(this, event, {execute:'reset', render: 'out1'}); return false;"
                            actionListener
="#{count.reset}"/>
        
<h:messages/>
    
</h:form>
  
</h:body

 JSF2使用XHTML来表示页面。在页面中,引入jsf.js. 然后在button1的Onlick事件中AJAX请求Server  jsf.ajax.request(this, event, {execute: this.id, render: 'out1'}). 点击后,仅仅刷新 id为out1d的outputText组件,而不是真个页面。

看看BackBean的代码:

package net.blogjava.vincent.basicajax;

import javax.faces.event.ActionEvent;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;

@ManagedBean(name 
= "count")
@SessionScoped
public class Count implements Serializable {

    
private static final long serialVersionUID = 6499154494910177344L;    

    Integer count 
= 0;
    String  countStr
="";
    
    
public String getCountStr(){
        
     
return ""+count;
    }


    
public Integer getCount() {
        
return count++;
    }


    @SuppressWarnings(
{"UnusedDeclaration"})
    
public void reset(ActionEvent ae) {
        count 
= 0;
    }

}

首先看到JSF2 不需要XML配置文件,通过注释指定Backeban 名字已经Sceope。
当点击button1,局部刷新id为out1d的outputText组件,而id 为test的outputText不会变化。真正做多局部刷新,如下图:



点击CountButton时,第一个OutputText 值一直在曾加,而下面的没有变化,而真个页面刷新时,两个值在变化。

总结:
       通过及其简单的例子说明了JSF2 AJAX特性。我们也可通过该特性实现很炫的功能。相对于PPR,该实现更自由,我们一个在任何组件上调用AJAX,而不像目前PPR只在先对几个组件上。 未完 接下来的更精彩!!


posted on 2009-07-19 12:25 advincenting 阅读(3593) 评论(0)  编辑  收藏 所属分类: java EE


只有注册用户登录后才能发表评论。


网站导航:
 

公告

Locations of visitors to this page

导航

<2024年4月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

统计

常用链接

留言簿(13)

随笔分类(71)

随笔档案(179)

文章档案(13)

新闻分类

IT人的英语学习网站

JAVA站点

优秀个人博客链接

官网学习站点

生活工作站点

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜