値を入力し、次のページでその値を表示する。(ページ遷移)
前回作ったものは Form が表示されているページと同じページに入力した値が表示されましたが、今度は別のページに表示させる、つまりページの遷移をさせてみます。
テキストフィールドに入力した値を次のページに表示させる
１つ目のページを、HelloWorld.html、次のページを、NextPage.html として以下のように作ります。
src/helloworld/HelloWorld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Wicket HelloWorld</title>
</head>
<body>
<form wicket:id = "form">
入力してください。<br>
<input type="text" wicket:id = "msgInput">
<input type = "submit" value="次へ"/>
</form>
</body>
</html>
src/helloworld/NextPage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>次のページ</title>
</head>
<body>
あなたが入力したのは「<span wicket:id="message">Message goes here</span>」です。
</body>
</html>
src/helloworld/HelloWorld.java
HelloWorld.html 用に Form の要素を追加します。
package helloworld;
import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.TextField;
import wicket.model.Model;
public class HelloWorld extends WebPage {
public HelloWorld() {
add(new HelloForm("form"));
}
public final class HelloForm extends Form {
Model message = new Model();
public HelloForm(final String id) {
super(id);
add(new TextField("msgInput", message));
}
public final void onSubmit() {
setResponsePage(new NextPage(message));
}
}
}
submit を押された時の処理として、次のページへの遷移の処理を組み込んでいます。
public final void onSubmit() {
setResponsePage(new NextPage(message));
}
の箇所です。setResponsePage() で、次のページを指定しています。
また、NextPage クラスが入力値を処理できるように、message を渡しています。
src/helloworld/NextPage.java
package helloworld;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.model.Model;
public class NextPage extends WebPage {
public NextPage(Model message) {
add(new Label("message", message));
}
}
コンストラクタで、message を受け取り、HTML 上の、message という id にひもづけます。
以上で、１画面目のテキストフィールドに入力した値が、２ページ目に表示されるという動きになります。
入力テキストフィールドを複数にする
入力値を扱うのに、Model ではなくPropertyModel を使えば複数の入力テキストフィールドを扱えそうです。
入力テキストフィールドを２つに増やしてみます。
src/helloworld/HelloWorld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Wicket HelloWorld</title>
</head>
<body>
<form wicket:id = "form">
姓<input type="text" wicket:id = "lastname"><br>
名<input type="text" wicket:id = "firstname"><br>
<input type = "submit" value="次へ"/>
</form>
</body>
</html>
src/helloworld/NextPage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>次のページ</title> </head> <body> <span wicket:id="lastname">姓</span> <span wicket:id="firstname">名</span>さん、こんにちわ。 </body> </html>
src/helloworld/HelloWorld.java
package helloworld;
import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.TextField;
import wicket.model.PropertyModel;
import wicket.util.value.ValueMap;
public class HelloWorld extends WebPage {
public HelloWorld() {
add(new HelloForm("form"));
}
public final class HelloForm extends Form {
ValueMap properties = new ValueMap();
public HelloForm(final String id) {
super(id);
add(new TextField("lastname", new PropertyModel(properties, "lastname")));
add(new TextField("firstname", new PropertyModel(properties, "firstname")));
}
public final void onSubmit() {
setResponsePage(new NextPage(properties));
}
}
}
PropertyModel に渡すオブジェクトは Bean を作って渡すのではなく、wicket.util.value.ValueMap を作って渡しています。Wicket のサンプルソースに含まれている signin で使われていたので使ってみました。
src/helloworld/NextPage.java
package helloworld;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.model.PropertyModel;
import wicket.util.value.ValueMap;
public class NextPage extends WebPage {
public NextPage(ValueMap properties) {
add(new Label("lastname", new PropertyModel(properties, "lastname")));
add(new Label("firstname", new PropertyModel(properties, "firstname")));
}
}
姓と名の２つの入力欄が表示され、次の画面では姓名が表示されます。
src/helloworld/HelloWorld.java の onSubmit() の中で、入力値に対する何らかの処理を入れてから次のページに行くようにすれば、「何か」するものができそうです。
今回作ったものは、HelloWorld → NextPage という遷移をするのですが、Form のボタンを押したというイベント(リクエスト)を最初に受け取る(処理する)のが、HellowWorld 側に記述(onSubmit())されています。
私が今までやってきた方法だと Form のリクエストは、NextPage 側で受け取る(処理する)ことになりますので NextPage側に処理を書きます。ここが違います。
まるで、GUI のアプリケーションプログラムのようです。