新的起點 新的開始

          快樂生活 !

          深入淺出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 閱讀(3612) 評論(0)  編輯  收藏 所屬分類: java EE

          公告

          Locations of visitors to this pageBlogJava
        1. 首頁
        2. 新隨筆
        3. 聯系
        4. 聚合
        5. 管理
        6. <2025年5月>
          27282930123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          統計

          常用鏈接

          留言簿(13)

          隨筆分類(71)

          隨筆檔案(179)

          文章檔案(13)

          新聞分類

          IT人的英語學習網站

          JAVA站點

          優秀個人博客鏈接

          官網學習站點

          生活工作站點

          最新隨筆

          搜索

          積分與排名

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 大厂| 牡丹江市| 河西区| 大田县| 林周县| 靖江市| 高密市| 郑州市| 田东县| 北流市| 西峡县| 龙井市| 海宁市| 汽车| 耒阳市| 洞口县| 清苑县| 特克斯县| 宁陕县| 连云港市| 库车县| 岱山县| 长沙市| 故城县| 龙海市| 台湾省| 汝州市| 洛南县| 民和| 普陀区| 山东省| 广水市| 凉山| 曲麻莱县| 黄山市| 安国市| 治多县| 贺州市| 绥宁县| 荆州市| 博野县|