Newuserguide意訳 - An interactive HelloWorld

wicket

An interactive HelloWorld

次は、Formを利用した簡単なサンプルを作ってみましょう。先ほど作成したサンプルを拡張して、もう少しダイナミックな動作するよう修正していきます。
今回のサンプルはユーザからデータを入力を受け付けたら、その文字列をラベルコンポーネントを利用して表示するというものになります。

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>

上記のHTMLでは３つのWicketコンポーネントが参照されるのがわかります："message"と"messageInputForm"と"messageInput"です。
前のサンプルではlabelのみを利用していましたが、今回はformとinputのフィールを使用します。

The Java code
package mypackage;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.IModel;
import org.apache.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
    }
  }
}

なにかに気がつきますか？おそらくコンポーネントをインナークラスで定義したネスト構造に気がつくはずです。MessageFormはLabelと同レベルのコンポーネントです。TextFieldはMessageFormの子要素であって、異なったスコープを持っています。TextField子要素のコンポーネントですが、HTMLでは先ほどまでと同じようにwicket:idでレンダリングの位置を定義する必要があります。

気付くべき次のことはモデルオブジェクトの用途です。以前に言ったように、すべてのWicketコンポーネントはモデルを持っています。ラベはがBodyをレンダリングするためのモデルを使います、しかしListViewがモデルオブジェクトとしてjava.util.Listの場合は、そしてその要素をループしすという動作をします。

ユーザーインプットを処理するために、Formクラスを使うことができます。その特定のコンポーネントのインプットにてオブジェクトのsetObject （・・・）に呼び出すことによって、実現します。ユーザーがサブミットボタン押すとき、テキストフィールドのモデルが HTMLにある値で最新のものにされることを動作します。この例では、ラベルとテキストフィールドが同じモデルを共有する、モデルがテキストフィールドによって更新されるとき、ラベルは同様に新型オブジェクト値をレンダリングするでしょう。

この例では、ラベルとテキストフィールドが同じモデルを共有する、モデルがテキストフィールドによって更新されるとき、ラベルは同様に新型オブジェクト値をレンダリングするでしょう。

目次へ