用 Struts 实现动态单选按钮
作者:baggio785 的 Blog
Danilo Gurovich , 首席工程师, Earthlink Inc.
2005 年 12 月 05 日
在这篇文章中,我将介绍通过嵌套 Struts 标记 <logic:iterate/> 和 <html:radio/> 创建单选按钮组。然后我用一个特定的表单 bean 指向这个标记并对保存单选按钮值的 String[] 数组进行迭代,把相同的 name 属性分配给每个 value 属性。
请参阅 下载区 获得完整的示例源代码;如果需要下载 Struts 框架,请参阅 参考资料。
五步诀窍
为了简单起见,我用与上次在动态复选框中使用的相同工作示例来演示单选按钮。我的简单的用户界面使用单选按钮元素来显示喜玛拉雅山顶峰高度的 String[] 数组,第二个 selectedMountain String 数组代表选中的单选按钮。在创建了按钮之后,调用一个 JavaScript 函数对单选按钮进行预选。
根据喜玛拉雅这个示例,用 Struts 创建动态选择的单选按钮的诀窍包含五个部分:
一个假数据 类,其中容纳 mountains 和 selectedMountain 数据。
一个表单 bean,包含单选按钮的 String[] 数组和特意选中的按钮的 String。
一个带有表单的 JSP,显示处于所需状态的单选按钮。
一个 JSP,显示表单中选中的元素。
一个 Action 类,从表单页面转到显示页面。
单选按钮诀窍和上次学的动态复选框诀窍的主要区别是:Struts 没有提供自动创建 selected 值的工具,而这通常是创建动态单选按钮所需要的。虽然用内置在 Struts JSP 标记中的功能预先选中 checkbox 和 select 输入类型相当简单,但是 radio button 输入类型要求不同的解决方案。幸运的是,使用来自表单 bean 的信息和几行 JavaScript 代码就可以实现这个要求,如第 3 步所示。
第 1 步. 创建数据层
我做好了一个假的数据类,将来自业务层的数据呈现到应用程序视图层,视图层是我要考虑的事。名为 FakeData 的类包含两个静态方法,如清单 1 所示:
清单 1. FakeData.java
/**
* class FakeData -- represents the business logic
*/
public class FakeData {
/**
* data for mountains
*/
public static final String[] MOUNTAINS =
{"Everest", "K2", "Kangchenjunga",
"Lhotse", "Makalu", "Cho Oyu"};
/**
* data for selected mountain
*/
public static final String SELECTED_MOUNTAIN = "Kangchenjunga";
}
创建假的数据层是一种有用的用户界面开发实践,因为最终应用程序要使用的持续存储层对于前端开发人员来说,通常是看不到的。所以没有必要等待后台团队把工作完成,可以方便地开发一个假的数据层来模拟最终要发送过来的 API 和功能。使用假数据层,可以进行用户界面开发并降低对其他团队的依赖。有了假数据层,还可以定义到项目其他部分的 API 连接,并确保在集成所有部分的时候问题较少。
第 2 步. 创建表单 bean
最终要填充应用程序的值可能来自比清单 1 所示的框架复杂得多的框架。对于更漂亮的示例,有一个好消息,就是清单 2 中的表单 bean 不必做任何繁重的工作,所以它只是一个带有 getter 和 setter 方法的简单 Java? 对象。实际的值是在调用构造函数时插入的。
清单 2. RadioTestForm.java
package com.strutsrecipes;
import org.apache.struts.action.ActionForm;
/**
* Radio Button Test Form to show an array of radio buttons and
*/
public class RadioTestForm extends ActionForm {
// ------------------------------ FIELDS ------------------------------
/**
* The selected Mountain
*/
private String selectedMountain;
/**
* The list of mountains for the radio button
*/
private String[] mountains;
// --------------------------- CONSTRUCTORS ---------------------------
/**
* Constructor -- using FakeData...
*/
public RadioTestForm() {
this.selectedMountain = FakeData.SELECTED_MOUNTAIN;
this.mountains = FakeData.MOUNTAINS;
}
// --------------------- GETTER / SETTER METHODS ---------------------
/**
* Getter for the mountains
*
* @return the mountains array
*/
public String[] getMountains() {
return this.mountains;
}
/**
* Setter for the mountains
*
* @param m the Mountains array
*/
public void setMountains(String[] m) {
this.mountains = m;
}
/**
* Getter for selectedMountain
*
* @return the selected mountain
*/
public String getSelectedMountain() {
return this.selectedMountain;
}
/**
* Setter for selectedMountain
*
* @param sm the selectedMountain
*/
public void setSelectedMountain(String sm) {
this.selectedMountain = sm;
}
}
为了清晰起见,我包含了表单 bean 的所有 Java 代码。注意,Kangchenjunga 同时列出在 selectedMountain 和 mountains 字段中,在构造函数中实例化,并用 FakeData 类来填充。现在,我已经有了足够的信息,可以把 Kangchenjunga 传递到 JSP,作为 preselected 的初始值。
第 3 步. 创建单选按钮 JSP
清单 3 包含表单页面的 JSP 代码,表单页面中包含单选按钮和预选的值。请注意 Java 文件和逻辑、HTML、bean 标记与表单底部的 JavaScript 函数之间的关系。我对 mountains 集合进行迭代,以创建单选按钮。这个工作完成之后,我添加 JavaScript 并将 selectedMountain 的值填充到其中,并与单选按钮数组进行比较,以选择正确的按钮。
清单 3. 包含单选按钮和预选值的 JSP
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<html:html locale="true">
<head>
<title><bean:message key="testForm.title"/></title>
<html:base/>
</head>
<body>
<h3><bean:message key="testForm.heading"/></h3>
<html:form action="/FormAction" name="testForm"
type="com.strutsrecipes.RadioTestForm">
<h4><bean:message key="testForm.instruction"/></h4>
<!-- gets the selected radio button -->
<bean:define id="selectedRadio" property="selectedMountain" name="testForm"/>
&nbs (本文已被浏览 次) | | |