05.對 AJAX 的支持(f:ajax)

Contents

  1. 1 <f:ajax>
  2. 2 <p:ajax> / <p:ajaxState>
  3. 3 f:ajax
    1. 3.1 Sample
  4. 4 Google AJAX Librarys API
新一代 Web 應用程式 Web 2.0 運用 Ajax 技術（或 AJAX，非同步 JavaScript 及 XML）來改良這些缺點。在 Ajax 中，瀏覽器與伺服器會在背景互動，使用者並不會注意到。互動也比一般瀏覽器與伺服器間互動更為精細，瀏覽器可以只傳送頁面的一小部分給伺服器，伺服器也可 以只傳回（並更新）頁面的一小部分。任何事件（如使用者改選組合框裡的其他選項或勾選其他勾選框時，或移動滑鼠指標時）都能觸發瀏覽器與伺服器間的互動。 如此一來，
  • 通訊更加迅速，因為要傳輸的資料量減少了。
  • 使用者可停留在同一頁面，不必不斷導覽到其他頁面。
  • 重新載入的頁面不會閃爍，因為每一個 Ajax 要求都只會更新頁面的一小部分。
Ajax 的構想很簡單 - 接聽瀏覽器裡的事件，在背景將要求傳送給伺服器，伺服器回應時僅更新頁面的一小部分。但這實際上執行起來卻很麻煩。您不僅得深入瞭解 JavaScript™、主從架構通訊協定及伺服器端程式碼， 且由於各大瀏覽器版本各異，開發及除錯更形困難。




https://javaserverfaces.dev.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html

早些時候，Facelets 的初次登場成為了 JavaServer Pages (JSP) 的強有力候補。

然後出現了 Rich Faces，一個出色的 JSF Ajax 庫；接著是 ICEFaces，將 Ajax 和 JSF 聯合起來的新穎方法；還有 Seam、Spring Faces、Woodstock 組件、JSF Templating，等等。所有這些開源 JSF 項目都是由開發人員根據自己需要的功能構建的。JSF 2.0 專家組實際上對來自這些開源項目的最佳特性進行了標準化。儘管 JSF 2 規範確實是由一些理論家編寫的，但它也受到了來自實際開發的創新的驅動。

回想起來，專家組的工作其實非常輕鬆，因為我們正站在巨人的肩膀上，比如 Gavin King (Seam)、Alexandr Smirnov (Rich Faces)、Ted Goddard (ICEFaces) 和 Ken Paulson (JSF Templating)。實際上，所有這些巨人都是 JSF 2 專家組的成員。


<f:ajax>

<h:outputScript library="javax.faces" name="jsf.js" target="head"/>
....
<h:commandButton  id="post"  style="padding:3px;width:100px;"  value="Submit"  
                                    onclick="jsf.ajax.request(this,  event,  {execute:'form',  render:  'after'});  return  false;"
                                                actionListener="#{count.countIt}"/>


JSF 2.0
<h:commandButton id="post" style="..." value="Submit">
    <f:ajax event="click" execute="form" render="after" />
...

execute:』form』是表示提交的是當前id為form的表單，render:』after』表示只更新id為after的頁面元素。
javascripts 所有的過程都已經有實現專家組給我們封裝起來了，容易出錯的javascript調用的事情交給專家們去做吧，我們只來關注業務實現。

<p:ajax> / <p:ajaxState>



f:ajax

  • attritube
    • execute: 指定值送至Server端, EL: ValueExpression
      • 指定方式有六種, 預設為 @this
        • @all, @form, @this, @none, formid:clientid, clientid
    • render: 指定值送至Client端, EL: ValueExpression
      • 指定方式同上, 但預設為 @none
    • event: 指定事件類型, 如click, valueChange
    • listener: 指定事件發生後要執行的操作, EL: MethodExpression
    • Note: cannot work in HTTP GET method like h:button, h:link
  • via http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/f/ajax.html

Sample

JSF Facelet (View)
<h:form>
    <h:graphicImage library="images" name="#{hello.img}">
        <f:ajax event="click" render="@this" listener="#{hello.changeImg}" />
    </h:graphicImage>
</h:form>

ManagedBean (Controller)
@ManagedBean
public class Hello {
    public Hello() {
        img = render ? "success.png" : "fail.png";
    }
    
    private boolean render;
    private String img;

    public String getImg() {
        return img;
    }

    public void setImg(String img) {
        this.img = img;
    }

    public boolean isRender() {
        return render;
    }

    public void setRender(boolean render) {
        this.render = render;
    }

    public void changeImg(AjaxBehaviorEvent e) {
        render = !render;
        img = render ? "success.png" : "fail.png";
    }
}







Google AJAX Librarys API

Project, http://code.google.com/apis/ajaxlibs/




http://feidaodalian.javaeye.com/category/72761

http://www-01.ibm.com/software/tw/sf/article/20070823_rational.html

             <h:outputScript name="jsf.js"
                            library="javax.faces" target="head"/>
            <h:outputText id="randomID" value="#{random.random}"/>
            <h:commandButton id="buttonID" value="Random"
                             onclick="jsf.ajax.request(this, event,{execute:
                     this.id, render: 'randomID'}); return false;"/>


                 <h:outputText id="randomID1" value="#{random.random}"/>
            <h:commandButton id="buttonID1" value="Random">
                <f:ajax execute="formID1:buttonID1 formID1:randomID1"
                        render="formID1:randomID1"/>
            </h:commandButton>


            <h:outputText id="randomID2" value="#{random.random}"/><br/>
            <h:outputText id="randomID3" value="#{random.random}"/>
            <h:commandButton id="buttonID2" value="Random">
                <f:ajax  render="randomID3" />
            </h:commandButton>

Comments