Struts 2 - 表單標籤

表單標籤列表是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:字首以及不同的屬性。當我們執行上述程式時，如果您已為所有使用的鍵設定了正確的對映，則會得到以下使用者介面。

如所示，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標籤中指定的action。

在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標籤生成一個唯一令牌，用於確定表單是否被重複提交。

呈現表單時，會將一個隱藏變數作為令牌值放置。例如，假設令牌為“ABC”。提交此表單時，Struts過濾器會將令牌與儲存在會話中的令牌進行比較。如果匹配，則會從會話中刪除令牌。現在，如果意外地重新提交表單（透過重新整理或點選瀏覽器後退按鈕），則表單將使用“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>

當我們執行上述程式時，我們的輸出將類似於以下內容：

現在讓我們來看一下這個例子。在第一個例子中，我們正在建立一個簡單的單選按鈕，標籤為“性別”。name屬性對於單選按鈕標籤是必須的，所以我們指定一個名為“gender”的名稱。然後我們向gender提供一個列表。該列表填充了“male”和“female”值。因此，在輸出中，我們得到一個帶有兩個值的單選按鈕。

在第二個例子中，我們正在建立一個複選框列表。這是為了收集使用者的愛好。使用者可以有多個愛好，因此我們使用複選框而不是單選按鈕。複選框填充了“sports”、“TV”和“Shopping”列表。這將愛好顯示為複選框列表。

選擇UI標籤

讓我們探索Struts提供的Select標籤的不同變體。讓我們來看一個簡單的檢視頁面HelloWorld.jsp，其中包含select標籤：

<%@ 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>

當我們執行上述程式時，我們的輸出將類似於以下內容：

現在讓我們逐一講解各個案例。

首先，select標籤呈現HTML select框。在第一個例子中，我們正在建立一個簡單的select框，名稱為“username”，標籤為“username”。select框將填充一個包含Mike、John和Smith名稱的列表。
在第二個例子中，我們的公司在美國設有總部。它還在亞洲和歐洲設有全球辦事處。我們想在一個select框中顯示辦事處，但我們想按大洲名稱對全球辦事處進行分組。這就是optgroup派上用場的地方。我們使用s:optgroup標籤建立一個新的組。我們為該組提供一個標籤和一個單獨的列表。
在第三個例子中，使用了組合框。組合框是輸入欄位和select框的組合。使用者可以從select框中選擇一個值，在這種情況下，輸入欄位將自動填充使用者選擇的值。如果使用者直接輸入一個值，則不會選擇select框中的任何值。
在我們的例子中，我們列出了星座。select框只列出了四個條目，允許使用者如果他的星座不在列表中，則鍵入他的星座。我們還在select框中添加了一個header條目。header條目是在select框頂部顯示的條目。在我們的例子中，我們想顯示“請選擇”。如果使用者沒有選擇任何內容，則我們將-1作為值。在某些情況下，我們不希望使用者選擇空值。在這些情況下，可以將“emptyOption”屬性設定為false。最後，在我們的例子中，我們為組合框提供“capricorn”作為預設值。
在第四個例子中，我們有一個雙重選擇。當您想顯示兩個select框時，可以使用雙重選擇。在第一個select框中選擇的值決定了第二個select框中顯示的內容。在我們的例子中，第一個select框顯示“技術”和“其他”。如果使用者選擇“技術”，我們將在第二個select框中顯示“IT”和“硬體”。否則，我們將顯示“會計”和“人力資源”。這可以透過使用“list”和“doubleList”屬性來實現，如示例所示。

在上面的例子中，我們進行了一個比較，以檢視頂部select框是否等於“技術”。如果是，則顯示“IT”和“硬體”。

我們還需要為頂部框（“name = 'Occupations'”）和底部框（“doubleName = 'occupations2'”）命名。

列印頁面