サンプルプロジェクトの実行
完成したら、実際にプロジェクトを実行してみましょう。アクセスするアドレスは、「http://localhost:8080/wic_sample/」となります。これで、タイトルの下に四角い枠でテキストが表示されるページが現れます。
実際にソースコードを見れば分かることですが、Labelに設定した<h1>や<p>タグはそのまま出力されますが、<span>タグは消え、代わりに<table>を使った枠線のタグが生成されているはずです。このように、作成したHTMLは、あくまでテンプレートであり、WebPageクラスに用意したコンポーネントによりタグが生成されたり変更されたりして、実際に表示されるWebページを生成していくのです。
しかし、たとえJavaクラスのコンポーネントによって生成されるにしても、HTMLテンプレートに記述されるのはすべて「きちんとしたHTML」だけです。JSPのように、本来HTMLには存在しない<? ?>タグや、${hoge}といった埋め込み変数などは一切存在しません。HTMLテンプレートのソースコードは完全にHTMLのコードであり、それ以外の要素はないのです。ただ、ちょっと余計な属性が追加されているだけで。
このことは「HTMLテンプレートの作成を、完全にデザイナーに任せてしまうことができる」ということを意味します。StrutsやJSFなどですら、JSPページから完全にHTML以外の要素を取り除くことはできませんでした。「HTMLだけしかない」ということは、デザイナーがどのようにページデザインに手を加えても、プログラムには一切影響がない、ということです。Wicketでは、プログラムとデザインを完全に分離できるのです。
フォームの送信
今のものは、ただ画面に表示を行うだけのものでした。更に一歩進めて、フォームを送信し処理させるプログラムを作ってみましょう。まずは、先ほどのIndexPage.htmlを修正します。
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index Page</title>
<style type="text/css">
h1 {
background-color: #CCAAFF;
border-style: none none solid solid;
border-width: 0px 0px 2px 5px;
padding: 1px 5px 1px 5px;
font-size: 14pt;
}
</style>
</head>
<body>
<h1 wicket:id="title">Wicket Sample</h1>
<p wicket:id="label">loaded...</p>
<form wicket:id="form1">
<input type="text" wicket:id="field1" />
<input type="submit" wicket:id="submit" value="送信" />
</form>
</body>
</html>
ここでは、<form>タグでフォームを設置しています。またBoxBorder用のタグは消し、そのままメッセージを表示するようにしました。タグは増えていますが、シンプルですからお分かりでしょう。
注意すべきは、<form>タグです。通常、<form>ではactionやmethodの属性を用意しますが、ここではこうしたものは記述しません。ただ、wicket:idを用意するだけでOKです。続いて、WebPageクラスの修正をしましょう。IndexPage.javaのソースコードを次のように書き換えてください。
package jp.tuyano;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.*;
import org.apache.wicket.markup.html.form.*;
import org.apache.wicket.model.*;
public class IndexPage extends WebPage {
private CompoundPropertyModel<WebPage> formmodel;
private Model<String> fieldmodel;
private Model<String> labelmodel;
public IndexPage(){
Label title = new Label("title","Wicket Sample");
this.add(title);
labelmodel = new Model<String>("何か書いて。");
Label label1 = new Label("label",labelmodel);
this.add(label1);
formmodel = new CompoundPropertyModel<WebPage>(this);
Form<WebPage> form1 = new Form<WebPage>("form1",formmodel);
fieldmodel = new Model<String>();
TextField<String> field1 = new TextField<String>("field1",fieldmodel);
form1.add(field1);
Button submit = new Button("submit",new Model<String>()){
private static final long serialVersionUID = 1L;
@Override
public void onSubmit(){
submitNow();
}
};
form1.add(submit);
this.add(form1);
}
public void submitNow(){
String s = fieldmodel.getObject();
labelmodel.setObject("あなたは、" + s + "と書いた。");
}
}
完成したら、サーバからプロジェクトを公開し、動作を確認してみてください。フォームに何か入力してボタンを押せば、表示メッセージが変わります。
