户界面设计中,复选框组不如它的同类 —— 多行选择框那样流行。它们基本上做的是同一件事,即选择映射到单一
name 属性的一组选项。当在组中使用时,复选框执行的功能实际与多行选择框一样,但是它们占据的屏幕空间更多。当希望用户在选择一个或多个选项之前能够看到所有选项的时候,这会很有好处。
虽然在选项不多的时候,多行选择框通常提供更好的观感,但是当选择框必须动态呈现而且包含预选功能时,对企业应用程序来说复选框组会是更好的选择。幸运的是,使用 Struts 框架可以很容易地创建动态复选框组。
在这篇文章中,我将介绍一个简单的诀窍:用 Struts 的 <html:multibox/>
和 <logic:iterate/>
标记在应用程序的视图层呈现大量条目,在本例中是 Java™ Server Page(JSP)。
我先从使用复选框元素显示简单的 String[]
数组开始,数组中包含喜玛拉雅山的顶峰高度。然后,我将创建另外一个 String[]
数组,包含 selectedMountains
,代表已经选中的复选框。复选框的预选情况会在两个数组的交叉中产生。如果 selectedMountains
的初始数组为空,那么所有复选框最初都会显示为未选中。
请参阅 下载 获得完整的示例源代码。应当拥有跟随本文所需要的每样东西。如果需要下载 Struts 框架,请参阅 参考资料。
创建动态复选框
创建动态复选框的诀窍包含三个主要部分:
- 一个表单 bean,容纳复选框的
String[]
数组和表示选中复选框的 String[]
数组。
- 一个 JSP,带有一个表单,在需要的时候显示复选框。
- 一个简单的
Action
类,从表单页面转到显示页面。
请注意 “Himalayas” 示例非常简单。用来填充复选框的字段应当来自更复杂的模型,比如这样的模型,它能够标识用户,并选择要显示的字段,然后把业务对象认为需要的选项预先选中。我采用简单的模型是为了更好地演示 Struts 的用户界面功能。代码示例使用 JSP 脚本语言是为了表示清楚。
第 1 步. 创建表单 bean
我先从创建 Struts 表单 bean 开始,它包含填充复选框所需要的信息。请注意清单 1 中的 TestForm.java 包含了两个示例 String[]
数组变量的 getter 和 setter。数组 mountains
代表示例复选框的 全部选项,数组 selectedMountains
代表预选的在浏览器中显示为选中的元素。
除了代表初始选中的复选框,selectedMountains
还代表处理表单时,由用户选中的复选框。(它只代表最终选中的元素。)当请求页面时,会显示复选框。当我在它们之间迭代时,与 selectedMountains
匹配的复选框元素就是选中的元素。
清单 1 显示了 TestForm.java 的完整代码:
清单 1. TestForm.java
package com.strutsrecipes;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
public final class CheckboxTestForm
extends ActionForm {
// Instance Variables
/*Mountains "pre-selected"...*/
private String[]
selectedMountains
=
{"Everest","K2","Lhotse"};
/*the ten tallest Mountains to iterate through*/
private String[]
mountains
=
{"Everest","K2","Kangchenjunga","Lhotse",
"Makalu","Kangchenjunga South",
"Lhotse Middle","Kangchenjunga West",
"Lhotse Shar","Cho Oyu"};
/*Getter for selectedMountains*/
public String[] getSelectedMountains() {
return this.selectedMountains;
}
/*Setter for selectedMountains*/
public void setSelectedMountains(String[] selectedMountains) {
this.selectedMountains = selectedMountains;
}
/*Getter for the mountains*/
public String[] getMountains() {
return this.mountains;
}
/*Setter for the mountains*/
public void setMountains(String[] mountains) {
this.mountains = mountains;
}
}
|
|
|
第 2 步. 编写 JSP 代码
接下来,我要编写页面的 JSP 代码,把 TestForm.java 的信息传递给视图层。在编写这个代码时,关键是要把对应的 Struts 标记库导入 JSP。清单 2 的 JSP 代码表示的是一个简单的表单,显示复选框中相应的框已经选中:
清单 2. 带有表单的 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... -->
<html:form
action="/FormAction"
name="testForm"
type="com.strutsrecipes.CheckboxTestForm">
<h4><bean:message key="testForm.instruction"/></h4>
<logic:iterate name="testForm"
property="mountains"
id="mountain">
<%-- create the checkbox and selected attribute -->
<html:multibox property="selectedMountains">
<bean:write name="mountain"/>
</html:multibox>
<%-- create the label, note that "br" tag will format it vertically -->
<bean:write name="mountain"/><br/>
</logic:iterate>
<br/>
<html:submit/><html:reset/>
</html:form>
<%-- some more html code, etc... -->
|
注意,我用 Struts <bean:message/>
标记表示文本,用 <html:multibox/>
表示 HTML 复选框,用 <logic:iterate/>
标记在数组中迭代并创建相应内容。我的表单在 JSP 中通过 <html:form/>
标记被实例化。
下一步是对 <logic:iterate/>
标记中的 mountains
字段进行迭代。在这么做的时候,我创建了一个变量(mountain
),用它来填充复选框,并用 <bean:write/>
标记给它一个标签。要在复选框中创建 selected
属性,我要再次使用 <logic:iterate/>
和 <html:multibox/>
标记。<html:multibox/>
标记中的 property
属性由 selectedMountains
字段填充。当 selectedMountains
等于 mountain
时,selectBox
就是选中的。
第 3 步. 编写 Action 类
最后一步是编写 Action
类。清单 3 比起其他清单,做的事并不多。我做的只是得到 selectedMountains
的 String[]
数组,并使它可以用于页面:
清单 3. 表单的 Action
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;
/**
* A simple Action for Checkbox test.
*
* @author Danilo Gurovich
*/
public final class CheckboxTestAction
extends Action {
// -------------------------- OTHER METHODS --------------------------
/**
* The execute method
*
* @param mapping ActionMapping
* @param form CheckboxTestForm
* @param request HttpServletRequest
* @param response HttpServletRespons
* @return success to the confirmation page
* @throws ServletException not thrown, but could be!
* @throws Exception ditto.
*/
public ActionForward execute(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, Exception {
// Extract attributes needed
String[] selectedMountains =
((CheckboxTestForm) form).getSelectedMountains()
;
System.out.println("htmlString RETURNED*\n" +
selectedMountains.toString());
//Save the htmlString in the session for later...
HttpSession session = request.getSession();
session.setAttribute(CheckboxConstants.MOUNTAINS, selectedMountains);
return (mapping.findForward("success"));
}
}
|
|
|
扩充 Himalayas
有了这个代码,工作就完成了,差不多可以展示成果了!用户现在可以提交 JSP 表单并在 Action
类引用的对应页面中查看结果。清单 4 中的代码段显示了用户在简单 JSP 页面的表单中选中的复选框列表:
清单 4. 复选框选择的结果
<%@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... -->
<logic:iterate id="mountain" property="mountains" name="testForm">
<bean:write name="mountain"/><br/>
</logic:iterate>
<hr size=5 color="black"/>
<%-- some more html code, etc... -->
|
这个诀窍的工作方式
这个诀窍的关键是表单 bean 中的字段被传递到页面。查看相关 JSP 代码有助于澄清这点。一旦表单 bean 被实例化:
<html:form action="/FormAction"
name="testForm"
type=" com.strutsrecipes.CheckboxTestForm">
|
下一步为 Java 类的 mountains
变量中的每个 mountain
创建一个复选框。要做到这一点,我必须像下面这样在 String[]
数组中迭代:
<logic:iterate id="mountain"
property="mountains"
name="testForm">
|
使用 <logic:iterate>
标记,我调用了 testForm
bean 中的 getMountains()
方法。它在这个数组中迭代,并把每个值作为已经命名的 pageContext()
级的 String mountain[]
数组变量返回(即 id="mountain"
)。
在这里可以看到 <html:multibox/>
标记的效果以及如何显示它:
<html:multibox property="selectedMountains">
<bean:write name="mountain"/>
</html:multibox>
<bean:write name="mountain"/><br/>
|
注意 property
属性被 selectedMountains
填充,这是我选中的变量。当这个变量与 <html:multibox/>
值(即 multibox 标记中的 <bean:write/>
)对应时,在呈现表单的时候它就表现为选中。如果用户选中表单或取消选中,那么新的 selectedMountains
值就被发送给 Action
类进行处理。这个迭代中的第二个 <bean:write/>
标记创建该标记使用的标签,后面跟着 <br/>
标记,让视图在一长列中显示这些标记。
扩展这个诀窍
通过使用 Struts LabelValueBean
类代替简单的 String[]
数组,可以对动态复选框这个诀窍进行扩展,从而为复选框创建不同的标签。先从添加 LabelValueBeans
到 java.util.List
开始。然后对列表进行迭代,把 LabelValueBeans
标签和值释放到适当的位置。这个略微复杂的诀窍与动态复选框诀窍的效果相同,但是它的结果更适合实际的用户界面设计。清单 5 显示了扩展的动态复选框诀窍:
清单 5. 添加标签到动态复选框
<logic:iterate id="mountainlb"
property="mountainslb"
name="testForm">
<bean:define id="mountainbean"
name="mountainlb
"type="org.apache.struts.util.LabelValueBean"/>
<html:multibox property="selectedMountains">
<bean:write name="mountainbean"
property="value"/>
</html:multibox>
<bean:write name="mountainbean"
property="label"/><br/>
</logic:iterate>
|
注意,这里大的变化是用 <bean:define/>
在迭代的时候创建 LabelValueBean
。然后用 <bean:write/>
输出每个 mountainbean
的属性(即 org.apache.struts.util.LabelValueBean
类的 getLabel()
和 getValue()
方法)。
结束语
Struts 对于复选框的动态呈现和预选提供了优秀的支持。这个诀窍是我合著 Struts Recipes 的原因 —— 那时我已经发现许多与 Struts 框架相关的理论和服务器端信息,但是用户界面编程多数被忽略了,或者被掩盖了。在上上下下找了一圈使用 Struts 创建复选框的诀窍之后,我放弃了,并自己写了一个。通过把不同的部分组合起来,我可以创建适合我的动态复选框系统。
您会注意到,代码示例被设置为适合用作不同用户界面小控件和布局想法的测试温床。实际上,我在书中的大多数用户界面示例中都使用了它,只需要调整 Action
类和我的模型去适合诀窍的需求而已。我还把它用在测试不同的想法上,这样就不用在我正在处理的应用程序内部花太多时间为某些东西编码了。
分享到:
相关推荐
在Struts框架中,处理动态复选框和单选框是一项常见的任务,特别是在表单提交和数据处理时。下面我们将深入探讨这个主题。 ### 动态复选框和单选框 在Web界面设计中,复选框和单选框是用户交互的重要元素,允许...
在这个场景中,我们关注的是`s:iterator`标签和`s:checkbox`的使用,它们是Struts 2 中视图层(JSP)的重要组件,用于迭代数据集合并呈现复选框。在Web应用中,用户经常需要进行全选和反选的操作,这通常在管理多个...
- 动态构建角色复选框,并通过循环判断当前用户是否已拥有某个角色,若已拥有则将对应复选框设置为选中状态。 - 点击保存按钮时,收集所有被选中的角色ID,并通过Ajax发送保存请求。 #### 三、复选框的Ajax提交 在...
此外,你还可以通过JavaScript或者jQuery来控制复选框的选中状态,但这通常是在用户交互时动态改变的,而不是页面加载时的初始状态。如果你想要在页面加载时就改变复选框的状态,那么主要的操作应该在后端Java代码中...
全选功能通常通过添加一个特殊的复选框实现,当用户勾选这个全选复选框时,所有子项复选框都会被自动勾选。这通常通过JavaScript或者jQuery实现,通过事件监听和DOM操作来同步全选状态。 接着,描述中提到了`...
道具Struts类型必需的默认描述checked 布尔不不明确的复选框是否被选中className 细绳不不明确的要添加的其他className disabled 布尔不错误的复选框是否被禁用id 细绳不uuidv1() 要添加到标签和复选框的ID label ...
这个项目的核心目标是构建一个可复选的权限树形结构,用户通过勾选节点来赋予或管理角色的权限。 **ZTree** 是一个基于JavaScript的树形插件,常用于网站的目录展示、导航菜单等场景。在本项目中,ZTree被用来创建...
在这个场景中,问题的核心是如何在dtree中设置部分节点的复选框为默认选中状态。这通常涉及到从后端获取数据并根据这些数据来动态设置前端树状结构的显示。 首先,我们要理解dtree中的复选框功能。复选框是dtree的...
本篇文章主要探讨了如何在Struts2框架下处理复选框(Checkbox)的交互,特别是关于复选框选中状态的传递与后台数据的处理。 首先,复选框在网页中通常用于让用户选择多个选项,其HTML元素 `...
在使用struts标签html:checkbox 的时候,如何让checkbox框默认是选中的,一般情况下都是当Formbean里面该Property的值和标签上value给定的值相等的时候,生成的jsp页面上才是选中的。 在Struts中几种情况可以使标签...
Struts2的标签是用于创建复选框元素的关键组件。这个标签不仅提供了基础的HTML复选框功能,还支持Struts2特有的属性,如`value`、`name`等,这些属性可以帮助开发者更好地管理和处理表单数据。例如,在给定的内容中...
在这个特定的场景中,我们需要实现一个功能,即在用户尝试删除数据前,判断他们是否至少选中了一个复选框(checkbox)。这通常发生在有多个记录需要操作时,如批量删除。 首先,我们来看一下提供的 jQuery 代码片段...
例如,如果你的表单需要根据数据库中的数据动态生成复选框,那么你需要先从数据库查询这些数据,然后在JSP页面上使用`<s:checkboxlist>`或者`<s:checkbox>`标签将它们渲染出来。 在实际使用中,`<s:checkbox>`标签...
在Struts2中,处理用户输入是常见的任务,而`checkboxlist`是用于展示一组可选复选框的组件。这篇博客讨论的是如何在Struts2中处理`checkboxlist`的换行问题,这在创建多列或美观的表单布局时非常有用。 `checkbox...
在Struts中,html标签库提供了丰富的HTML表单元素,包括htmlcheckbox标签,用于创建复选框。 ### Struts的htmlcheckbox标签 htmlcheckbox标签是Struts标签库中的一个成员,用于生成HTML表单中的复选框元素。它的...
- **`<s:checkbox>`**:用于创建复选框。 - **`<s:password>`**:用于创建密码输入框。 --- #### 四、处理一个form多个submit 当表单中有多个提交按钮时,可以通过为每个按钮设置不同的name属性值,然后在Action...
在这个“Struts2 实现部门员工管理”的项目中,我们将深入探讨如何使用Struts2来处理部门和员工的数据,以及涉及到的各种UI组件如复选框、单选按钮、下拉框、密码框和文本域。 首先,我们来看核心概念——MVC架构。...