Wicketで始めるオブジェクト指向ウェブ開発

第3回 WicketでTwitterアプリケーションを作る(前編)

この記事を読むのに必要な時間:およそ 5 分

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

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

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

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

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

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

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

図1 Twitterアプリケーションのイメージ

図1 Twitterアプリケーションのイメージ

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

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

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

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

図2 ログイン画面イメージ

図2 ログイン画面イメージ

非常にシンプルな画面ではありますが,このプログラムには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の中に,次のような行があります。

リスト1 Formへの子コンポーネント適用

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の表示する詳細なエラーメッセージを確認することができます。

著者プロフィール

矢野勉(やのつとむ)

フリーランスのプログラマ。Wicket-ja主催。

ウェブ・アプリケーションの開発を中心にさまざまな案件に関わってきました。現在はWicketによる開発を支援しています。

URLhttp://d.hatena.ne.jp/t_yano/

著書

コメント

コメントの記入