今回からは，Wicketを使って実際にアプリケーションを作成することで，Wicketによるアプリケーション作成方法を紹介していきます。

業務的なアプリケーションを作っても面白くもないでしょうし，今流行のTwitterのタイムラインを表示するアプリケーションを作ろうと思います。

twitter4jを使ったアプリケーションを作る

とはいえ，この連載で一から十まで解説していくと何回あっても足りません。作成済みのアプリケーションのソースコードを追うことで，Wicketの使い方を紹介しようと思います。

次のURLから，完成したアプリケーションのソースコードをダウンロードできます。

• 本連載で解説するアプリケーションのソースコード

このアプリケーションは，いままでのサンプルと同じようにmvn jetty:runコマンドによって起動することができます。

アプリケーションを起動して「http://localhost:8080/wicket-sample/」にアクセスすると，ログイン画面が表示されます。あなたのログインIDとパスワードを入力して確定すると，あなたのTwitterタイムラインが表示されます（※1⁠）⁠。

このアプリケーションはWicketのサンプルとして用意したものであって，Twitter APIの解説用のものではありません。Twitterへの接続はすべて，twitter4jというライブラリを介して行っています。twitter4jを使うと，TwitterのAPIをほとんど意識することなく，Javaプログラム上からTwitterの情報を扱うことができます。

※1

このアプリケーションのログイン認証は，TwitterのログインAPIを直接呼び出しており，アプリケーション内部にはユーザの情報を一切残しません。しかし，本格的なTwitterアプリケーションを作成するには，OAuthによる認証をサポートするなど，より本格的な認証が必要でしょう。

フォームによる入力の受け付け

今回取り上げるのはTwitterにログインする処理です。ログイン画面は次のような非常にシンプルなものです。

非常にシンプルな画面ではありますが，このプログラムにはHTMLフォームを使ってユーザ入力を受け付け，検証し，ログイン成功すればタイムラインページに遷移する，という一連の流れが組み込まれています。このプログラムを理解することで，Wicketがユーザ入力をどのように扱うか，が理解できます。

フォームの構築

ダウンロードしたプロジェクトフォルダ内の「src/main/java/jp/gihyo/wicket/page/Login.java」ファイルと「src/main/java/jp/gihyo/wicket/page/Login.html」ファイルが，ログインページを表示するプログラムとHTMLです。

Wicketでは，HTMLフォームはFormというクラスで表します。HTML要素<form>に対してwicket:idを付け，WicketのFormオブジェクトを適用することで，フォームをプログラムから制御できるようになります。

HTMLフォーム上にあるすべての要素は，Formオブジェクトの子要素になります。いままでのサンプルではLabelコンポーネントをPageに対してaddしてきましたが，HTML上で<form>の子要素となっている要素は，Wicketプログラム上でもFormの子コンポーネントとするため，PageではなくFormにaddします。Wicketでは，HTML要素の階層構造とオブジェクトの階層構造は一致するのです。

Login.javaの中に，次のような行があります。

Form<Void> form = new Form<Void>("loginForm");
add(form);

TextField<String> loginNameField = new TextField<String>("loginName", new PropertyModel<String>(this, "userName"));
loginNameField.add(new PatternValidator("[a-zA-Z1-9_]*"));
loginNameField.setRequired(true);
form.add(loginNameField);

PasswordTextField passwordField = new PasswordTextField("password", new PropertyModel<String>(this, "password"));
passwordField.add(StringValidator.maximumLength(20));
passwordField.setRequired(true);
form.add(passwordField);

Loginクラスのコンストラクタ内での処理です。まず最初に，Formオブジェクトを生成しています。Login.htmlを見ると，<form>要素には「loginForm」というwicket:idがつけられています。そのため，Formの第1引数であるIDには，同じ「loginForm」を渡します。

そのあとにTextFieldというコンポーネントと，PasswordTextFieldというコンポーネントを生成しています。

loginNameFieldとpasswordFieldはLoginページにではなく，Formオブジェクトに対してaddされていることに注目してください。HTML要素の階層と合わせているのです。

もし階層を誤ると，Wicketはエラーメッセージを表示して停止します。Wicketのエラーメッセージは総じて非常に細かく的確に問題を表示しますので，英語だとおそれずにじっくり読んでみてください。

試しに，サンプルプログラムのTextFieldに渡す第1引数を「loginName」から「logimName」に変更すると，Wicketの表示する詳細なエラーメッセージを確認することができます。