Wicket & HTML5: Required and Placeholder attributes

HTML5 introduced some new markup elements. This post shows how two of those can easily be integrated in a web application based on Apache Wicket.

The required flag

The new required flag looks like this:

<input type="text" required/>

If the browser comes across this flag, it will mark the input field somehow if it is empty (you can decide how it will be marked by using CSS).

Wicket already comes with a RequiredTextField, which uses a server-side validator to check if the user has typed in some text. Sadly, it does not include the new flag. This is easily amended: we simply subclass RequiredTextField:

public class Html5RequiredTextField&lt;T&gt; extends RequiredTextField&lt;T&gt; {</pre>
  // ... constructors

  @Override
  protected void onComponentTag(final ComponentTag tag) {
    tag.put("required", true);
    super.onComponentTag(tag);
  }
}

By overriding onComponent(), we tell the new RequiredTextField to output ‘required=”true”‘. Et voilá, our first HTML5 Wicket component. That was easy. On to the next feature.

The placeholder text

HTML5 supports placeholder text in any input elements:

<input type="text" placeholder="Placeholder text..."/>

A browser displays the placeholder text if the user has not entered anything yet. Teaching Wicket to use the placeholder is the same story as before…simply subclass an existing Wicket component and override the onComponentTag() method:

public class Html5PlaceholderTextField<T> extends TextField<T> {
  private final String placeholder;

  public Html5PlaceholderTextField(String id, String placeholder) {
    super(id);
    this.placeholder = placeholder;
  }

  // other constructors (each with placeholder parameter)

  @Override
  protected void onComponentTag(final ComponentTag tag) {
    tag.put("placeholder", this.placeholder);
    super.onComponentTag(tag);
 }
}

This is not a very flexible solution however, since you would have to subclass each type of input component (NumberTextField, EmailTextField, …) to teach them the placeholder attribute. A more flexible approach is the use of a Behavior:

public class PlaceholderBehavior extends Behavior {
  private final String placeholder;

  public PlaceholderBehavior(String placeholder) {
    this.placeholder = placeholder;
  }

  @Override
  public void onComponentTag(Component component, ComponentTag tag) {
    tag.put("placeholder", this.placeholder);
  }
}

This behavior can be added to every input object like this:

EmailTextField mailField = new EmailTextField("myField");
mailField.add(new PlaceholderBehavior("Type your mail address here...");

Let’s hope the wicket devs include these features in one of the next minor releases, since it it would be no effort at all.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s