Wicket Examples - echo編 - - それなりの日記

「サンプルのソースを見る」の第2回、echo編。このサンプルでは、

PropertyModelというModelの使い方
Formの使い方

がなんとなくわかります(^_^;)。

アプリケーションクラス(EchoApplication.java)

まずは、アプリケーションクラスです。こちらは、ホームページクラスを返しているだけなので、割愛します。

Pageクラス(Echo.java)

次に、Pageクラスです。コンストラクタでは、コンポーネントを設定するわけですが、

Form、TextFieldというコンポーネント
PropertyModelというModel

を使っています。



	public Echo()

	{

		// This model references the page's message property and is

		// shared by the label and form component

		PropertyModel messageModel = new PropertyModel(this, "message");
		// The label displays the currently set message

		add(new Label("msg", messageModel));
		// Add a form to change the message. We don't need to do anything

		// else with this form as the shared model is automatically updated

		// on form submits

		Form form = new Form("form");

		form.add(new TextField("msgInput", messageModel));

		add(form);

	}

Formは、ここではidだけを引数にとっています。フォームの持つコンポーネント(ここではテキストフィールド)は、あるフォームに属していると考えられますので、自分の親となるFormに自分自身を設定します。
TextFieldは、type属性が"text"であるinput要素に対応するコンポーネントです。
PropertyModelは、コンポーネントに対応づけるものがBeanのプロパティであるModel、と言うことが出来ます。PropertyModelの第1引数に参照するJavaBeanを、第2引数に参照するプロパティ名を設定します。このModelを、

LabelコンポーネントのModelとして
Form内のTextFieldコンポーネントのModelとして

使用しています。このように同じPropertyModelを複数のコンポーネントで参照することで、プロパティの持つ値を共有することが出来ます。ここでは、フォームのテキストフィールドに入力された値が、submitボタンを押すことで、TextFieldコンポーネントに対応するModelに設定され、同じModelを参照するLabelコンポーネントの実際にinjectionされる値となります。

さて、サンプルではPropertyModelの第1引数に"this"を指定していますので、このPageクラス自体にmessageプロパティを用意する必要があります。



	private String message = "[type your message to the world here]";
	public String getMessage()

	{

		return message;

	}
	public void setMessage(String message)

	{

		this.message = message;

	}

HTMLテンプレートページ(Echo.html)

最後に、HTMLテンプレートページです。

<body>
    <span wicket:id="mainNavigation"/>

	<form wicket:id="form">
		<input type="text" wicket:id="msgInput" value="" size="50" />
		<input type="submit" value="set message" />
	</form>
    <span wicket:id="msg" id="msg">Message goes here</span>
</body>

form要素とtype属性が"text"のinput要素に、それぞれwicket:idが設定されています。ただ、type属性が"submit"のinput要素には、wicket:idが設定されていませんが、これでちゃんとテキストフィールドに入力された値をとばしているようです。

さて、このfrom要素には、action属性が設定されていません。いったいどこに飛ぶのでしょうか？

このサンプル動かすには、最初に「http://localhost:8080/wicket-examples/echo」にアクセスします。ここで、web.xmlを見てみましょう。

	<servlet>
		<servlet-name>EchoApplication</servlet-name>
		<servlet-class>wicket.protocol.http.WicketServlet</servlet-class>
		<init-param>
		  <param-name>applicationClassName</param-name>
		  <param-value>wicket.examples.echo.EchoApplication</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>EchoApplication</servlet-name>
		<url-pattern>/echo/*</url-pattern>
	</servlet-mapping>

とありますので、アプリケーションクラスが「wicket.examples.echo.EchoApplication」(これはサンプルごとに異なる。当然か)としてwicket.protocol.http.WicketServlet(これはどのサンプルでも同じ)が起動します。ここで、URLとアプリケーションクラス、Pageクラス、HTMLテンプレートページが対応付くようです。

次に、このサンプルをWebブラウザで表示した時のソースを見てみましょう。アプリケーションクラス、Pageクラスが案配よく動作して、HTMLテンプレートページをレンダリングした結果のソース、とも言えます。

	<form action="/wicket-examples/echo/?wicket:interface=:0:form::IFormSubmitListener"
			wicket:id="form" method="post" id="form">
		<div style="display:none">
			<input type="hidden" name="form:hf:0" id="form:hf:0" />
		</div>
		<input value="[type your message to the world here]"
			type="text" wicket:id="msgInput" size="50" name="msgInput"/>
		<input type="submit" value="set message" />
	</form>

HTMLテンプレートページをレンダリングした際に、action属性が埋め込まれるようです。ただし、クエリー文字列の部分("wicket:interface=:0:form::IFormSubmitListener")はナンの事やらさっぱり...まぁ、気にしなくていいのでしょうが。
あと、type属性が"hidden"のinput要素も追加されています。こちらも何に使うのかは分かりませんが...