Teeda

Teedaの入門記を書きます。 blogで書いていたけど、皆で書けるように。

環境作り

Teeda入門を試すのに必要な環境作りに付いては Teeda/gettingStartedSetup を参照して下さい。

Teedaとは

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クラスが対応します。

この辺はサンプルを見つつ、学習するのがよいと思うので、次節以降解説します。

最初の一歩

  1. まずは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

あとで移行する。

配置について

あとで移行する。

inputText

あとで移行する。

submitと画面遷移(do)

あとで移行する。

submitと画面遷移(go)

あとで移行する。

submitと画面遷移(jump)

あとで移行する。

Validation

あとで移行する。

Validatorの種類について

あとで移行する。

簡単なアプリの作成

では、今までに説明してきた機能を振り返ってみて、 簡単な足し算アプリを作成してみましょう。 仕様としては、足し算を行ってボタンを押下すると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

今回はエラーメッセージについてです。 Teedaでは、エラーメッセージを出すときに大きく2つの選択肢があります。

  1. 個別の入力項目に対してエラーメッセージを表示する
  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を使います。

AllMessagesは、Validationに引っかかった全てのエラーメッセージを 表示します。「全ての」の意味をちょっと説明する必要があります。 Teedaでは、エラーメッセージを大きく2つに分類しています。  ・idがついたコンポーネントに紐づくエラー  ・idがついたコンポーネントに紐づかないエラー

前者は、arg1Messageなどで定義しているものたちだと思ってください。 後者はそれ以外で発生したエラー全てをさします。 AllMessagesはこれら全ての例外を一括で表示します。

一方Messagesは、どういったものなのでしょうか。 Messagesは上記の後者だけを表示します。 つまりidがついたコンポーネントのエラーを表示したいときは 適切な場所にmessageを埋め込まないといけません。 このあたりは画面表示上の都合で使い分けることを想定しています。

Converter

SelectOneMenu

SelectOneRadio

SelectBooleanCheckbox

SelectManyCheckbox

Foreach

Grid

Teedaの状態維持のポリシー

ItemsSaveと状態維持

Teedaのライフサイクル

PRGパターンについて

initializeメソッド、prerenderメソッド

拡張input(金額入力)

拡張input(日付入力)

エラーページ

エラーメッセージの表示と集約

Tigerでのアノテーション

DynamicProperty

idの細かいルール

label

title

TakeOverアノテーション

double submit防止(doOnce)

doFinish

Teeda Extensionの拡張ポイント

各規約詳細

Ajaxについて

TeedaAjaxについて、書いていきます。

Portletについて

Tips

内部構造

テストについて

Teedaで進める開発スタイル

SmartDeployの切り替え方

Seasar2.4の新機能の一つにSmartDeployというものがあります。

これによって、開発者がdiconを書いてコンポーネントを登録する必要はほとんどなくなり、

ほんとうにしなければならない開発に専念することができます。

SmartDeployは大きく3種類に分かれます。

  1. HotDeploy
  2. CoolDeploy
  3. WarmDeploy

TeedaでのDoltengの使い方

ご要望

ご要望、フィードバック等は下記日記のコメントに残してもらえれば 極力取り入れます。

http://d.hatena.ne.jp/shot6/

その他

Teeda1.1に向けて


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