[[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&nbsp;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&nbsp;<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に
エラーがあった場合はその内容を表示することが出来ます。


次に2の場合です。

画面全体でエラーメッセージの出す場所を統一して出す場合なども
よくあると思います。

そのような場合はAllMessagesまたはMessagesを使います。

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS