用 Struts 实现动态单选按钮
2005-12-21 23:59
302 查看
Danilo Gurovich , 首席工程师, Earthlink Inc.
2005 年 12 月 05 日
在这篇文章中,我将介绍通过嵌套 Struts 标记
请参阅 下载区 获得完整的示例源代码;如果需要下载 Struts 框架,请参阅 参考资料。
五步诀窍
为了简单起见,我用与上次在动态复选框中使用的相同工作示例来演示单选按钮。我的简单的用户界面使用单选按钮元素来显示喜玛拉雅山顶峰高度的
根据喜玛拉雅这个示例,用 Struts 创建动态选择的单选按钮的诀窍包含五个部分:
一个假数据 类,其中容纳
一个表单 bean,包含单选按钮的
一个带有表单的 JSP,显示处于所需状态的单选按钮。
一个 JSP,显示表单中选中的元素。
一个
单选按钮诀窍和上次学的动态复选框诀窍的主要区别是:Struts 没有提供自动创建
第 1 步. 创建数据层
我做好了一个假的数据类,将来自业务层的数据呈现到应用程序视图层,视图层是我要考虑的事。名为
清单 1. FakeData.java
创建假的数据层是一种有用的用户界面开发实践,因为最终应用程序要使用的持续存储层对于前端开发人员来说,通常是看不到的。所以没有必要等待后台团队把工作完成,可以方便地开发一个假的数据层来模拟最终要发送过来的 API 和功能。使用假数据层,可以进行用户界面开发并降低对其他团队的依赖。有了假数据层,还可以定义到项目其他部分的 API 连接,并确保在集成所有部分的时候问题较少。
第 2 步. 创建表单 bean
最终要填充应用程序的值可能来自比清单 1 所示的框架复杂得多的框架。对于更漂亮的示例,有一个好消息,就是清单 2 中的表单 bean 不必做任何繁重的工作,所以它只是一个带有 getter 和 setter 方法的简单 Java™ 对象。实际的值是在调用构造函数时插入的。
清单 2. RadioTestForm.java
为了清晰起见,我包含了表单 bean 的所有 Java 代码。注意,
第 3 步. 创建单选按钮 JSP
清单 3 包含表单页面的 JSP 代码,表单页面中包含单选按钮和预选的值。请注意 Java 文件和逻辑、HTML、bean 标记与表单底部的 JavaScript 函数之间的关系。我对
清单 3. 包含单选按钮和预选值的 JSP
第 4 步. 创建显示页面
显示页面基本与复选框诀窍中使用的页面相同,区别只是不需要迭代,因为只选中了一个值。需要做的只是列出 bean 中选中的
清单 4. 显示页面的 JSP
第 5 步. 编写 Action 类
正像我在 前一篇文章 提到过的,
清单 5. Action 类
诀窍内部
诀窍背后真正起作用的是 JavaScript。首先,我在清单 5 中,为 JSP 表单内的
在表单下面,我创建了一个 JavaScript 函数,包含以下两行:
在客户端脚本内部,我创建了
替代方法
用如下所示的 JavaScript 方法也能产生同样效果:
这个脚本只区分表单元素的
清单 6. JSP 表单页面的输出
下载
相关信息:Struts 的动态复选框
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"; } |
第 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; } } |
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"/> <!-- creates the radio button list --> <logic:iterate id="mountain" property="mountains" name="testForm"> <%-- you need this hack to get the value of the mountains to the page --%> <bean:define id="mountainValue"> <bean:write name="mountain"/> </bean:define> <html:radio property="selectedMountain" value="<%=mountainValue%>" styleId="<%=mountainValue%>"/> <bean:write name="mountain"/><br/> </logic:iterate><br/> <html:submit/> <html:reset/> <script type="text/javascript"> <!-- //Either of the following works. //Uncomment the one you wish to try and comment the other out. //var selectedRadio = document.getElementById("<bean:write //name="selectedRadio"/>"); var selectedRadio = document.forms["testForm"].elements["<bean:write name="selectedRadio"/>"]; selectedRadio.checked=true; --> </script> </html:form> </body> </html:html> |
显示页面基本与复选框诀窍中使用的页面相同,区别只是不需要迭代,因为只选中了一个值。需要做的只是列出 bean 中选中的
mountain,如清单 4 所示:
清单 4. 显示页面的 JSP
<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%> <%@taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> <%@taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%> <%-- html code, etc... --%> <bean:write name="mountain"/><br/> <hr size=5 color="black"/> <%-- some more html code, etc... --%> |
正像我在 前一篇文章 提到过的,
Action类比起这个诀窍中的其他组件来说,做的工作并不多。在这里要做的仅仅是得到
String数组和
selectedMountain的值,并让显示页面能够使用它们。
清单 5. Action 类
ipackage com.strutsrecipes; 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 javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; /** * The Action for the Radio Button test */ public final class RadioTestAction extends Action { // -------------------------- OTHER METHODS -------------------------- /** * The Action for the Radio Button test */ public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response ) throws ServletException, Exception { // Extract attributes needed String selectedMountains = ((RadioTestForm) form).getSelectedMountain(); System.out.println("htmlString RETURNED*********/n" + selectedMountains); //Save your htmlString in the session HttpSession session = request.getSession(); session.setAttribute(Constants.MOUNTAINS, selectedMountains); return (mapping.findForward("success")); } } |
诀窍背后真正起作用的是 JavaScript。首先,我在清单 5 中,为 JSP 表单内的
selectedMountain字段定义了一个 JSP 脚本变量,如下所示:
<bean:define id="selectedRadio" property="selectedMountains" name="testForm"/> |
var selRadio = document.getElementById("<bean:write name="selectedRadio"/>"); selRadio.checked=true; |
selRadioJavaScript 变量然后对文档内的所有元素进行查找(find),查找
id(或者预编译代码中的
styleId)与
selectedRadio变量匹配的元素。我通过把
<html:radio/>标记的
styleId属性设置成与它的名称/值匹配来做到这点。在 JavaScript 函数迅速地在页面上的 ID 之间迭代的时候,只是把单一单选按钮设置为 selected。
替代方法
用如下所示的 JavaScript 方法也能产生同样效果:
var selectedRadio = document.forms["testForm"].elements["<bean:writename="selectedRadio"/>"]; selectedRadio.checked=true; |
name属性而不是
id属性。两种实现都可以工作,所以具体选择哪一种取决于个人需要和偏好。JSP 表单页面的实际输出看起来像清单 6:
清单 6. JSP 表单页面的输出
<input type="radio" name="selectedMountain" value="Everest" id="Everest"/> Everest<br/> <input type="radio" name="selectedMountain" value="K2" id="K2"/> K2<br/> <input type="radio" name="selectedMountain" value="Kangchenjunga" checked="checked" id="Kangchenjunga"/> Kangchenjunga<br/> <input type="radio" name="selectedMountain" value="Lhotse" id="Lhotse"/> Lhotse<br/> <input type="radio" name="selectedMountain" value="Makalu" id="Makalu"/> Makalu<br/> <input type="radio" name="selectedMountain" value="Cho Oyu" id="Cho Oyu"/> Cho Oyu<br/> |
描述 | 名字 | 大小 | 下载方法 |
---|---|---|---|
Source code | j-sr4code.zip | 5MB | FTP |
相关文章推荐
- 用 Struts 实现动态单选按钮
- 用 Struts 实现动态单选按钮
- Struts 实现动态单选按钮
- 用Struts实现动态单选按钮
- JSP动态选择单选按钮(男或女),通过JSTL实现
- Struts实现多个文件上传(动态添加数量、前台仿163邮箱)
- javascript实现复选框实现单选按钮功能
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
- RadioButton单选按钮实现RadioGroup.OnCheckedChangeListener
- 一步一步地实现菜单栏(JMenuBar)工具栏(JPopupMenu)组合框(JComboBox)复选框(JCheckBox)单选按钮(JRadioButton)文本域的综合应用(二)
- MFC中动态创建多个按钮并实现其消息响应
- Struts结合梅花雪实现动态生成树
- android Button 切换背景,实现动态按钮和按钮颜色渐变
- onload实现动态控制页面按钮
- C# 窗体应用程序 之 单选按钮的实现 源代码
- js jquery分别实现动态的文件上传操作按钮的添加和删除
- EXT2.3.0实现按钮动态改变tooltip
- IOS开发:单选按钮选择实现(存在多个按钮)
- c#的动态按钮数组的添加与功能实现
- 【前端】vue.js实现按钮的动态绑定