Struts2 表單標簽

2022-07-08 11:42 更新

表單標簽列表是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:”以及不同的屬性。當我們執(zhí)行上面的程序時,將得出以下用戶界面,只要你已經為所有的key設置了正確的映射。

Struts的簡單的UI標簽

如圖所示,s:head生成Struts2 應用程序所需的javascript和stylesheet元素。
接下來,s:div和s:text元素。s:div用于呈現(xiàn)HTML Div元素。這對于不喜歡將HTML和Struts標簽混合在一起的人很有用,他們可選擇使用s:div來渲染div。
如圖所示,s:text用于在屏幕上呈現(xiàn)文本。
接下來是相類似的s:form標簽。s:form標簽具有確定在何處提交表單的action屬性。因為在表單中有一個文件上傳元素,我們必須將enctype設置為multipart。否則,就留空。
在表單標簽的末尾,有s:submit標簽,這用于提交表單。提交表單時,所有表單值都將提交到s:form標簽中指定的action。
在s:form標簽中,我們有一個稱為secret的隱藏屬性,這將在HTML中呈現(xiàn)一個隱藏元素。在我們的例子中,“secret”元素的值為“abracadabra”。此元素對最終用戶不可見,并用于將狀態(tài)從一個視圖傳遞到另一個視圖。
接下來是s:label,s:textfield,s:password和s:textarea標簽。這些分別用于渲染標簽,輸入字段,密碼和文本區(qū)域。我們已經在“Struts2 發(fā)送電子郵件”章節(jié)示例中看到了這些。這里要注意的重要事情是使用“key”屬性?!発ey”屬性用于從屬性文件中提取這些控件的標簽。我們已經在Struts2本地化/國際化(i18n)一章中討論了這個特性。
然后是s:file標簽,它呈現(xiàn)輸入文件上傳的組件,此組件允許用戶上傳文件。在這個例子中,我們使用了s:file標簽的“accept”參數(shù)來指定允許上傳哪些文件類型。
最后,s:token標簽。token標簽生成唯一的token,用于查明表單是否已被兩次提交。
呈現(xiàn)表單時,會將一個隱藏變量放置為token(令牌)值。例如令牌是“ABC”,提交此表單時,Struts Fitler將根據存儲在會話中的令牌進行檢查。如果匹配,則從會話中刪除令牌?,F(xiàn)在,如果表單意外被重新提交(通過刷新或通過點擊瀏覽器后退按鈕),表單將重新提交,用“ABC”作為令牌。在這種情況下,過濾器將對照存儲在會話中的令牌再次進行檢查。但是因為令牌“ABC”已經從會話中刪除,它將不匹配,Struts過濾器將拒絕請求。

群組UI標簽

群組UI標簽用于創(chuàng)建單選按鈕和復選框。讓我們看一個簡單的帶有復選框和單選按鈕標簽的視圖頁面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>

當我們執(zhí)行上面的程序時,我們的輸出將類似于以下內容:

Struts群組UI標簽

現(xiàn)在讓我們看看這些例子。在第一個例子中,我們創(chuàng)建一個簡單的radiobutton,標簽為“Gender”。name屬性對于radiobutton標簽是必需的,那么我們指定一個名為“gender”的name。然后我們提供一個性別列表,該列表用值“male”和“female”填充。因此,在輸出中我們得到一個帶有兩個值的radiobutton。
在第二個例子中,我們創(chuàng)建一個復選框列表。這是為了收集用戶的愛好。用戶可以有多個愛好,因此我們使用復選框而不是單選按鈕。復選框用“sports”,“Tv”和“Shopping”填充列表,將這些愛好作為復選框列表。

選擇UI標簽

讓我們來探討Struts提供的Select標簽的不同變化。讓我們看一個簡單的帶select標簽的視圖頁面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>

當我們執(zhí)行上面的程序時,輸出的結果將類似于以下內容:

Struts的選擇UI標簽

現(xiàn)在,讓我們逐一查看每個案例。
  • 首先,select標簽呈現(xiàn)HTML選擇框。在第一個例子中,我們創(chuàng)建一個名為“username”和標記“username”的簡單選擇框。選擇框將填充包含姓名Mike,John和Smith的列表。
  • 在第二個例子中,公司在美國設有總部。它還在亞洲和歐洲設有全球辦事處。我們想在一個選擇框中顯示辦公點,但要按全球大陸的名稱對全球辦事處進行分組。這是optgroup的用武之地。我們使用s:optgroup標簽創(chuàng)建一個新組,給組一個標記和一個單獨的列表。
  • 在第三個示例中,使用組合框。組合框是輸入字段和選擇框的組合。用戶可以從選擇框中選擇一個值,在這種情況下,輸入字段將自動填入用戶選擇的值。如果用戶直接輸入值,則將不選擇來自選擇框的值。
  • 在我們的示例中,我們有組合框列出了星座。選擇框只列出四個條目,允許用戶輸入他的星座,如果它不在列表中。我們還向選擇框中添加一個標題條目。headerentry是顯示在選擇框頂部的。在示例中,我們要顯示“Please Select”。如果用戶沒有選擇任何東西,那么我們假設-1作為值。在某些情況下,我們不希望用戶選擇一個空值。那么,可以將“emptyOption”屬性設置為false。最后,在我們的示例中,我們提供“capricorn”作為組合框的默認值。
  • 在第四個例子中,我們有一個雙選框。當要顯示兩個選擇框時,使用double select。在第一個選擇框中選擇的值確定在第二個選擇框中顯示的值。在示例中,第一個選擇框顯示“Technical”和“Other”。如果用戶選擇Technical,我們將在第二個選擇框中顯示IT和Hardware。否則,將顯示Accounting和HR。這可以使用“l(fā)ist”和“doubleList”屬性,如示例所示。
在上面的例子中,我們做一個比較,看看頂部的選擇框是否等于Techical。如果是,那么我們顯示IT和Hardware。我們還需要給頂部框(“name ='Occupations')和底部框(doubleName ='occupations2')命名。
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號