Teeda

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

環境作り†

まず、Teeda の動かせる環境を作りましょう。

実は、Teeda を動かす環境は簡単に作れます。 ひがさんのBlog -- Super Agile Web Development with Seasar2 に書かれている環境を準備すればＯＫです。 ^^) *

↑

インストール†

↑

Eclipse の設定†

↑

プロジェクトの作成†

これから使う Teeda プロジェクトを作成します。

これも、Dolteng プラグインの Chura Project ウィザード を使うと簡単にです。 ^^) *

↑

1. 新規プロジェクト†

ファイル→新規→プロジェクトで「新規プロジェクト」画面を表示います。下の画像のように Chura という項目があります。そこで Chura → Chura Project を選択し、「次へ」をクリック。

&ref(): File not found: "chura1.png" at page "Teeda/gettingStarted";

↑

2. Chura Project†

下のような「Create a Chura Project」画面が表示されますので

&ref(): File not found: "chura2.png" at page "Teeda/gettingStarted";

↑

3. プロジェクト完成†

2. の入力を行い「終了」を押すと、少しして 以下のようなプロジェクトが自動的に作成されます。面倒なパッケージ作成やライブラリーのコピー、ビルドパスの設定などは、まったく不要です。

&ref(): File not found: "chura3.png" at page "Teeda/gettingStarted";

↑

動作確認 (Hello World)†

作成した teeda-ex1 プロジェクトに html ファイルを作ってみます。

  1. src/main/webapp/view パッケージに hello フォルダーを作成します
  2. hello フォルダーに hello.html ファイルを作成
  3. hello.html の編集ウィンドウに以下のような 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>Hello</title>
</head>
<body>
Hello&nbsp;World!!!
</body>
</html>
    &ref(): File not found: "teeda1.png" at page "Teeda/gettingStarted";
  4. Tomcat を起動してみましょう。Tomcat→Tomcat起動
  5. コンソールに以下のような文字が表示されます。 
    2006/10/27 0:37:59 org.apache.catalina.core.AprLifecycleListener lifecycleEvent
情報: The Apache Tomcat Native library which allows optimal performance in production environments was not found on ....
2006/10/27 0:37:59 org.apache.coyote.http11.Http11BaseProtocol init
情報: Coyote HTTP/1.1を http-8080 で初期化します
 
  ・・・省略・・・

情報: Find registry server-registry.xml at classpath resource
2006/10/27 0:38:00 org.apache.catalina.startup.Catalina start
情報: Server startup in 1437 ms
  6. teeda-ex1 プロジェクトを Tomcatに登録します。(teeda-ex1プロジェクトを選択し、右クリック→Tomcatプロジェクト→コンテキスト定義の更新)。コンソールに以下のような文字が表示されます。
2006/10/27 0:49:12 org.apache.catalina.loader.WebappClassLoader validateJarFile
情報: validateJarFile(D:\EclipseWork3\teeda-ex1\src\main\webapp\WEB-INF\lib\geronimo-jsp_2.0_spec-1.0.jar) - jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending class: javax/servlet/jsp/JspPage.class
DEBUG 2006-10-27 00:49:12,718 [ContainerBackgroundProcessor[StandardEngine[Catalina]]] S2Container initialize start

  ・・・省略・・・

DEBUG 2006-10-27 00:49:15,359 [ContainerBackgroundProcessor[StandardEngine[Catalina]]] target file path = /faces-config.xml
DEBUG 2006-10-27 00:49:15,468 [ContainerBackgroundProcessor[StandardEngine[Catalina]]] JSF initialize end
  1. ブラウザーで http://localhost:8080/teeda-ex1/view/hello/hello.html にアクセスしてみましょう。 画面に Hello World!!! が表示されます。

&ref(): File not found: "teeda2.png" at page "Teeda/gettingStarted";

↑

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さんを中心にサポートいただいていますｍ（＿　＿）ｍ

では本題に戻りまして。。。

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が効いているはずです。

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