You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

An interactive HelloWorld

The next thing we want to see is some interaction. Let us make the first example a little bit more dynamic.

We are going to extend our example to display an interactive message. We want the user to input what message should be displayed, and use that input to render our label with.

The HTML

<html>
  <body>
    <span wicket:id="message">Message goes here</span>
    <form wicket:id="messageInputForm">
    	<input type="text" wicket:id="messageInput"/>
    	<input type="submit" value="update"/>
    </form>
  </body>
</html>

In the above markup you can see three Wicket components referenced: 'message', 'messageInputForm', and 'messageInput'. So, besides a label, we now have a form and input field.

The Java code

package mypackage;

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.TextField;
import wicket.model.IModel;
import wicket.model.Model;

public class HelloWorld extends WebPage
{
  public HelloWorld()
  {
    IModel messageModel = new Model("Hello World!");
    add(new Label("message", messageModel));
    add(new MessageForm("messageInputForm", messageModel));
  }

  private final class MessageForm extends Form
  {
    public MessageForm(String id, IModel model)
    {
      super(id);
      add(new TextField("messageInput", model));
    }

    protected void onSubmit()
    {
      // nothing to do here as the model is automatically updated
    }
  }
}

The first thing you should notice is the nesting of components. The MessageForm is a sibling of the label, so it has to have a different id. The text field is a child of the MessageForm and thus has a different scoping. As the text field is set as a child of the form, it needs to be a nested tag in the form as well.

The next thing to notice is the use of a Model object. As said earlier, every Wicket component has a model. What a component uses its model for, depends on the component. A label uses its model to render the tag body, but a ListView expects a java.util.List as the model object, and loops through its elements. A model can be anything, as long as it implements wicket.model.IModel.

To process user input, you can use a Form. Forms update the models of their nested FormComponent automatically. It does this by calling setObject(...) on the object with the input for that specific component. Hence, when a user pushes the submit button, the model of the text field is updated with the value that was in the HTML input text field. As, in this example, the label and the text field share the same model, when the model is updated via the text field, the label will render the new model object value as well.

  • No labels