免費(fèi)AI編程助手
Struts2 表單標(biāo)簽
2022-07-08 11:42 更新
表單標(biāo)簽列表是Struts UI標(biāo)簽的子集。這些標(biāo)簽有助于渲染Struts Web應(yīng)用程序所需的用戶界面，主要分為三類，本章將介紹這三種類型的UI標(biāo)簽：
簡(jiǎn)單UI標(biāo)簽
我們其實(shí)已經(jīng)在前面的示例中使用了這些標(biāo)簽，接下來(lái)將在本章中重新回顧一下。以下是一個(gè)簡(jiǎn)單的視圖頁(yè)面email.jsp與幾個(gè)簡(jiǎn)單的UI標(biāo)簽：
<%@ 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，那么就知道所有使用的標(biāo)簽都是非常常見(jiàn)的HTML標(biāo)簽，每個(gè)標(biāo)簽帶有一個(gè)額外的前綴“s:”以及不同的屬性。當(dāng)我們執(zhí)行上面的程序時(shí)，將得出以下用戶界面，只要你已經(jīng)為所有的key設(shè)置了正確的映射。
接下來(lái)，s:div和s:text元素。s:div用于呈現(xiàn)HTML Div元素。這對(duì)于不喜歡將HTML和Struts標(biāo)簽混合在一起的人很有用，他們可選擇使用s:div來(lái)渲染div。
如圖所示，s:text用于在屏幕上呈現(xiàn)文本。
接下來(lái)是相類似的s:form標(biāo)簽。s:form標(biāo)簽具有確定在何處提交表單的action屬性。因?yàn)樵诒韱沃杏幸粋€(gè)文件上傳元素，我們必須將enctype設(shè)置為multipart。否則，就留空。
在表單標(biāo)簽的末尾，有s:submit標(biāo)簽，這用于提交表單。提交表單時(shí)，所有表單值都將提交到s:form標(biāo)簽中指定的action。
在s:form標(biāo)簽中，我們有一個(gè)稱為secret的隱藏屬性，這將在HTML中呈現(xiàn)一個(gè)隱藏元素。在我們的例子中，“secret”元素的值為“abracadabra”。此元素對(duì)最終用戶不可見(jiàn)，并用于將狀態(tài)從一個(gè)視圖傳遞到另一個(gè)視圖。
接下來(lái)是s:label，s:textfield，s:password和s:textarea標(biāo)簽。這些分別用于渲染標(biāo)簽，輸入字段，密碼和文本區(qū)域。我們已經(jīng)在“Struts2 發(fā)送電子郵件”章節(jié)示例中看到了這些。這里要注意的重要事情是使用“key”屬性?！発ey”屬性用于從屬性文件中提取這些控件的標(biāo)簽。我們已經(jīng)在Struts2本地化/國(guó)際化（i18n）一章中討論了這個(gè)特性。
然后是s:file標(biāo)簽，它呈現(xiàn)輸入文件上傳的組件，此組件允許用戶上傳文件。在這個(gè)例子中，我們使用了s:file標(biāo)簽的“accept”參數(shù)來(lái)指定允許上傳哪些文件類型。
最后，s:token標(biāo)簽。token標(biāo)簽生成唯一的token，用于查明表單是否已被兩次提交。
呈現(xiàn)表單時(shí)，會(huì)將一個(gè)隱藏變量放置為token（令牌）值。例如令牌是“ABC”，提交此表單時(shí)，Struts Fitler將根據(jù)存儲(chǔ)在會(huì)話中的令牌進(jìn)行檢查。如果匹配，則從會(huì)話中刪除令牌?，F(xiàn)在，如果表單意外被重新提交（通過(guò)刷新或通過(guò)點(diǎn)擊瀏覽器后退按鈕），表單將重新提交，用“ABC”作為令牌。在這種情況下，過(guò)濾器將對(duì)照存儲(chǔ)在會(huì)話中的令牌再次進(jìn)行檢查。但是因?yàn)榱钆啤癆BC”已經(jīng)從會(huì)話中刪除，它將不匹配，Struts過(guò)濾器將拒絕請(qǐng)求。
群組UI標(biāo)簽
群組UI標(biāo)簽用于創(chuàng)建單選按鈕和復(fù)選框。讓我們看一個(gè)簡(jiǎn)單的帶有復(fù)選框和單選按鈕標(biāo)簽的視圖頁(yè)面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>
當(dāng)我們執(zhí)行上面的程序時(shí)，我們的輸出將類似于以下內(nèi)容：
在第二個(gè)例子中，我們創(chuàng)建一個(gè)復(fù)選框列表。這是為了收集用戶的愛(ài)好。用戶可以有多個(gè)愛(ài)好，因此我們使用復(fù)選框而不是單選按鈕。復(fù)選框用“sports”，“Tv”和“Shopping”填充列表，將這些愛(ài)好作為復(fù)選框列表。
選擇UI標(biāo)簽
讓我們來(lái)探討Struts提供的Select標(biāo)簽的不同變化。讓我們看一個(gè)簡(jiǎn)單的帶select標(biāo)簽的視圖頁(yè)面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>
當(dāng)我們執(zhí)行上面的程序時(shí)，輸出的結(jié)果將類似于以下內(nèi)容：
- 首先，select標(biāo)簽呈現(xiàn)HTML選擇框。在第一個(gè)例子中，我們創(chuàng)建一個(gè)名為“username”和標(biāo)記“username”的簡(jiǎn)單選擇框。選擇框?qū)⑻畛浒彰鸐ike，John和Smith的列表。
- 在第二個(gè)例子中，公司在美國(guó)設(shè)有總部。它還在亞洲和歐洲設(shè)有全球辦事處。我們想在一個(gè)選擇框中顯示辦公點(diǎn)，但要按全球大陸的名稱對(duì)全球辦事處進(jìn)行分組。這是optgroup的用武之地。我們使用s:optgroup標(biāo)簽創(chuàng)建一個(gè)新組，給組一個(gè)標(biāo)記和一個(gè)單獨(dú)的列表。
- 在第三個(gè)示例中，使用組合框。組合框是輸入字段和選擇框的組合。用戶可以從選擇框中選擇一個(gè)值，在這種情況下，輸入字段將自動(dòng)填入用戶選擇的值。如果用戶直接輸入值，則將不選擇來(lái)自選擇框的值。
- 在我們的示例中，我們有組合框列出了星座。選擇框只列出四個(gè)條目，允許用戶輸入他的星座，如果它不在列表中。我們還向選擇框中添加一個(gè)標(biāo)題條目。headerentry是顯示在選擇框頂部的。在示例中，我們要顯示“Please Select”。如果用戶沒(méi)有選擇任何東西，那么我們假設(shè)-1作為值。在某些情況下，我們不希望用戶選擇一個(gè)空值。那么，可以將“emptyOption”屬性設(shè)置為false。最后，在我們的示例中，我們提供“capricorn”作為組合框的默認(rèn)值。
- 在第四個(gè)例子中，我們有一個(gè)雙選框。當(dāng)要顯示兩個(gè)選擇框時(shí)，使用double select。在第一個(gè)選擇框中選擇的值確定在第二個(gè)選擇框中顯示的值。在示例中，第一個(gè)選擇框顯示“Technical”和“Other”。如果用戶選擇Technical，我們將在第二個(gè)選擇框中顯示IT和Hardware。否則，將顯示Accounting和HR。這可以使用“l(fā)ist”和“doubleList”屬性，如示例所示。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：