最近忙，好久沒來這里寫東西了。今天抽點(diǎn)時(shí)間繼續(xù)。
上周去北京，坐火車去，在火車上閱讀《Core J2EE Patern》,想起再上一次去北京，也是坐火車，也是閱讀這本書，不過那次是第1版。
還有巧的是，去時(shí)鋪位是16車16號(hào)，來時(shí)居然又買到16車16號(hào)，不過是上鋪。真是有點(diǎn)意思。
Recipe 3.9. 產(chǎn)生動(dòng)態(tài)選擇列表項(xiàng)目
問題
你想要基于同一個(gè)表單中的另一個(gè)字段的變化，動(dòng)態(tài)改變一個(gè)select元素中顯示的項(xiàng)目，而不是非要在客戶端使用JavaScript 來處理選項(xiàng)集。
|
|
這個(gè)問題并不會(huì)完全避免JavaScript；相反，它展示了如何從客戶端JavaScript事件監(jiān)聽器中調(diào)用Struts action 的技術(shù)。 | |
動(dòng)作要領(lǐng)
使用onchange或者onclick JavaScript 監(jiān)聽器來調(diào)用一個(gè)將表單提交至一個(gè)Struts Action的JavaScript 函數(shù)。在Action中，執(zhí)行必要的業(yè)務(wù)邏輯來構(gòu)造一個(gè)新的select選項(xiàng)集，并且將控制轉(zhuǎn)發(fā)回原來的JSP 頁面。Example 3-11就展示了當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí)將表單提交至一個(gè)Action的JSP頁面。單選按鈕的值是作為一個(gè)請(qǐng)求參數(shù)傳遞給Action的。
Example 3-11. 使用JavaScript提交表單
<%
@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
function getOptions(control) {
form = control.form;
form.action = "SetOptions.do?someProp=";
form.action += control.value;
form.submit( );
}
</script>
</head>
<body>
<html:form action="ProcessMyForm">
<html:radio property="someProp1" value="val1"
onclick="getOptions(this);"/> Value 1<br/>
<html:radio property="language" value="val2"
onclick="getOptions(this);"/> Value 2<br/>
SomeProp2:
<html:select property="someProp2">
<html:optionsCollection property="prop2Values"/>
</html:select>
</p>
<html:submit/>
</html:form>
</body>
</html>
動(dòng)作分解
當(dāng)一個(gè)Web頁面的動(dòng)態(tài)交互需求是業(yè)務(wù)邏輯驅(qū)動(dòng)的時(shí)候，那么最好使用一個(gè)Action，而不是JavaScript，來執(zhí)行這個(gè)功能。將業(yè)務(wù)邏輯編碼進(jìn)JavaScript 函數(shù)將導(dǎo)致難以維護(hù)和不可重用的代碼。所以最好在服務(wù)器端執(zhí)行這個(gè)行為。
這個(gè)技術(shù)也可以解決第3.8式中的同一個(gè)問題。但是，這個(gè)動(dòng)作卻沒有依賴于JavaScript 函數(shù)中的數(shù)據(jù)。而是，被onclick時(shí)間句柄調(diào)用的函數(shù)將表單提交到一個(gè)與表單的action屬性中指定的不同的另一個(gè)URL 和Action。這個(gè)替換的URL 將控制定向到專門處理顯示在select控件中的新的選項(xiàng)集的一個(gè)Action。然后這個(gè)Action將控制轉(zhuǎn)發(fā)回原來的JSP 頁面，在其中使用新的值重新組裝下拉列表菜單。
創(chuàng)建一個(gè)單獨(dú)的Action來處理HTML 控件中的值的改變好像有些過分。但是，這里展示的技術(shù)提供了一個(gè)利用了動(dòng)態(tài)HTML背后的服務(wù)器端的全部威力的靈活方案?？紤]一下你要基于同一個(gè)表單中的另一個(gè)字段的輸入值來計(jì)算某個(gè)字段的金融數(shù)據(jù)的情形。執(zhí)行計(jì)算的服務(wù)就應(yīng)該由Action來完成。這里所示的解決方案對(duì)這種情形就很好。
對(duì)于一個(gè)具體的例子，第3.8式所用的方法可以被這里所屬的方法代替。這個(gè)例子提供了一個(gè)輸入表單，從其中用戶可以輸入和選擇其鐘愛的編程語言和IDE。針對(duì)IDE的選項(xiàng)則依賴于編程語言的選擇。Example 3-12 顯示了現(xiàn)實(shí)這個(gè)表單的JSP 頁面（favorite_language2.jsp)。
Example 3-12. 將表單提交到另一個(gè)URL
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
function getOptions(control) {
form = control.form;
form.action = "GetIdeOptions.do?language=";
form.action += control.value;
form.submit( );
}
</script>
</head>
<body>
<html:form action="ViewFavoriteLanguage">
What's your favorite programming language?<br/>
<html:radio property="language" value="Java"
onclick="getOptions(this);"/> Java<br/>
<html:radio property="language" value="C-Sharp"
onclick="getOptions(this);"/> C-Sharp<br/>
<p>What's your favorite development tool?<br/>
IDE:
<html:select property="ide">
<html:optionsCollection property="ides"/>
</html:select>
</p>
<html:submit/>
</html:form>
</body>
</html>
Apache Struts Web Framework-config.xml中的action元素指定了表單所用的URL 路徑。第一個(gè)mapping，/FavoriteLanguage2，指定了轉(zhuǎn)發(fā)到Example 3-12的JSP的action 。第二個(gè)mapping, /GetIdeOptions, 則指定了當(dāng)用戶點(diǎn)擊單選按鈕時(shí)調(diào)用的action。最后一個(gè)mapping, /ViewFavoriteLanguage, 則指定的是按下Submit 按鈕時(shí)處理表單的action。
<action path="/FavoriteLanguage2"
name="MyForm"
scope="session"
type="org.apache.struts.actions.ForwardAction"
parameter="/favorite_language2.jsp"/>
<action path="/GetIdeOptions"
name="MyForm"
scope="session"
type="com.oreilly.strutsckbk.GetIdeOptionsAction">
<forward name="success" path="/FavoriteLanguage2.do"/>
</action>
<action path="/ViewFavoriteLanguage"
name="MyForm"
scope="session"
type="org.apache.struts.actions.ForwardAction"
parameter="/view_favorite_language.jsp"/>
最后是GetIdeOptionsAction本身，示于Example 3-13。
Example 3-13. 處理替代URL 的Action
package com.oreilly.strutsckbk;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.util.LabelValueBean;
public final class GetIdeOptionsAction extends Action {
public ActionForward execute(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
MyForm myForm = (MyForm) form;
String language = myForm.getLanguage( );
ArrayList ides = new ArrayList( );
if (language.equals("Java")) {
ides.add(new LabelValueBean("Net Beans","Net Beans"));
ides.add(new LabelValueBean("Eclipse", "Eclipse"));
ides.add(new LabelValueBean("jEdit", "jEdit"));
}
else if (language.equals("C-Sharp")) {
ides.add(new LabelValueBean("Sharp Develop", "Sharp Develop"));
ides.add(new LabelValueBean("Visual Studio", "Visual Studio"));
}
myForm.setIdes( ides );
// Forward control to the specified success URI
return (mapping.findForward("success"));
}
}
這個(gè)類負(fù)責(zé)從MyForm中獲取選擇的編程語言。然后Action設(shè)置包含對(duì)應(yīng)的IDE名城的集合到表單中。為了簡(jiǎn)化，這個(gè)Action直接創(chuàng)建了集合。在實(shí)際應(yīng)用中，這些值可能來自于業(yè)務(wù)層，也許是來自于一個(gè)數(shù)據(jù)庫。最后，Action返回success forward，又將控制轉(zhuǎn)到初始Action。
|
|
使用這個(gè)技術(shù)的一個(gè)后果是你可能需要將ActionForm定義在session范圍中。這樣可以讓主JSP 頁面在表單被從預(yù)備Action重新提交回原始頁面時(shí)可以反映修改了的數(shù)據(jù)。. | |
對(duì)這個(gè)例子，內(nèi)置的ForwardAction將處理表單，直接將請(qǐng)求轉(zhuǎn)發(fā)至JSP頁面。如果你是使用一個(gè)定制的Action，請(qǐng)考慮擴(kuò)展DispatchAction并且實(shí)現(xiàn)輔助action 為DispatchAction的一個(gè)方法。這種方式將相關(guān)代碼集中在一起，使應(yīng)用更易維護(hù)。
相關(guān)動(dòng)作
第3.8 式提供了另一個(gè)技術(shù)，它使用了動(dòng)態(tài)產(chǎn)生JavaScript 數(shù)組的方式來解決這個(gè)問題。
DispatchAction將在第6.8式講解。