[[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の振り方には規約がありますが、それはこの後一つ一つ見ていけば すぐに覚えられます。また、そのリファレンスも十二分に準備する予定です。