- 追加された行はこの色です。
- 削除された行はこの色です。
[[Teeda]]
Teedaの入門記を書きます。
blogで書いていたけど、皆で書けるように。
#contents
* 環境作り [#ec8afccf]
まず、Teeda の動かせる環境を作りましょう。
実は、Teeda を動かす環境は簡単に作れます。
[[ひがさんのBlog -- Super Agile Web Development with Seasar2:http://d.hatena.ne.jp/higayasuo/searchdiary?word=%2a%5bSeasar%5d]]
に書かれている環境を準備すればOKです。 ^^) *
** インストール [#qca57ffb]
- JDK1.4または1.5をインストール
-- JDK1.5 http://java.sun.com/j2se/1.5.0/ja/download.html
- Eclipse3.2をインストール(3.1でも良いようです)
-- 本体 http://download.eclipse.org/eclipse/downloads/drops/R-3.2.1-200609210945/index.php
-- 日本語化パッケ−ジhttp://download.eclipse.org/eclipse/downloads/drops/L-3.2_Language_Packs-200607121700/index.php
- Tomcat 5.5系をインストールする、今なら Tomcat 5.5.20
--http://tomcat.apache.org/download-55.cgi
- Tomcat Plugin 3.1をインストール (3.2beta-2 でも動きました)
-- http://www.sysdeo.com/eclipse/tomcatplugin
- DoltengとDiiguをインストール(Teedaだけ動かす場合うはDoltengだけでよいです)
-- EclipseでUpdateサイト http://eclipse.seasar.org/updates/3.1beta/ からインストール
-- EclipseのHelp→ソフトウェアの更新→検索およびインストルで「インストルーする新規フィーチャーを検索」を選択し「次へ」→「新規リモートサイト」で上記URLを指定、名前は任意ですが Seasar3.1beta とでも。
** Eclipse の設定 [#b6dfc869]
- 複数のJDKが入ってるいる場合は Eclipse の起動ショットカット(オプション)に -vm で インストールした JDK 1.5 を指定
→ 詳しくは http://eclipsewiki.net/eclipse/index.php?%B5%AF%C6%B0%A5%AA%A5%D7%A5%B7%A5%E7%A5%F3#mdbf59ac
- 複数のJDKが入ってるいる場合は JDKの設定。ウィンドウ→設定→Java→インストール済みJRE で インストールした JDK 1.5 を指定
- Tomcat の設定。 ウィンドウ→設定で Tomcat を設定
-- Tomcat バージョン 5.x を選択
-- Tomcat ホーム に上でインストールした Tomcat のパスを設定
-- 複数のJDKが入ってるいる場合は、「JVM設定」を開きJRE に JDK1.5 を選択
- 日本語コードの設定、必須ではありませんが UTF-8 にするのが無難です。
-- ウィンドウ→設定→一般→ワークスペースでテキスト・ファイル・エンコーディングを「その他」を選択し、UTF-8を選ぶ。
*プロジェクトの作成 [#vef3eed2]
これから使う Teeda プロジェクトを作成します。
これも、Dolteng プラグインの Chura Project ウィザード を使うと簡単にです。 ^^) *
*** 1. 新規プロジェクト [#q78ebc5e]
ファイル→新規→プロジェクトで「新規プロジェクト」画面を表示います。下の画像のように Chura という項目があります。そこで Chura → Chura Project を選択し、「次へ」をクリック。
&ref(chura1.png);
*** 2. Chura Project [#d347eec4]
下のような「Create a Chura Project」画面が表示されますので
- プロジェクト名 -- 出来たアプリのURLの一部になります。今回は ''teeda-ex1'' とします。
- Poot PackageName -- Javaのパッケージ名、今回は学習目的なので ''example1'' とします。
- JRE Container -- JDK1.5 を選択します
- Project Type -- Teeda Only を選択します
&ref(chura2.png);
*** 3. プロジェクト完成 [#c76b9d99]
2. の入力を行い「終了」を押すと、少しして 以下のようなプロジェクトが自動的に作成されます。面倒なパッケージ作成やライブラリーのコピー、ビルドパスの設定などは、まったく不要です。
&ref(chura3.png);
* 動作確認 (Hello World) [#o85df37f]
作成した teeda-ex1 プロジェクトに html ファイルを作ってみます。
+ src/main/webapp/view パッケージに hello フォルダーを作成します
+ hello フォルダーに hello.html ファイルを作成
+ 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 World!!!
</body>
</html>
&ref(teeda1.png);
+ Tomcat を起動してみましょう。Tomcat→Tomcat起動
+ コンソールに以下のような文字が表示されます。
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
+ 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
+ ブラウザーで http://localhost:8080/teeda-ex1/view/hello/hello.html にアクセスしてみましょう。 画面に Hello World!!! が表示されます。
&ref(teeda2.png);
* 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が効いているはずです。