学习新Ajax技术--Dynamic Faces

OSGi JSF Eclipse RCP

引言: 读此篇文章时,假设您已经具备了JavaServer Faces Technology的基础知识.
本文从Dynamic Faces所提供的一个例子出发.

Backing Bean
FruitInfoBean .java

package simpleDynamicFaces;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;

public class FruitInfoBean {

    /** Creates a new instance of FruitInfoBean */
    private Map<Object, Object> fruitNamesMap = new HashMap<Object, Object>();
    private String fruit = null;
    private String variety = null;
    private String varietyInfo = null;

    public FruitInfoBean() {
        this.init();
    }

    private void init() {
        FacesContext context = FacesContext.getCurrentInstance();
        System.out.println("Locale:" + context.getViewRoot().getLocale());
        fruit = "Pear";
        variety = "Aurora";
        fruitNamesMap.put("Pear", "Aurora,Bartlet,Bosc,Comice,Delicious");
        fruitNamesMap.put("Apple", "Adanac,Akane,Ballarat,Braeburn,Fuji,Gala");
        fruitNamesMap.put("Orange", "Berna,Hamlin,Moro,Navel,Valencia");
        fruitNamesMap.put("Peach",
                "Brighton,Clingstone,Contender,Eden,Freestone");
    }

    /*
     * Handler method called when user selects a variety from the menu. This
     * method updates the variety component model value and sets the varietyInfo
     * model value to the appropriate message.
     */
    public String updateVariety(ValueChangeEvent e) {
        String newVariety = (String) e.getNewValue();
        String currentFruit = getFruit();
        setVarietyInfo("Information updated:" + newVariety + " Old:"
                + currentFruit);
        return null;
    }

    public String getFruit() {
        return this.fruit;
    }

    public void setFruit(String fruit) {
        this.fruit = fruit;
    }

    protected ArrayList<SelectItem> fruits = null;

    public ArrayList<SelectItem> getFruits() {

        fruits = new ArrayList<SelectItem>();
        fruits.add(new SelectItem("Pear", "Pear"));
        fruits.add(new SelectItem("Apple", "Apple"));
        fruits.add(new SelectItem("Orange", "Orange"));
        fruits.add(new SelectItem("Peach", "Peach"));

        return fruits;
    }

    public String getVariety() {
        return this.variety;
    }

    public void setVariety(String variety) {
        this.variety = variety;
    }

    protected ArrayList<SelectItem> varieties = null;

    public ArrayList<SelectItem> getVarieties() {
        varieties = new ArrayList<SelectItem>();
        String[] fruitVarieties = fruitNamesMap.get(this.fruit).toString()
                .split(",");
        for (int i = 0; i < fruitVarieties.length; i++) {
            varieties.add(new SelectItem(fruitVarieties[i], fruitVarieties[i]));
        }
        return varieties;
    }

    /*
     * Handler method for the event of selecting a fruit. This method sets the
     * model value for the variety component and sets the varietyInfo model
     * value to the appropriate message.
     */
    public void changeFruit(ValueChangeEvent e) {
        String fruitValue = (String) e.getNewValue();
        String[] varieties = fruitNamesMap.get(fruitValue).toString()
                .split(",");
        setVarietyInfo("Information:" + (varieties[0]));
        setVariety(varieties[0]);
    }

    public String getVarietyInfo() {
        return this.varietyInfo;
    }

    public void setVarietyInfo(String varietyInfo) {
        this.varietyInfo = varietyInfo;
    }

    /*
     * The following code is used with the installDeferredAjaxTransaction use
     * case
     */
    private String fruitQuiz = null;

    public String getFruitQuiz() {
        return this.fruitQuiz;
    }

    public void setFruitQuiz(String fruit) {
        this.fruitQuiz = fruit;
    }

}

fireAjaxTx.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib prefix="jsfExt" uri="http://java.sun.com/jsf/extensions/dynafaces"%>

<f:view>
    <html>
    <head>
    <title>Fruit Varieties</title>
    <jsfExt:scripts />
    </head>
    <body bgcolor="white">

    <h:form prependId="false" id="form">

        <h1>Fruit Varieties</h1>
        <h:panelGrid columns="2" cellpadding="4">
            <h:outputText value="Select a fruit:" />
            <h:outputText value="Select a variety:" />
            <h:selectOneRadio id="fruit" value="#{fruitInfoBean.fruit}"
                onclick="DynaFaces.fireAjaxTransaction(this, { execute: 'fruit'});"
                valueChangeListener="#{fruitInfoBean.changeFruit}">
                <f:selectItems value="#{fruitInfoBean.fruits}" />
            </h:selectOneRadio>

            <h:selectOneMenu id="variety" value="#{fruitInfoBean.variety}"
                onchange="DynaFaces.fireAjaxTransaction(this, { execute: 'variety' });"
                valueChangeListener="#{fruitInfoBean.updateVariety}">
                <f:selectItems value="#{fruitInfoBean.varieties}" />
            </h:selectOneMenu>

        </h:panelGrid>
        <h:outputText id="varietyInfo" value="#{fruitInfoBean.varietyInfo}" />

    </h:form>

    </body>
    </html>
</f:view>

其中的DynaFaces.fireAjaxTransaction方法由jsf-extensions-dynamic-faces.jar里的com_sun_

faces_ajax.js定义,这个方法可以在JSF组件级别上执行AJAX异步更新.

使用fireAjaxTransaction:
1.在JSF组件的标签里加JavaScript 事件属性，如：onClick="DynaFaces.fireAjaxTransaction(paras)"
2. 在DynaFaces.fireAjaxTransaction加上paras,以便可以传递一些参数到Server.

execute: 'fruit'的意思是:Id为fruit的JSF组件(包括这个组件的所有Children),将会Go Through JSF Life Circle的execute部分. 在这部分生命周期后,当前页面所有的JSF组件将会通过Ajax被re-render(这里是默认行为,因为没有指定render属性), 其中execute生命周期部分所做的工作如下:转换和验证数据,更新数据模型和处理Action事件. value-change事件属于fruit组件,所以当发出AJAX

请求时,该事件也会被处理,从而达到更新模型数据的目的.



常用的属性:

1. execute: A JavaScript String specifying which JSF component id's to process.

2. immediate: Not really needed, but if there was validation on the field in "execute" immediate would skip the validation.

3. inputs: The values sent to the server.  This may be different than the components processed.

4. render: This specifies which area(s) of the screen should be updated with the response.  In this case the <div> around our message text.

所需的Lib如下：