{scrollbar}

Forms and Form Components

Main article: Forms and Validation

Contents

What is the t:formdata hidden field for?

In Tapestry, rendering a form can be a complicated process; inside the body of the Form component are many of field components: TextField, Select, TextArea, and so forth. Each of these must pull data out of your data model and convert it to the string form used inside the client web browser. In addition, JavaScript to support client-side validation must be generated. This can be further complicated by the use of Loop and If components, or made really complicated by the use of Block (to render portions of other pages: this is what the BeanEditForm component does).

Along the way, the Form is generating unique form control names for each field component, as it renders.

When the client-side Form is submitted, an event is triggered on the server-side Form component. It now needs to locate each component, in turn, inform the component of its control name, and allow the component to read the corresponding query parameter. The component then converts the client-side string back into a server-side value and performs validations before updating the data model.

That's where t:formdata comes in. While components are rendering, they are using the FormSupport environmental object to record callbacks:

public interface FormSupport extends ClientElement
{
    /**
     * Stores an action for execution during a later request.  If the action contains any mutable state, it should be in
     * its final state before invoking this method and its internal state should not be changed subsequently.
     */
    <T> void store(T component, ComponentAction<T> action);

    /**
     * As with {@link #store(Object, org.apache.tapestry5.ComponentAction)}}, but the action is also invoked
     * immediately. This is useful for defining an action that should occur symmetrically in both the render request and
     * the form submission's event request.
     *
     * @param component component against which to trigger the action
     * @param action    the action that will be triggered (and passed the component)
     */
    <T> void storeAndExecute(T component, ComponentAction<T> action);

The ComponentAction objects are the callbacks. t:formdata is simply an object stream of these callbacks, compressed and encoded in Base64. When using Ajax, you may see multiple t:formdata hidden fields (they are processed one after another).

How do I change the label for a field on the fly?

Tapestry tries to be smart about generating the label string for a field. It has some smart default logic, first checking for the component-id-label in the container's message catalog, then ultimately converting the component's id into a user-presentable label.

You can override the label in two ways:

First, you can supply a body to the Label component:

  <t:label for="username">${usernameLabel}</t:label>
  <t:textfield t:id="username"/>

Here, the component class must provide a usernameLabel property. That property becomes the text of the label. An implementation of the property might look something like:

  public String getUsernameLabel()
  {
    return systemPreferences.useEmailAddressForUserName() ? "Email address" : "User name";
  }

However, if there are any validations on the field, the error message will include the default label (as discussed above).

To uniformly update the label both on the page, and in any validation messages, bind the TextField's label parameter:

  <t:label for="username"/>
  <t:textfield t:id="username" label="prop:usernameLabel"/>

The "prop:" prefix identifies that "usernameLabel" is to be interpreted as a property expression (normally, the binding for the label parameter is interpreted as a string literal). The Label component gets the text it displays from the TextField component, and the TextField component uses the same text when generating server-side and client-side validation messages.

Tapestry focuses on the wrong field in my form, how do I fix that?

Tapestry normally figures out the correct field in your form to initially receive focus; this is based on assigning a FieldFocusPriority to each field as it renders, which works out to the following logic:

• The first field which has an error
• Or, the first field which is required
• Or, the first field

Occasionally, due a wide range of factors beyond Tapestry's control, it's selection will not be quite what you want, and it is necessary to supply an override. The information is tracked inside the JavaScriptSupport environmental. It's just a matter of injecting the component so that you can determine its client id, then informing JavaScriptSupport about your override.

Here's an example

  <t:textfield t:id="email" t:mixins="OverrideFieldFocus" .../>

The OverrideFieldFocus mixin forces the email field to be the focus field, regardless.

{scrollbar}