Struts秘籍之第2段：第3.8式：使用JavaScript动态改变选择项
第3.8式. 使用JavaScript动态改变选择项
问题
你希望使用JavaScript 来根据从应用模型中获得的数据来动态设置显示在一个HTML select元素中的条目。
动作要领
使用Struts logic:iterate标签来为不同的选项集创建JavaScript 数组。然后使用JavaScript 的onchange事件句柄来在运行时修改options集。Example 3-8就展示了一个完整的JSP ，在其中JavaScript 数组是使用Struts 标签动态创建的。changeOptions事件句柄函数使用JavaScript数组重设了select控件的选项.
Example 3-8. 使用Struts产生DHTML
<% @ 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" %>
<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
// 为第一组选项创建一个数组
fooArray = new Array( );
<logic:iterate id="fooValue" indexId="ctr"
name="MyForm" property="fooList">
fooArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='fooValue'/>",
"<bean:write name='fooValue'/>",
false, false);
</logic:iterate>
// 为第二组选项创建数组
barArray = new Array( );
<logic:iterate id="barValue" indexId="ctr"
name="MyForm" property="barList">
fooArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='barValue'/>",
"<bean:write name='barValue'/>",
false, false);
</logic:iterate>
function changeOptions(var control) {
// control 是触发的控件
// baz 是select 控件
baz = document.MyForm.baz;
baz.options.length=0;
if (control.value == 'Foo')
bazArray = fooArray;
else
bazArray = barArray;
for (i=0; i < bazArray.length; i++)
baz.options[i] = bazArray[i];
}
</script>
</head>
<body>
<html:form name="MyForm" action="processMyForm">
<html:radio property="fooBar" value="Foo"
onclick="changeOptions(this);"/> Foo<br/>
<html:radio property="fooBar" value="Bar"
onclick="changeOptions(this);"/> Bar<br/>
Baz: <html:select property="baz">
</html:select>
</html:form>
</body>
</html>
<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
// 为第一组选项创建一个数组
fooArray = new Array( );
<logic:iterate id="fooValue" indexId="ctr"
name="MyForm" property="fooList">
fooArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='fooValue'/>",
"<bean:write name='fooValue'/>",
false, false);
</logic:iterate>
// 为第二组选项创建数组
barArray = new Array( );
<logic:iterate id="barValue" indexId="ctr"
name="MyForm" property="barList">
fooArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='barValue'/>",
"<bean:write name='barValue'/>",
false, false);
</logic:iterate>
function changeOptions(var control) {
// control 是触发的控件
// baz 是select 控件
baz = document.MyForm.baz;
baz.options.length=0;
if (control.value == 'Foo')
bazArray = fooArray;
else
bazArray = barArray;
for (i=0; i < bazArray.length; i++)
baz.options[i] = bazArray[i];
}
</script>
</head>
<body>
<html:form name="MyForm" action="processMyForm">
<html:radio property="fooBar" value="Foo"
onclick="changeOptions(this);"/> Foo<br/>
<html:radio property="fooBar" value="Bar"
onclick="changeOptions(this);"/> Bar<br/>
Baz: <html:select property="baz">
</html:select>
</html:form>
</body>
</html>
动作变化
你可以使用Struts 来产生JavaScript，就像用它生成HTML一样。某些开发人员认为JavaScript 简直是"恶魔"；实际上，它只是稍微有那么一点坏而已。考虑这个编程原则：如果JavaScript 能使你的应用更好而且用户喜欢，那就用它。但是用它的原则是，仍然将你的应用逻辑保留在你的业务层，而不是放在页面中。Struts 对此有帮助。
用一个具体的例子可以说明这个原则。假定你想要一个用户选择他喜欢的编程语言，并且，据此选择他喜欢的IDE。语言可以通过使用单选按钮来选择，而IDE 将通过下拉列表来选择。如果语言是Java, 那么IDE 下拉列表将显示诸如Eclipse, Net Beans, IDEA, 等等。而如果语言是C#, 则下拉列表显示Visual Studio 和SharpDevelop。
Example 3-9 展示了持有这些数据的action form。
Example 3-9. ActionForm for favorite language/IDE
package com.oreilly.strutsckbk;
import org.apache.struts.action.ActionForm;
public final class MyForm extends ActionForm {
private static String[] javaIdes =
new String[] {"Eclipse", "IDEA", "JBuilder",
"JDeveloper", "NetBeans"};
private static String[] csharpIdes =
new String[] {"SharpDevelop", "Visual Studio"};
public String[] getJavaIdes( ) {return javaIdes;}
public String[] getCsharpIdes( ) {return csharpIdes;}
public String getLanguage( ) {
return language;
}
public void setLanguage(String language) {
this.language = language;
}
public String getIde( ) {
return ide;
}
public void setIde(String ide) {
this.ide = ide;
}
private String language;
private String ide;
}
import org.apache.struts.action.ActionForm;
public final class MyForm extends ActionForm {
private static String[] javaIdes =
new String[] {"Eclipse", "IDEA", "JBuilder",
"JDeveloper", "NetBeans"};
private static String[] csharpIdes =
new String[] {"SharpDevelop", "Visual Studio"};
public String[] getJavaIdes( ) {return javaIdes;}
public String[] getCsharpIdes( ) {return csharpIdes;}
public String getLanguage( ) {
return language;
}
public void setLanguage(String language) {
this.language = language;
}
public String getIde( ) {
return ide;
}
public void setIde(String ide) {
this.ide = ide;
}
private String language;
private String ide;
}
Example 3-10 则列出了渲染输入页面的JSP (favorite_language.jsp) 。这个例子和基本动作中的例子有些相似。
Example 3-10. JSP Page using Apache Struts Web Framework-rendered DTHML
<% @ 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" %>
<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
// 为第一组选项创建数组
javaIdesArray = new Array( );
<logic:iterate id="ide" indexId="ctr"
name="MyForm" property="javaIdes">
javaIdesArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='ide'/>",
"<bean:write name='ide'/>",
false, false);
</logic:iterate>
// 为第二组选项创建数组
csharpIdesArray = new Array( );
<logic:iterate id="ide" indexId="ctr"
name="MyForm" property="csharpIdes">
csharpIdesArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='ide'/>",
"<bean:write name='ide'/>",
false, false);
</logic:iterate>
function changeOptions(control) {
ideControl = document.MyForm.ide;
ideControl.options.length=0;
if (control.value == 'Java')
ideArray = javaIdesArray;
else
ideArray = csharpIdesArray;
for (i=0; i < ideArray.length; i++)
ideControl.options[i] = ideArray[i];
}
</script>
</head>
<body>
<html:form action="/admin/ViewFavoriteLanguage">
What's your favorite programming language?<br/>
<html:radio property="language" value="Java"
onclick="changeOptions(this);"/> Java<br/>
<html:radio property="language" value="C-Sharp"
onclick="changeOptions(this);"/> C-Sharp<br/>
<p>What's your favorite development tool?<br/>
IDE: <html:select property="ide"/>
</p>
<html:submit/>
</html:form>
</body>
</html>
<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head>
<title>Apache Struts Web Framework - JavaScript Example</title>
<script language="JavaScript">
// 为第一组选项创建数组
javaIdesArray = new Array( );
<logic:iterate id="ide" indexId="ctr"
name="MyForm" property="javaIdes">
javaIdesArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='ide'/>",
"<bean:write name='ide'/>",
false, false);
</logic:iterate>
// 为第二组选项创建数组
csharpIdesArray = new Array( );
<logic:iterate id="ide" indexId="ctr"
name="MyForm" property="csharpIdes">
csharpIdesArray[<bean:write name="ctr"/>] =
new Option("<bean:write name='ide'/>",
"<bean:write name='ide'/>",
false, false);
</logic:iterate>
function changeOptions(control) {
ideControl = document.MyForm.ide;
ideControl.options.length=0;
if (control.value == 'Java')
ideArray = javaIdesArray;
else
ideArray = csharpIdesArray;
for (i=0; i < ideArray.length; i++)
ideControl.options[i] = ideArray[i];
}
</script>
</head>
<body>
<html:form action="/admin/ViewFavoriteLanguage">
What's your favorite programming language?<br/>
<html:radio property="language" value="Java"
onclick="changeOptions(this);"/> Java<br/>
<html:radio property="language" value="C-Sharp"
onclick="changeOptions(this);"/> C-Sharp<br/>
<p>What's your favorite development tool?<br/>
IDE: <html:select property="ide"/>
</p>
<html:submit/>
</html:form>
</body>
</html>
茜套在head元素中的script块包含了JavaScript。logic:iterate标签遍历JavaBean 属性以创建两个JavaScript 数组：一个针对IDE，另一个针对C# IDE。每一个数组都包含一组Option的JavaScript 对象。一个Option对象表示HTML select控件中的一个选项。这些对象在其构造器重使用了四个参数：用来现实的text 值，表单提交时传递的值，指示该值是否是默认值的一个Boolean值，以及指示其是否是当前选择的Boolean值。
用于修改选项的JavaScript 函数紧跟logic:iterate循环。这个函数是个纯粹的静态JavaScript。触发修改的单选按钮是作为参数传递给这个函数的。如果单选按钮的当前值是那么e select控件则根据表达Java IDE的Option对象组装。否则，控件使用表达C# IDE的Option对象组装。
HTML body 则包含表单，使用Struts html标签来渲染。Struts 标签通过on函数属性来支持JavaScript 的改变监听器。对 radio 按钮来说，onclick监听器可正常工作。传递给这个函数的唯一参数是对HTML radio button的引用。当页面被第一次渲染时，看起来应该是这样：
Figure 3-1. Form using DHTML and Apache Struts Web Framework
一旦你点击一个单选按钮，下拉列表中的选项便会根据来自form bean中的数据动态组装。下图显示了点击Java radio button的显示结果：
Figure 3-2. Dynamically rendered drop-down menu
类似的，如果你点击C-Sharp radio button，下来列表中的选项也会变化以反映对应的JavaScript 数组中的值。
JSTL 其实也可以用于上述地方代替Struts bean和logic标签。比如，使用JSTL c:forEach和c:out来代替logic:iterate和bean:write。这些标签可以产生相同的效果。
javaIdesArray = new Array( );
<c:forEach var="ide" varStatus="status"
items="${MyForm.javaIdes}">
javaIdesArray[<c:out value="${status.index}"/>] =
new Option("<c:out value='${ide}'/>",
"<c:out value='${ide}'/>",
false, false);
</c:forEach>
<c:forEach var="ide" varStatus="status"
items="${MyForm.javaIdes}">
javaIdesArray[<c:out value="${status.index}"/>] =
new Option("<c:out value='${ide}'/>",
"<c:out value='${ide}'/>",
false, false);
</c:forEach>
JavaScript 变成可能非常令人受挫，特别是那些熟悉强类型和编译时检查的开发人员。但是使用这种客户端动态交互，确实可以改善用户体验特征。
所以， AXAJ如今正在热门，并结合到很多传统技术之上。
相关动作
如果需要业务逻辑来决定动态数据，可参考下一个动作的方法，兴许更好些。
原文链接： http://www.dlog.cn/nicholascoder/diary/8949