トップ 差分 一覧 ソース ヘルプ RSS ログイン

Introduction

イントロダクション

Clickは業務アプリケーション開発者のためのシンプルなJ2EE Webアプリケーションフレームワークです。

ClickはApache Licenseに基づくオープンソースプロジェクトです。

Clickはサーブレットリクエストを処理するためにイベントベースのプログラミングモデルを採用しており、レスポンスのレンダリングにはVelocityを利用します。

このフレームワークはClickServletというリクエストディスパッチャとして振る舞う単一のサーブレットを使用します。リクエストが到達するとClickServletはリクエストを処理するためにPageオブジェクトを生成し、その後、結果をレンダリングするためにVelocityテンプレートを使用します。

ページはリクエストごとに新たなインスタンスが生成され、シンプルかつスレッドセーフなプログラミング環境を提供します。

Clickがどのように動作するのかを理解する最もよい手段は実際にサンプルを見てみることでしょう。

 Hello Worldのサンプル

ClickにおけるHello Worldサンプルは以下のようになります。

まず最初に用意するのはHelloWorldページクラスです:

次にhello-world.htmというページテンプレートを作成します:

最後にhello-world.htmへのリクエストをHelloWorldページクラスへマッピングするようアプリケーションに伝えるためのclick.xmlという設定ファイルを用意します。

実行時にClickServletは GET hello-world.htm というリクエストをexample.page.HelloWorldクラスにマッピングし、新しいインスタンスを作成します。HelloWorldページは新しいpublic Dateオブジェクトを作成します。このDateオブジェクトはtimeという名前で自動的にページモデルに追加されます。

ページモデルはテンプレートとマージされ、$timeというパラメータはDateオブジェクトで置き換えられます。Velocityは以下のようにマージされたテンプレートをレンダリングします。

 Control Listener のサンプル

ClickはUI機能を提供するControlライブラリも提供しています。

その中でよく使われるもののひとつに、ActionLinkコントロールがあります。これは、Pageオブジェクトのメソッドを呼び出すことができるHTMLリンクを生成します。

このページクラスで、myLinkというActionLinkのインスタンスを生成し、そのリスナにページのメソッドであるMyLinkClick()を指定しています。このページを訪れたユーザーが、このmyLinkコントロールをクリックすると、onMyLinkClick()メソッドが実行されます。

コントロールのリスナメソッドは、どのような名前でも構わないのですが、返り値はbooleanである必要があります。その値によって、ページのイベント処理が続行されるべきかどうかを指定します。このコントロールリスナパターンは、匿名内部クラスを定義する必要も無く、手軽なアクションリスナを提供します。

上の例に話を戻すと、このページのテンプレートでHTMLのリンクを定義し、myLinkコントロールをリンクのhref属性として出力します。

このページを実際に実行すると、以下のようにレンダリングされます。

このリンクをクリックすると、onMyLinkClick()メソッドが実行されます。このメソッドは、msgの値を作成し、その値がページに表示されます。

Table のサンプル

Clickのコントロールの中で特に便利なのがTableコントロールです。

customersページにおけるTableの使用例が以下になります。

このページのコードで、Tableコントロールは宣言され、テーブルのHTMLのclassをセットし、そしてテーブルの列であるColumnオブジェクトを定義しています。このコンストラクタの中で、列の名前を指定しています。これはテーブルの列のヘッダーとして用いられ、またレンダリングすべき行オブジェクトのプロパティを指定します。

そして最後に、テーブルへデータを配置します。PageのonRender()メソッドをオーバーライドしレンダリングする前にテーブルに行のリストをセットします。

ページのテンプレート側では、toString()メソッドが呼ばれてレンダリングされる$tableオブジェクトを単に参照するだけです。

ここでは$importも記述していますが、これによりテーブルがスタイルシートのヘッダーをインクルードできることになります。

このテーブルは、実行時に以下のようにレンダリングされます。

 高度なテーブルのサンプル

Tableコントロールは、以下の機能もあわせて提供しています。

  • 自動レンダリング
  • カラムの整形およびカスタムレンダリング
  • 自動ページネイション
  • リンクコントロールの利用

以下のコードは、より高度なテーブルの例になります。

このページでは、Tableコントロールが宣言されており、いくつかのColumnオブジェクトがテーブルのカラムとして追加されています。ActionLinkのインスタンスであるdeleteLinkは、"Action"カラムのデコレーターのひとつとして使われています。このコントロールがクリックされたときにこのページのonDeleteClick()メソッドが呼び出されます。最後にonRender()メソッドがありますが、実際に出力される前にテーブルコントロールの各行のデータを取り出しています。

ページテンプレートでは、toString()メソッドが呼ばれてレンダリングされる$tableオブジェクトを単に参照するだけです。

実行するとこのTableは以下のようにレンダリングされます。

この例では、DeleteリンクをクリックするとonDeleteClick()メソッドが呼び出されてその行に相当するcustomerのレコードが削除されます。

 Formのサンプル

FormFieldコントロールもまた、Click Frameworkではよく使用されます。

以下のSimpleFormページは、これらの使用例になります。

このサンプルコードのでは、ページのコンストラクタでTextFieldSubmitボタンをひとつずつフォームに追加しています。ページのメソッドは、フォームのコントロールリスナとしてセットされています。また、この例ではページのpublicなformというフィールドが自動的にコントロールのリストに追加されることに注意してください。

次はSimpleFormのテンプレートであるsimple-form.htmです。Clickアプリケーションは自動的にsimple-form.htmテンプレートとSimpleFormクラスを関連付けます。

SimpleForm が最初にリクエストされたとき、$formは以下のように自分自身をレンダリングします:

ユーザがユーザ名を入力せずにOKボタンを押してフォームを送信したとします。ClickServletは新しいSimpleFormページを作成し、フォームコントロールを処理します。

フォームコントロールは各フィールドを処理し、エラーがあることを検出します。次にOKボタンが押されたことによってonSubmit()イベントハンドラが呼び出されます。しかし、フォームにエラーがあるのでこのメソッドはtrueを返し、フォームはフィールドのバリデーションエラーをレンダリングします。

ポストやバリデーションのサイクルでは、formが入力された状態を自動的に保持していることに注意してください。

さて、ユーザーがユーザー名を入力しOKボタンをクリックすると、formは受理されてonSubmit()メソッドでmsgをページモデルに追加します。以下のようにレンダリングされます。

 高度なフォームの使用例

以下のAdvancedFormページは、Form、Field、そしてFieldSetを利用した例になります。

まず、コンストラクタでFormのセットアップを実施します。このフォームの"investment"項目はSelectであり、ページのonInit()メソッドで選択項目を生成しています。このonInit()の時点で、CustomerServiceのようなページの依存関係にあるものも利用可能になっているはずです。

この例では、ページのパブリックなフィールドであるformが自動的にコントロールのリストに追加されています。また同様にmsgフィールドはページのモデルに追加されます。

次にこのAdvancedFormのテンプレートであるadvanced-form.htmを見てみましょう。Clickアプリケーションでは自動的にこのadvanced-form.htmをAdvancedFormクラスに結び付けます。

このページが最初にリクエストを受けたときには、$formは以下のように出力されます。

この例でOKボタンを押すと、onOkClicked()メソッドが実行されます。onOkClickedメソッドの中で、formがvalidならば、新しいcustomerオブジェクトが生成され、FormのcopyTo()メソッドを使いformの各フィールドの値は新しいオブジェクトにコピーされます。そしてcustomerオブジェクトは保存され、各フィールドの値はクリアされ、通知用メッセージをセットしています。

もしCancelボタンを押すと、リクエストはHomePageへリダイレクトされます。

フォームのレイアウトについて

このサンプルではフォームとフィールドのHTMLを自動的にレンダリングするためにフォームコントロールを使用しました。これは画面を迅速に構築するためのとても便利な機能です。そして、フォームコントロールは多くのレイアウトオプションを提供します。詳細についてはClickのサンプルのForm Propertiesデモを参照してください。

詳細なページデザインを行なう必要がある場合、ページテンプレートにおいてフォームやフィールドのレイアウトを明示的に指定することもできます。より詳細な情報についてはFormクラスのJavadocを参照してください。