上一节:
下一节:

  Struts - 表单标签

  • 简述

    form标签是 Struts UI 标签的一个子集。这些标签有助于呈现 Struts Web 应用程序所需的用户界面，可分为三类。本章将带您了解所有三种类型的 UI 标签 -

  • 简单的 UI 标签

    我们已经在我们的例子中使用了这些标签，我们将在本章中刷它们。让我们看一个简单的查看页面email.jsp 有几个简单的 UI 标签 - 
    
<%@ page language = "java" contentType = "text/html; charset = ISO-8859-1"
   pageEncoding = "ISO-8859-1"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <s:head/>
      <title>Hello World</title>
   </head>
   
   <body>
      <s:div>Email Form</s:div>
      <s:text name = "Please fill in the form below:" />
      
      <s:form action = "hello" method = "post" enctype = "multipart/form-data">
         <s:hidden name = "secret" value = "abracadabra"/>
         <s:textfield key = "email.from" name = "from" />
         <s:password key = "email.password" name = "password" />
         <s:textfield key = "email.to" name = "to" />
         <s:textfield key = "email.subject" name = "subject" />
         <s:textarea key = "email.body" name = "email.body" />
         <s:label for = "attachment" value = "Attachment"/>
         <s:file name = "attachment" accept = "text/html,text/plain" />
         <s:token />
         <s:submit key = "submit" />
      </s:form>
      
   </body>
</html>
    如果您了解 HTML，那么所有使用的标签都是非常常见的 HTML 标签，带有额外的前缀 s:以及每个标签和不同的属性。当我们执行上述程序时，如果您为所有使用的键设置了正确的映射，我们将获得以下用户界面。
    Struts 简单 UI 标签
    如图所示，s:head 生成 Struts2 应用程序所需的 javascript 和样式表元素。
    接下来，我们有 s:div 和 s:text 元素。s:div 用于呈现 HTML Div 元素。这对于不喜欢将 HTML 和 Struts 标签混合在一起的人很有用。对于这些人，他们可以选择使用 s:div 来呈现一个 div。
    所示的 s:text 用于在屏幕上呈现文本。
    接下来我们有熟悉的 s:form 标签。s:form 标签有一个 action 属性，用于确定提交表单的位置。因为我们在表单中有一个文件上传元素，所以我们必须将 enctype 设置为 multipart。否则，我们可以将其留空。
    在表单标签的末尾，我们有 s:submit 标签。这用于提交表单。当表单被提交时，所有的表单值都被提交给 s:form 标签中指定的操作。
    在 s:form 中，我们有一个名为 secret 的隐藏属性。这会在 HTML 中呈现一个隐藏元素。在我们的例子中，“secret”元素的值为“abracadabra”。此元素对最终用户不可见，用于将状态从一个视图传送到另一个视图。
    接下来我们有 s:label、s:textfield、s:password 和 s:textarea 标签。它们分别用于渲染标签、输入字段、密码和文本区域。我们已经在“Struts - 发送电子邮件”示例中看到了这些。
    这里要注意的重要一点是“key”属性的使用。“key”属性用于从属性文件中获取这些控件的标签。我们已经在 Struts2 本地化、国际化一章中介绍了这个特性。
    然后，我们有 s:file 标签，它呈现输入文件上传组件。该组件允许用户上传文件。在这个例子中，我们使用了 s:file 标签的“accept”参数来指定允许上传的文件类型。
    最后我们有 s:token 标签。token标签生成一个唯一的token，用于判断一个表单是否被双重提交
    当表单被渲染时，一个隐藏的变量被放置为标记值。例如，让我们说令牌是“ABC”。提交此表单时，Struts Fitler 会根据会话中存储的令牌检查令牌。如果匹配，它将从会话中删除令牌。现在，如果表单被意外重新提交（通过刷新或点击浏览器后退按钮），表单将使用“ABC”作为标记重新提交。在这种情况下，过滤器会再次根据会话中存储的令牌检查令牌。但是因为令牌“ABC”已从会话中删除，它将不匹配并且 Struts 过滤器将拒绝该请求。

  • 组 UI 标签

    组 UI 标签用于创建单选按钮和复选框。让我们看一个简单的查看页面HelloWorld.jsp 带有复选框和单选按钮标签 - 
    
<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "hello.action">
         <s:radio label = "Gender" name = "gender" list="{'male','female'}" />
         <s:checkboxlist label = "Hobbies" name = "hobbies"
         list = "{'sports','tv','shopping'}" />
      </s:form>
      
   </body>
</html>
    当我们执行上述程序时，我们的输出将类似于以下内容 -
    Struts 组 UI 标签
    现在让我们看一下这个例子。在第一个示例中，我们创建了一个带有“性别”标签的简单单选按钮。单选按钮标签的名称属性是必需的，因此我们指定一个名称，即“性别”。然后我们提供一个性别列表。该列表填充了值“男性”和“女性”。因此，在输出中，我们得到一个带有两个值的单选按钮。
    在第二个示例中，我们正在创建一个复选框列表。这是为了收集用户的爱好。用户可以有多个爱好，因此我们使用复选框而不是单选按钮。该复选框填充有“体育”、“电视”和“购物”列表。这将爱好显示为复选框列表。

  • select UI 标签

    让我们探索 Struts 提供的 Select Tag 的不同变体。让我们看一个简单的查看页面HelloWorld.jsp 带有选择标签 - 
    
<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "login.action">
         <s:select name = "username" label = "Username"
            list = "{'Mike','John','Smith'}" />
         <s:select label = "Company Office" name = "mySelection"
            value = "%{'America'}" list="%{#{'America':'America'}}">
            <s:optgroup label = "Asia" 
               list = "%{#{'India':'India','China':'China'}}" />
            <s:optgroup label = "Europe"
               list="%{#{'UK':'UK','Sweden':'Sweden','Italy':'Italy'}}" />
         </s:select>
         <s:combobox label = "My Sign" name = "mySign"
            list = "#{'aries':'aries','capricorn':'capricorn'}" headerkey = "-1" 
            headervalue = "--- Please Select ---" emptyOption = "true" value = "capricorn" />
         <s:doubleselect label = "Occupation" name = "occupation"
            list = "{'Technical','Other'}" doublename = "occupations2"
            doubleList="top == 'Technical' ? 
            {'I.T', 'Hardware'} : {'Accounting', 'H.R'}" />
      </s:form>
   </body>
</html>
    当我们执行上述程序时，我们的输出将类似于以下内容 -
    Struts 选择 UI 标签
    现在让我们一一分析个别案例。
    • 首先，select 标记呈现 HTML 选择框。在第一个示例中，我们创建了一个名为“username”和标签为“username”的简单选择框。选择框将填充一个包含 Mike、John 和 Smith 姓名的列表。
    • 在第二个例子中，我们公司在美国设有总部。它还在亚洲和欧洲设有全球办事处。我们想在选择框中显示办事处，但我们希望按大陆名称对全球办事处进行分组。这就是 optgroup 派上用场的地方。我们使用 s:optgroup 标签来创建一个新组。我们给该组一个标签和一个单独的列表。
    • 在第三个示例中，使用了组合框。组合框是输入框和选择框的组合。用户可以从选择框中选择一个值，在这种情况下，输入字段会自动填充用户选择的值。如果用户直接输入值，则不会选择选择框中的值。
    • 在我们的示例中，我们有一个列出太阳标志的组合框。选择框仅列出四个条目，如果它不在列表中，则允许用户输入他的太阳星座。我们还在选择框中添加了一个标题条目。headerentry 是显示在选择框顶部的条目。在我们的例子中，我们想要显示“请选择”。如果用户没有选择任何东西，那么我们假设值为 -1。在某些情况下，我们不希望用户选择空值。在这些情况下，可以将“emptyOption”属性设置为 false。最后，在我们的示例中，我们提供“capricorn”作为组合框的默认值。
    • 在第四个例子中，我们有一个双重选择。当您想要显示两个选择框时使用双选。在第一个选择框中选择的值决定了在第二个选择框中显示的内容。在我们的示例中，第一个选择框显示“技术”和“其他”。如果用户选择技术，我们将在第二个选择框中显示 IT 和硬件。否则，我们将显示会计和人力资源。如示例中所示，使用“list”和“doubleList”属性可以实现这一点。
    在上面的例子中，我们做了一个比较，看看顶部的选择框是否等于 Technical。如果是，那么我们会显示 IT 和硬件。
    我们还需要为顶部框（“name = 'Occupations'）和底部框（doubleName = 'occupations2'）命名
上一节:
下一节: