Struts 2 > Home > View Developers Guide > Tags |

Struts 2
Tags
Edit Page Browse Space Add Page Add News
Added by plightbo, last edited by Ted Husted on Aug 21, 2006 (view change)

The framework provides a tag library decoupled from the view technology. In this section, we describe each tag in general terms, such as the attributes it supports, what the behaviors are, and so forth. Most tags are supported in all template languages (see JSP Tags, Velocity Tags, and FreeMarker Tags), but some are currently only specific to one language. Whenever a tag doesn't have complete support for every language, it is noted on the tag's reference page.

The types of tags can be broken in to two types: general and HTML. Besides function and responsibility, the biggest difference between the two is that the HTML tags support templates and themes. In addition to the general tag reference, we also provide examples for using these generic tags in each of the support languages.

Be sure to read the Tag Syntax document to learn how tag attribute syntax works.

## General Tags

General tags are used for controlling the execution flow when the pages render. These tags also allow for data extraction from places other than your action or the value stack, such as Internationalization, JavaBeans, and including additional URLs or action executions.

1. Control Tags provide control flow, such as if, else, and iterator.
2. Data Tags allow for data manipulation or creation, such as bean, push, and i18n.

## HTML Tags

Unlike general tags, HTML tags do not provide much control structure or logic. Rather, they are focussed on using data, either from your action/value stack or from the Data Tags, and displaying data in rich and reusable HTML. All HTML tags are driven by templates and themes. While general tags simply output some content directly from the tag (if there is any content to output), the HTML tags defer to a template, often grouped together as a theme, to do the actual rendering.

Template support allows HTML tags to build a rich set of reusable UI components that can be customized to fit exact requirements. For details, see Themes and Templates.

Themes and Templates | A must-read explanation of how themes and templates are uses when rendering HTML tags.
Form Tags | provide all form-related HTML output, such as form, textfield, and select.
Non Form Tags | provide all non-form-related HTML output, such as a, div, and tabbedPanel.

## Language Specific Tag Support

The framework strives to support multiple development environments. The framework does not impose a single template language. Almost any common language can be used, and there are hooks for new languages. By default, almost every single tag is supported in JSP, Velocity, and FreeMarker. In each of these sections, you'll find examples and techniques for applying the generic tag reference toward your specific language or template choice.

- JSP Tags
- Velocity Tags
- FreeMarker Tags

| Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works.

Within the form tags, there are two classes of tags: the form tag itself, and all other tags, which make up the individual form elements. The behavior of the form tag is different than the elements enclosed within it.

## Form Tag Themes

As explained in Themes and Templates, the HTML Tags (which includes Form Tags) are all driven by templates. Templates are grouped together to create themes. The framework bundles three themes in the distribution.

simple | Sometimes too simple
xhtml | Extends simple | (default)
ajax | Extends xhtml

The predefined themes can be used "as is" or customized.

| xhtml layout The xhtml theme renders out a two-column table. If a different layout is needed, do not write your own HTML. Create a new theme or utilize the simple theme.

### Simple theme caveats

The downside of using the simple theme is that it doesn't support as many of the attributes that the other themes do. For example, the `label` attribute does nothing in the simple theme, and the automatic display of error messages is not supported.

## Common Attributes

All the form tags extend the UIBean class. This base class provides a set of common attributes, that can be grouped in to three categories: `templated-related`, javascript-related, and general attributes. The individual attributes are documented on each tag's reference page.

In addition to the common attributes, a special attribute exists for all form element tags: `form` (${parameters.form}). The `form` property represents the attributes used to render the form tag, such as the form's id. In a template, the form's ID can be found by calling ${parameters.form.id}.

## Template-Related Attributes

Content pulled from external source. Click here to refresh.
Attribute | Theme | Data Types | Description
templateDir | n/a | String | define the template directory
theme | n/a | String | define the theme name
template | n/a | String | define the template name

## Javascript-Related Attributes

Content pulled from external source. Click here to refresh.
Attribute | Theme | Data Types | Description
onclick | simple | String | html javascript onclick attribute
ondbclick | simple | String | html javascript ondbclick attribute
onmousedown | simple | String | html javascript onmousedown attribute
onmouseup | simple | String | html javascript onmouseup attribute
onmouseover | simple | String | html javascript onmouseover attribute
onmouseout | simple | String | html javascript onmouseout attribute
onfocus | simple | String | html javascript onfocus attribute
onblur | simple | String | html javascript onblur attribute
onkeypress | simple | String | html javascript onkeypress attribute
onkeyup | simple | String | html javascript onkeyup attribute
onkeydown | simple | String | html javascript onkeydown attribute
onselect | simple | String | html javascript onselect attribute
onchange | simple | String | html javascript onchange attribute

## Tooltip Related Attributes

Content pulled from external source. Click here to refresh.
Attribute | Data Type | Default | Description
tooltip | String | none | Set the tooltip of this particular component
jsTooltipEnabled | String | false | Enable js tooltip rendering
tooltipIcon | String | /struts/static/tooltip/tooltip.gif | The url to the tooltip icon
tooltipDelay | String | 500 | Tooltip shows up after the specified timeout (miliseconds). A behavior similar to that of OS based tooltips.

## General Attributes

Content pulled from external source. Click here to refresh.
Attribute | Theme | Data Types | Description
cssClass | simple | String | define html class attribute
cssStyle | simple | String | define html style attribute
title | simple | String | define html title attribute
disabled | simple | String | define html disabled attribute
label | xhtml | String | define label of form element
labelPosition | xhtml | String | define label position of form element (top/left), default to left
requiredposition | xhtml | String | define required label position of form element (left/right), default to right
name | simple | String | Form Element's field name mapping
required | xhtml | Boolean | add * to label (true to add false otherwise)
tabIndex | simple | String | define html tabindex attribute
value | simple | Object | define value of form element

| When some attributes don't apply Some tag attributes may not be utilized by all, or any, of the templates. For example, the form tag supports the `tabindex` attribute, but none of the themes render the `tabindex`.

## Value/Name Relationship

In many of the tags (except for the form tag) there is a unique relationship between the `name` and `value` attributes. The `name` attribute provides the name for the tag, which in turn is used as the control attribute when the form is submitted. The value submitted is bound to the `name`. In most cases, the `name` maps to a simple JavaBean property, such as "postalCode". On a submit, the value would be set to the property by calling the `setPostalCode` mutator.

Likewise, a form control could be populated by calling a JavaBean accessor, like `getPostalCode`. In the expression language, we can refer to the JavaBean property by name. An expression like "%{postalCode}" would in turn call `getPostalCode`.

Using Expressions to populate a form for editing

    <@s.form action="updateAddress">
        <@saf.textfield label="Postal Code" name="postalCode" value="%{postalCode}"/>
        ...
    </@s.form>

However, since the tags imply a relationship between the `name` and `value`, the `value` attribute is optional. If a `value` is not specified, by default, the JavaBean accessor is used instead.

Populating a form for editing, the easy way

    <@s.form action="updateAddress">
        <@s.textfield label="Postal Code" name="postalCode"/>
        ...
    </@s.form>

While most attributes are exposed to the underlying templates as the same key as the attribute (${parameters.label}), the `value` attribute is not. Instead, it can be accessed via the `nameValue` key (${parameters.nameValue}). The `nameValue` key indicates that the value may have been generated from the `name` attribute rather than explicitly defined in the `value` attribute.

## ID Name Assignment

All form tags automatically assign an ID to the control, but the ID can be overridden if needed.

Forms | The default ID is the action name. For example, "updateAddress".
Controls | The default ID is the form's name concatenated with the tag name. For example, "updateAddress_postalCode".

## Required Attribute

The `required` attribute on many UI tags defaults to true only if you have client-side validation enabled, and a validator is associated with that particular field.

## Tooltip

Content pulled from external source. Click here to refresh.
Every Form UI component (in xhtml / css_xhtml or any others that extends of them) could have tooltip assigned to a them. The Form component's tooltip related attribute once defined will be applicable to all form UI component that is created under it unless explicitly overriden by having the Form UI component itself defined that tooltip attribute. In Example 1, the textfield will inherit the tooltipDelay adn tooltipIcon attribte from its containing form. In other words, although it doesn't defined a tooltipAboveMousePointer attribute, it will have that attributes inherited from its containing form. In Example 2, the the textfield will inherite both the tooltipDelay and tooltipIcon attribute from its containing form but tooltipDelay attribute is overriden at the textfield itself. Hence, the textfield actually will have tooltipIcon defined as /myImages/myIcon.gif, inherited from its containing form and tooltipDelay defined as 5000, due to overriden at the textfield itself. Example 3, 4 and 5 shows different way of setting the tooltipConfig attribute. Example 3:Set tooltip config through body of param tag Example 4:Set tooltip config through value attribute of param tag Example 5:Set tooltip config through tooltipConfig attribute of component tag

Content pulled from external source. Click here to refresh.
    <!-- Example 1: -->
     <s:form
     			tooltipConfig="#{'tooltipDelay':'500',
                               'tooltipIcon='/myImages/myIcon.gif'}" .... >
       ....
         <s:textfield label="Customer Name" tooltip="Enter the customer name" .... />
       ....
     </s:form>

     <!-- Example 2: -->
     <s:form
             tooltipConfig="#{'tooltipDelay':'500',
              				'tooltipIcon':'/myImages/myIcon.gif'}" ... >
       ....
         <s:textfield label="Address"
              tooltip="Enter your address"
              tooltipConfig="#{'tooltipDelay':'5000'}" />
       ....
     </s:form>

     <-- Example 3: -->
     <s:textfield
            label="Customer Name"
    	      tooltip="One of our customer Details'">
            <s:param name="tooltipConfig">
                 tooltipDelay = 500 |
                 tooltipIcon = /myImages/myIcon.gif
            </s:param>
     </s:textfield>

     <-- Example 4: -->
     <s:textfield
    	        label="Customer Address"
    	        tooltip="Enter The Customer Address" >
    	        <s:param
                  name="tooltipConfig"
                  value="#{'tooltipDelay':'500',
                           'tooltipIcon':'/myImages/myIcon.gif'}" />
     </s:textfield>

     <-- Example 5: -->
     <s:textfield
              label="Customer Telephone Number"
              tooltip="Enter customer Telephone Number"
              tooltipConfig="#{'tooltipDelay':'500',
                               'tooltipIcon':'/myImages/myIcon.gif'}" />

## Tag Reference

For detailed descriptions of each tag, including usage examples, see the Tag Reference.