dev2dev 首页 > 资源中心 > 技术文章
深入Beehive标签库系列教程(3) - 表单标签：单选框
当收集的数据需要用户在几种可能中确定其中之一时，我们选择使用单选框向用户显示数据，netui: radioButtonGroup和netui: radioButtonOption两个标签联合工作能够完成单选框的显示。 netui: radioButtonGroup标签用于声明单选框组，位于同一组中的单选内容组成同一组可选择的内容，用户只能在这些内容中选择其中之一，它的dataSource可以用于设置单选框的默认选择项。 netui: radioButtonOption标签用于提供单选框组的可选择项，它的value属性用于设置选择项对应的值，<netui: radioButtonOption>和</netui: radioButtonOption>之间的内容将显示给用户。 我们可以在JSP中增加下面的代码，完成一个单选框组的显示。
- <netui:radioButtonGroup dataSource=“data”>
- <netui:radioButtonOption value=“1”>
- Text 1
- </netui:radioButtonOption><br>
- <netui:radioButtonOption value=“2”>
- Text 2
- </netui:radioButtonOption><br>
- <netui:radioButtonOption value=“3”>
- Text 3
- </netui:radioButtonOption><br>
- </netui:radioButtonGroup>
有些情况下，单选框的选项并不是固定的，而是不断变化的，这种情况下如果使用上面的处理方法，我们就需要在JSP页面中使用循环来完成显示。值得庆幸的是，netui: radioButtonGroup标签提供了另外一种简单的形成单选框组的简单方法----使用optionsDataSource属性，optionsDataSource属性可以支持绑定到数组、Hashtable或者是List类型的变量上， netui: radioButtonGroup标签输出的时候将自动根据绑定的对象内容生成可选择项，使用这种方式可以减少netui:radioButtonOption标签的应用，增加页面显示的灵活性。 optionsDataSource属性同时支持绑定到数组、Hashtable或者是List类型的变量上，不过不同的选择会让netui: radioButtonGroup的行为有些差异。
- 选择绑定到数组时，生成的选择项的value属性和要显示的内容是一致的，都是数组项的值。
比如我们选择将netui: radioButtonGroup标签的optionsDataSource属性绑定到String[] colors = new String[] {"text1", "text2", "text3"};这样一个数组时，生成的对应的主要HTML内容如下。
- <input type="radio" value="text1"><span>text1</span><br>
- <input type="radio" value="text2" checked><span>text2</span><br>
- <input type="radio" value="text3"><span>text3</span><br>
- 选择绑定到List类型变量时，通常生成的选择项的value属性和要显示的内容是一致的，都是List中对象的toString方法返回的内容。
比如我们选择将netui: radioButtonGroup标签的optionsDataSource属性绑定到一个List对象，并且使用下面的代码初始化这个对象。
ArrayList list = new ArrayList(); list.add("text1"); list.add("text2"); list.add("text3"); netui: radioButtonGroup标签对应生成的主要HTML内容如下。 <input type="radio" value="text1"><span>text1</span><br> <input type="radio" value="text2" checked><span>text2</span><br> <input type="radio" value="text3"><span>text3</span><br>
- 选择绑定到Hashtable类型变量时，生成的选择项的value属性内容对应Hashtable中对象的key，而要显示的内容对应Hashtable中对象的value。
比如我们选择将netui: radioButtonGroup标签的optionsDataSource属性绑定到一个Hashtable对象，并且使用下面的代码初始化这个对象。 Hashtable h = new Hashtable(); h.put("1","text1"); h.put("2","text2"); h.put("3","text3"); netui: radioButtonGroup标签对应生成的主要HTML内容如下。 <input type="radio" value="3"><span>text3</span><br> <input type="radio" value="2"><span>text2</span><br> <input type="radio" value="1"><span>text1</span><br>
下面我们以数组为例，学习如何使用数组来完成netui: radioButtonGroup标签的初始化。首先我们定义一个数组，这个数组中包含了单选框的所有选择项”text1”、”text2”、”text3”，调用request的setAttribute方法将这个数组加入到request中，然后将netui: radioButtonGroup标签的optionsDataSource属性设置为这个数组。下面的代码显示了如何使用数组来初始化netui:radioButtonGroup标签。
- <%
- request.setAttribute("color", "text2");
- String[] colors = new String[] {"text1", "text2", "text3"};
- request.setAttribute("colors1", colors);
- %>
- <netui:radioButtonGroup dataSource="color"
- optionsDataSource="${colors1}" />
上面的例子中我们直接在JSP中加入了Scriptlet，这不是我们推荐的方式，这样做的原因是仅仅是因为我们还没有学习页面流中如何在Action和JSP之间传递数据。这部分内容将在《第四章 应用页面流开发Web应用》中学习。
netui:radioButtonGroup标签使用时，设置optionsDataSource和dataSource属性的写法是有差异的，上面的例子中（第7行）optionsDataSource的属性被设置为${colors1}，表示这是一个JSP的隐含变量，而dataSource的属性直接设置为color（第6行），不需要使用${}来包含。
如何使用Hashtable和List类型变量初始化netui:radioButtonGroup标签的用法请参见清单1。
清单1 web\inputRadioExamples.jsp
- <%@ page language="java" contentType="text/html;charset=gb2312"%>
- <%@ page import="java.util.Hashtable" %>
- <%@ page import="java.util.ArrayList" %>
- <%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
- prefix="netui-data"%>
- <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
- prefix="netui"%>
- <%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"
- prefix="netui-template"%>
- <netui:html>
- <head>
- <title>Form Examples</title>
- <netui:base/>
- </head>
- <netui:body>
- <center>使用标签显示表单的例子</center><BR>
- <netui:form action="begin">
- 单选框的例子:<BR>
- <netui:radioButtonGroup dataSource="data">
- <netui:radioButtonOption value="1">
- Text 1
- </netui:radioButtonOption>
- <netui:radioButtonOption value="2">
- Text 2
- </netui:radioButtonOption>
- <netui:radioButtonOption value="3">
- Text 3
- </netui:radioButtonOption>
- </netui:radioButtonGroup><BR>
-
- 单选框的另外一个例子--使用数组初始化标签:<BR>
- <%
- request.setAttribute("color", "text2");
- String[] colors = new String[] {"text1", "text2", "text3"};
- request.setAttribute("colors1", colors);
- %>
- <netui:radioButtonGroup dataSource="color"
- optionsDataSource="${colors1}" />
-
- 单选框的另外一个例子--使用Hashtable初始化标签:
- <%
- Hashtable h = new Hashtable();
- h.put("1","text1");
- h.put("2","text2");
- h.put("3","text3");
- request.setAttribute("colors2", h);
- %>
- <netui:radioButtonGroup dataSource="color"
- optionsDataSource="${colors2}" />
-
- 单选框的另外一个例子--使用ArrayList初始化标签:
- <%
- ArrayList list = new ArrayList();
- list.add("text1");
- list.add("text2");
- list.add("text3");
- request.setAttribute("colors3", list);
- %>
- <netui:radioButtonGroup dataSource="color"
- optionsDataSource="${colors3}" />
-
- <netui:anchor formSubmit="true">提交</netui:anchor>
- </netui:form>
-
- </netui:body>
- </netui:html>
| 作者简介 |
肖菁 |
肖菁 是唯J族(www.vivianj.org)创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。 |
作者其它文章
|
