Struts秘籍之第2段：第3.8式：使用JavaScript动态改变选择项

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 >

 

动作变化

你可以使用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;
}

 

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 >

 

茜套在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 >

 

JavaScript 变成可能非常令人受挫，特别是那些熟悉强类型和编译时检查的开发人员。但是使用这种客户端动态交互，确实可以改善用户体验特征。

所以， AXAJ如今正在热门，并结合到很多传统技术之上。

相关动作

如果需要业务逻辑来决定动态数据，可参考下一个动作的方法，兴许更好些。