UI标志又可以分为表单UI和非表单UI两部分。表单UI部分基本与Struts 1.x相同，都是对HTML表单元素的包装。不过，Struts 2.0加了几个我们经常在项目中用到的控件如：datepicker、doubleselect、timepicker、optiontransferselect等。因为这些标志很多都经常用到，而且参数也很多，要在一篇文章详细说明并非易事。

需要深入了解这些标志的朋友，可以到以下查看以下网址： http://wiki.javascud.org/display/ww2cndoc/Tags WebWork2文档中文化计划（中文） http://cwiki.apache.org/WW/tag-reference.html Tag Developers Guide（英文） 本文有相当的内容也来自这两处。

在此，我虽然不能够详细讲述这些标志，但是可以与大家分享一个来Struts 2.0 Show Case一个例子。

*
 * $Id: UITagExample.java 420385 2006-07-10 00:57:05Z mrdon $
*
 * Copyright 2006 The Apache Software Foundation.
*
 * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.apache.struts2.showcase;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.Validateable;
import com.opensymphony.xwork2.util.OgnlValueStack;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.io.File;
/** *//**
*/
public class UITagExample extends ActionSupport implements Validateable {
private static final long serialVersionUID = -94044809860988047L;
String name;
Date birthday;
String bio;
String favoriteColor;
List friends;
boolean legalAge;
String state;
String region;
File picture;
String pictureContentType;
String pictureFileName;
String favouriteLanguage;
String favouriteVehicalType = "MotorcycleKey";
String favouriteVehicalSpecific = "YamahaKey";
List leftSideCartoonCharacters;
List rightSideCartoonCharacters;
List favouriteLanguages = new ArrayList();
List vehicalTypeList = new ArrayList();
Map vehicalSpecificMap = new HashMap();
String thoughts;
public UITagExample() {
favouriteLanguages.add(new Language("EnglishKey", "English Language"));
favouriteLanguages.add(new Language("FrenchKey", "French Language"));
favouriteLanguages.add(new Language("SpanishKey", "Spanish Language"));
VehicalType car = new VehicalType("CarKey", "Car");
VehicalType motorcycle = new VehicalType("MotorcycleKey", "Motorcycle");
vehicalTypeList.add(car);
vehicalTypeList.add(motorcycle);
List cars = new ArrayList();
cars.add(new VehicalSpecific("MercedesKey", "Mercedes"));
cars.add(new VehicalSpecific("HondaKey", "Honda"));
cars.add(new VehicalSpecific("FordKey", "Ford"));
List motorcycles = new ArrayList();
motorcycles.add(new VehicalSpecific("SuzukiKey", "Suzuki"));
motorcycles.add(new VehicalSpecific("YamahaKey", "Yamaha"));
vehicalSpecificMap.put(car, cars);
vehicalSpecificMap.put(motorcycle, motorcycles);
}
public List getLeftSideCartoonCharacters() {
return leftSideCartoonCharacters;
}
public void setLeftSideCartoonCharacters(List leftSideCartoonCharacters) {
this.leftSideCartoonCharacters = leftSideCartoonCharacters;
}
public List getRightSideCartoonCharacters() {
return rightSideCartoonCharacters;
}
public void setRightSideCartoonCharacters(List rightSideCartoonCharacters) {
this.rightSideCartoonCharacters = rightSideCartoonCharacters;
}
public String getFavouriteVehicalType() {
return favouriteVehicalType;
}
public void setFavouriteVehicalType(String favouriteVehicalType) {
this.favouriteVehicalType = favouriteVehicalType;
}
public String getFavouriteVehicalSpecific() {
return favouriteVehicalSpecific;
}
public void setFavouriteVehicalSpecific(String favouriteVehicalSpecific) {
this.favouriteVehicalSpecific = favouriteVehicalSpecific;
}
public List getVehicalTypeList() {
return vehicalTypeList;
}
public List getVehicalSpecificList() {
OgnlValueStack stack = ServletActionContext.getValueStack(ServletActionContext.getRequest());
Object vehicalType = stack.findValue("top");
if (vehicalType != null && vehicalType instanceof VehicalType) {
List l = (List) vehicalSpecificMap.get(vehicalType);
return l;
}
return Collections.EMPTY_LIST;
}
public List getFavouriteLanguages() {
return favouriteLanguages;
}
public String execute() throws Exception {
return SUCCESS;
}
/**//* Getters and Setters */

public String doSubmit() {
return SUCCESS;
}
// === inner class 
    public static class Language {
String description;
String key;
public Language(String key, String description) {
this.key = key;
this.description = description;
}
public String getKey() {
return key;
}
public String getDescription() {
return description;
}
}
public static class VehicalType {
String key;
String description;
public VehicalType(String key, String description) {
this.key = key;
this.description = description;
}
public String getKey() { return this.key; }
public String getDescription() { return this.description; }
public boolean equals(Object obj) {
if (! (obj instanceof VehicalType)) {
return false;
}
else {
return key.equals(((VehicalType)obj).getKey());
}
}
public int hashCode() {
return key.hashCode();
}
}
public static class VehicalSpecific {
String key;
String description;
public VehicalSpecific(String key, String description) {
this.key = key;
this.description = description;
}
public String getKey() { return this.key; }
public String getDescription() { return this.description; }
public boolean equals(Object obj) {
if (! (obj instanceof VehicalSpecific)) {
return false;
}
else {
return key.equals(((VehicalSpecific)obj).getKey());
}
}
public int hashCode() {
return key.hashCode();
}
}
}

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>UI Tags Example</title>
    <s:head/>
</head>
<body>
<s:actionerror/>
<s:actionmessage/>
<s:fielderror />
<s:form action="exampleSubmit" method="post" enctype="multipart/form-data" tooltipConfig="#{'jsTooltipEnabled':'true'}">
    <s:textfield
label="Name"
name="name"
            tooltip="Enter your Name here" />
    <s:datepicker
tooltip="Select Your Birthday"
            label="Birthday"
            name="birthday" />
    <s:textarea
tooltip="Enter your Biography"
            label="Biograph"
            name="bio"
            cols="20"
            rows="3"/>
    <s:select
tooltip="Choose Your Favourite Color"
            label="Favorite Color"
            list="{'Red', 'Blue', 'Green'}"
            name="favoriteColor"
            emptyOption="true"
            headerKey="None"
            headerValue="None"/>
    <s:select
tooltip="Choose Your Favourite Language"
            label="Favourite Language"
            list="favouriteLanguages"
            name="favouriteLanguage"
            listKey="key"
            listValue="description"
            emptyOption="true"
            headerKey="None"
            headerValue="None"/>
    <s:checkboxlist
tooltip="Choose your Friends"
            label="Friends"
            list="{'Patrick', 'Jason', 'Jay', 'Toby', 'Rene'}"
            name="friends"/>
    <s:checkbox
tooltip="Confirmed that your are Over 18"
            label="Age 18+"
            name="legalAge"/>
    <s:doubleselect
tooltip="Choose Your State"
            label="State"
            name="region" list="{'North', 'South'}"
            value="'South'"
            doubleValue="'Florida'"
            doubleList="top == 'North' ? {'Oregon', 'Washington'} : {'Texas', 'Florida'}"
doubleName="state"
            headerKey="-1"
            headerValue="---------- Please Select ----------"
            emptyOption="true" />
    <s:doubleselect
tooltip="Choose your Vehical"
            label="Favourite Vehical"
            name="favouriteVehicalType"
            list="vehicalTypeList"
            listKey="key"
            listValue="description"
            value="'MotorcycleKey'"
            doubleValue="'YamahaKey'"
            doubleList="vehicalSpecificList"
            doubleListKey="key"
            doubleListValue="description"
            doubleName="favouriteVehicalSpecific" headerKey="-1"
            headerValue="---------- Please Select ----------"
            emptyOption="true" />
    <s:file
tooltip="Upload Your Picture"
            label="Picture"
name="picture" />

<s:optiontransferselect
tooltip="Select Your Favourite Cartoon Characters"
            label="Favourite Cartoons Characters"
            name="leftSideCartoonCharacters"
leftTitle="Left Title"
            rightTitle="Right Title"
            list="{'Popeye', 'He-Man', 'Spiderman'}"
multiple="true"
            headerKey="headerKey"
            headerValue="--- Please Select ---"
            emptyOption="true"
            doubleList="{'Superman', 'Mickey Mouse', 'Donald Duck'}"
doubleName="rightSideCartoonCharacters"
            doubleHeaderKey="doubleHeaderKey"
            doubleHeaderValue="--- Please Select ---"
doubleEmptyOption="true"
            doubleMultiple="true" />

<s:textarea
label="Your Thougths"
            name="thoughts"
tooltip="Enter your thoughts here" />

<s:submit onclick="alert('aaaa');" />
    <s:reset onclick="alert('bbbb');" />
</s:form>

</body>
</html>

<action name="example" class="org.apache.struts2.showcase.UITagExample">
    <result>example.jsp</result>
    <result name="input">example.jsp</result>
</action>