引言: 讀此篇文章時,假設您已經具備了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異步更新.
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如下：
有關Dynamic Faces的包可以從這里下載：
https://jsf-extensions.dev.java.net/servlets/ProjectDocumentList