新的起點 新的開始

          快樂生活 !

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

          公告

          Locations of visitors to this pageBlogJava
        1. 首頁
        2. 新隨筆
        3. 聯系
        4. 聚合
        5. 管理
        6. <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          統計

          常用鏈接

          留言簿(13)

          隨筆分類(71)

          隨筆檔案(179)

          文章檔案(13)

          新聞分類

          IT人的英語學習網站

          JAVA站點

          優秀個人博客鏈接

          官網學習站點

          生活工作站點

          最新隨筆

          搜索

          積分與排名

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 寻乌县| 海安县| 桂东县| 水富县| 金溪县| 交口县| 沙河市| 霞浦县| 韶山市| 外汇| 吉安县| 银川市| 景东| 峨边| 合阳县| 剑阁县| 资源县| 莱西市| 白山市| 商南县| 古丈县| 瓦房店市| 建昌县| 乌什县| 湖北省| 苏尼特右旗| 封开县| 平定县| 白河县| 乌兰浩特市| 张家川| 嵊泗县| 墨竹工卡县| 乐清市| 皋兰县| 永宁县| 徐州市| 肇州县| 南陵县| 中牟县| 罗江县|