Wicket 7: Two elements with the same value


This is part 7 of a series about Wicket.

Let’s type something in a field, press submit and see what was typed in the same page.

Consider SamePage.html. First we need an input field to type in, accompanied with a submit button, surrounded by a form of course.

<form>
   <input type="text"/><input type="submit" value="OK"/>
</form>

We also need a span to display what we have just typed.

<form>
   <input type="text"/><input type="submit" value="OK"/>
</form>
<span style="color:coral"></span>

Let’s add wicket ids to <form>, <input> and <span>.

<form wicket:id="form">
   <input type="text" wicket:id="input"/><input type="submit" value="OK"/>
</form>
<span style="color:coral" wicket:id="output"></span>

So the form has id “form”, the input field “input” and the span “output”.

Here’s the complete SamePage.html

<html>
   <body>
      <form wicket:id="form">
         <input type="text" wicket:id="input"/><input type="submit" value="OK"/>
      </form>
      <span style="color:coral" wicket:id="output"></span>
   </body>
</html>

Now let’s build the associated Java class that IS-A WebPage. All the action happens in its constructor.

Here’s the form with id “form”.

final Form form = new Form("form");

Here’s the text field with id “input”.

final TextField input = new TextField("input");

And that’s the span (label) with id “output”.

final Label label = new Label("output");

Now, we follow the html markup: The form contains the input.

form.add(input);

The page contains the form,

add(form);

and the label.

add(label);

Now, to make input and label have the same value we simply provide a common Model.

final Model model = new Model();
final TextField input = new TextField("input", model);
final Label label = new Label("output", model);

This is the complete code of SamePage.java

public class SamePage extends WebPage {
   public SamePage() {
      final Model model = new Model();
      final Form form = new Form("form");
      final TextField input = new TextField("input", model);
      final Label label = new Label("output", model);
      form.add(input);
      add(form);
      add(label);
   }
}

Of course you may shorten the code by half with chaining, but this does not help debugging and maintenance.

public class SamePage extends WebPage {
   public SamePage() {
      final Model model = new Model();
      add(new Form("form").add(new TextField("input", model)));
      add(new Label("output", model));
   }
}

Let’s type something and submit.

A simple form

A simple form

The page refreshes as expected.

The span below the field repeats its value.

The span below the field repeats its value.

Review

  • Just provide the same Model to components that should have the same value.
  • You may take a look at TextField, Label and Form.

One Response to Wicket 7: Two elements with the same value

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

%d bloggers like this: