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を使います。


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