Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment:

Update formatting and nomenclature
Note

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. This is important as the The behavior of the form tag itself is different than that of the elements enclosed within it. Before we go provide a reference for all the form tags, including the form tag itself, we must outline some general characteristics first.

...

.

Form Tag Themes

As previously noted explained in Themes and Templates, the HTML Tags (which includes Form Tags) are all driven by templates. Templates are grouped together to form themes. By default, WebWork provides three 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.

Tip
titlexhtml 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. Similarly, the functionality offered by the simple theme is much less than that of the xhtml and ajax themes: the automatic display of error messages is not supported.

Common Attributes

All the form tags extend the UIBean class. This base class generally provides a set of common attributes, that can be grouped in to three classescategories: templated-related, javascript-related, and general attributes. We won't document what these attributes do here as that is taken care of in each individual The individual attributes are documented on each tag's reference page.

However, it is a good idea to familiarize yourself with the structure of the UI tags and what attributes are available for all tags.

In addition to these the common attributes, a special attribute exists for all form element tags: form (ie: ${parameters.form}). This The form property represents the parameters attributes used to render the form tag and allows you to provide interaction between your form elements and the form itself. For example, in a template you could access , such as the form's id. In a template, the form's ID can be found by calling ${parameters.form.id}.

Template-Related Attributes

Wiki Markup
{snippet:id=templateRelatedAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean}

Javascript-Related Attributes

Wiki Markup
{snippet:id=javascriptRelatedAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean}

Tooltip Related Attributes

Wiki Markup
{snippet:id=tooltipattributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean}

General Attributes

Wiki Markup
{snippet:id=generalAttributes|javadoc=true|url=com.opensymphony.webwork.components.UIBean}
Note
titleWhen

...

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 is what the form element gets named and eventually submitted as. This effectively is the expression to which you wish to bind the incoming value toprovides 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, it is the name maps to a simple JavaBean property, such as "firstNamepostalCode". This would eventually call setFirstName().

Similarly, you often wish to also display in your form elements existing data from the same JavaBean property. This time, the attributevalue is used. A value of "%{firstName}" would call getFirstName() and display it in your form, allowing users to edit the value and re-submit it.

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. You could use the following code, and it would work just fine:

Code Block
xml
xml
titleUsing Expressions to populate a form for editing
<@ww<@saf.form action="updatePersonupdateAddress">
    <@ww<@saf.textfield label="FirstPostal nameCode" name="firstNamepostalCode" value="%{firstNamepostalCode}"/>
    ...
</@ww@saf.form>

However, because since the tags imply a relationship between the name and value, the value attribute is optional. If a value is so often predictable, we automatically do this for you, allowing you to do:not specified, by default, the JavaBean accessor is used instead.

Code Block
xml
xml
titlePopulating a form for editing, the easy way
<@ww<@saf.form action="updatePersonupdateAddress">
    <@ww<@saf.textfield label="FirstPostal nameCode" name="firstNamepostalCode"/>
    ...
</@ww@saf.form>

While most attributes are exposed to the underlying templates as the same key as the attribute (ie: ${parameters.label}), the value attribute is not. Instead, it can be accessed via the "nameValue" key (ie: ${parameters.nameValue}) to indicate that it . 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 for you. You are free to override this ID if you wish. The ID assignment works as follows:

...

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 WebWork UI tags defaults to true only if you have client-side validation enabled, and there is a validator is associated with that particular field.

Tooltip

Wiki Markup
{snippet:id=tooltipdescription|javadoc=true|url=com.opensymphony.webwork.components.UIBean}
Wiki Markup
{snippet:id=tooltipexample|lang=xml|javadoc=true|url=com.opensymphony.webwork.components.UIBean}

Form Tag Reference

Note
titleEntering push and pop zone

All tags that push something onto the value stack It's very important to note that all tags that insert something into the valuestack (like i18n or bean tags) will remove pop those objects from the stack on when its end tag. This means that if you instantiate processing completes. If a bean is instantiated with the bean tag (<ww<saf:bean name="'br.univap.fcc.sgpw.util.FormattersHelper'">) that bean will be avaliable available on the valuestack value stack only until the </ww:bean> tag closes.

  1. checkbox - renders a checkbox input field
  2. checkboxlist - renders a list of checkboxes
  3. combobox - renders a widget that fills a text box from a select
  4. datepicker - renders a date selection widget using JavaScript and DOM
  5. doubleselect - renders a double select widget, where the second drop down depends on the first
  6. head - renders the HEAD section for specific themes, such as CSS and JavaScript imports
  7. file - renders a file input field
  8. form - renders an input form
  9. hidden - renders a hidden form field
  10. label - renders renders a label
  11. optiontransferselect- renders an option transfer select component which is basically two select box with buttons in between allowing entries of each select to get transfer between each other.
  12. password - renders a password textfield
  13. radio - renders a radio button
  14. reset - renders a reset form button
  15. richtexteditor - renders a rich text editor
  16. select - renders a select
  17. submit - renders a submit button
  18. textarea - renders a textarea
  19. textfield - renders a textfield
  20. token - renders a hidden field to stop double-submission of containing forms
  21. updownselect - renders a select component with buttons to move the elements in the select component up and down