[[Teeda]] Teedaの入門記を書きます。 blogで書いていたけど、皆で書けるように。 #contents * 環境作り [#ec8afccf] Teeda入門を試すのに必要な環境作りに付いては [[Teeda/gettingStartedSetup]] を参照して下さい。 * Teedaとは [#e88a6d02] TeedaはJSF実装をベースにしたWebアプリケーションフレームワークです。 Teedaは大きく分けて2つのpartがあります。 ・Teeda Core:JSF1.1の実装 ・Teeda Extension:HTMLテンプレートを持ったJSF拡張フレームワーク 基本的にお奨めの使い方はTeeda Core、Teeda Extensionを共に使っていただく使い方です。 が、Teeda Coreだけでも純粋なJSF実装としてお使いいただけます。 JSFは実はServlet以外にもPortletの方にも対応することが仕様で義務付けられていますが そちらの面もid:shinsuke_sugayaさんを中心にサポートいただいていますm(_ _)m では本題に戻りまして。。。 Teeda ExtensionはPage駆動アーキテクチャに基づいていて、記述するのは 基本的に以下の2つだけです。 ・Pageクラス(ただのPOJOクラス。クラス名をPageで終える必要がある) ・HTML(基本的にidをふるだけ。) 1HTMLファイルに対して、1Pageクラスが対応します。 この辺はサンプルを見つつ、学習するのがよいと思うので、次節以降解説します。 * 最初の一歩 [#o65972e7] +まずはHello Worldで基本的な動きをつかんでみましょう。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Hello</title> </head> <body> Hello World!!! </body> </html> このシンプルなHTMLをPageクラスとマッピングさせてみましょう。 HTMLの方は簡単です。 Mappingして動的に変えたい項目にidをつけたタグを振るだけです。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Hello</title> </head> <body> Hello <span id="name">World!!!</span> </body> </html> これをただ単にブラウザで見るとHello Worldと表示されます。 ではこれに対応するPageクラスを作成しましょう。 Pageクラスを作成するときには、EclipseプラグインDoltengを使うと便利です。 (Doltengは下記サイトから取得できます。) http://eclipse.seasar.org/updates/3.1beta/ Doltengをインストールして、Ctrl+5を押してみましょう。 なにやらダイアログが表示されます。このダイアログでPageクラスを作成することができます。 DoltengではHTMLの内容を読み込んで、Pageクラスに必要そうなプロパティを 自動的に追加したPageクラスを作成してくれます。 また、QuickJUnitにおけるCtrl+9でテストクラスへの移動が出来るように Ctrl+5でDoltengではPageクラス←→HTML間を移動できます。 (Pageがない場合にダイアログが表示されPageクラスを作成するかを聞いてきます。) ではPageクラスのプロパティnameに"Seasar2"と入力しておきましょう。 package examples.teeda.web.hello; public class HelloPage{ private String name = "Seasar2"; public String getName() { return name; } public void setName(String name) { this.name = name; } } これで準備は整いました。 Tomcatを起動して、localhost:8080/teeda-html-example/view/hello/hello.html というように表示してみると Hello Seasar2 と表示されます。 このとき何が起きているのでしょうか? ひとつひとつ見ていきましょう。 まずTeedaの基本は全てidです。 idでマッピングされない項目は、動的な処理を行う集合(コンポーネント)として みなされません。 idがない場合全て単なるテキストとして処理されます。 上記の例で言えば、spanタグにnameというidをふることで あ、このタグは動的な値を扱うのだとTeedaは解釈します。 idの振り方には規約がありますが、それはこの後一つ一つ見ていけば すぐに覚えられます。また、そのリファレンスも十二分に準備する予定です。 *outputText [#pb211f76] あとで移行する。 *配置について [#d37b6e2a] あとで移行する。 *inputText [#yfdb00e1] あとで移行する。 *submitと画面遷移(do) [#b30b3fe2] あとで移行する。 *submitと画面遷移(go) [#m5e82a6f] あとで移行する。 *submitと画面遷移(jump) [#s9fba02b] あとで移行する。 *Validation [#o30f5eb5] あとで移行する。 *Validatorの種類について [#s1d0874f] あとで移行する。 *簡単なアプリの作成 [#ge733f40] では、今までに説明してきた機能を振り返ってみて、 簡単な足し算アプリを作成してみましょう。 仕様としては、足し算を行ってボタンを押下するとdoCalculateメソッドが 呼ばれます。未入力または桁数が3桁に満たない場合は、Validationエラーとします。 HTMLはこのようになります。 (まだ説明していない機能やディティールの部分も少し含まれますが、 本質は変わりません。後でまた説明します。) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title id="aaa">Add</title> </head> <body> <form id="addForm"> <div> <span id="messages"></span> </div> <table> <tr> <td></td><td><input type="text" id="arg1" title="INPUT1"/></td> <td><span id="arg1Message"></span></td> </tr> <tr> <td> + </td> <td><input type="text" id="arg2" title="INPUT2"/></td> <td><span id="arg2Message"></span></td> </tr> <tr> <td> = </td> <td><span id="result"></span></td> </tr> </table> <input type="submit" value="calculate" id="doCalculate"/> <input type="submit" value="back to start" id="jumpStart_index"/> </form> </body> </html> これに対応するページクラスを作りましょう。 idに対応づく変数とアクセサはDoltengが作成してくれるので、あとは 必要なValidatorを記述するだけです。 package examples.teeda.web.add; public class AddPage { public static final String arg1_TRequiredValidator = null; public static final String arg1_lengthValidator = "minimum=3"; public static final String arg2_TRequiredValidator = null; public static final String arg2_lengthValidator = "minimum=3"; private int arg1; private int arg2; private int result; public int getArg1() { return arg1; } public void setArg1(int arg1) { this.arg1 = arg1; } public int getArg2() { return arg2; } public void setArg2(int arg2) { this.arg2 = arg2; } public int getResult() { return result; } public void setResult(int result) { this.result = result; } public String doCalculate() { result = arg1 + arg2; return null; } } 実際にTomcatを立ち上げて、確認してみましょう。 3桁入力しないとエラーでValidationが効いているはずです。 * Message/AllMessages/Messages [#w5bf6dd4] 今回はエラーメッセージについてです。 Teedaでは、エラーメッセージを出すときに大きく2つの選択肢があります。 +個別の入力項目に対してエラーメッセージを表示する +画面全体で共通の領域にエラーメッセージを表示する まず1の場合はどうするかというと、対象の入力項目のid+Messageと つけます。 (すでに前回の例で実は出てきていますが。) <tr> <td></td><td><input type="text" id="arg1" title="INPUT1"/></td> <td><span id="arg1Message"></span></td> </tr> 入力項目arg1に対して、そのエラーメッセージを表示させたいときは arg1Messageとしてください。 これでバリデーションエラー時にarg1に エラーがあった場合はその内容を表示することが出来ます。