Teedaチュートリアル3
このチャプターではHelloWorldを使って、TeedaでのHTMLテンプレートPageクラスの作成の仕方と、実行の仕方を学びます。
このチャプターに入る前にTeedaのセットアップを完了しておいてください。
このチャプターでは以下のことを学びます
・Teedaアプリケーションの作成方法の基礎
・TeedaのHTMLテンプレートとPageクラスの関係
・Teedaアプリケーション作成時の手順とDolteng活用方法
・Teedaアプリケーションを動かす
では始めましょう。まずはHTMLテンプレートを作成してみます。
TeedaでのHTMLテンプレートの置き場所はsrc/main/webapp/view/以下になっています。
そこにhelloというディレクトリをまず作成します。図XXXのようになります。
次にhello.htmlを作成します。Eclipseの通常の新規作成メニューからファイルを作成してもかまいませんが、
せっかくDoltengを入れているのでDoltengを活用します。
パッケージエクスプローラー上で右クリック→New→Otherを選ぶと図XXXのようなダイアログが開きます。
その中にChuraというカテゴリがあるはずです。その中のTeeda HTMLを選び、hello.htmlを作成してください（図XXX）
Doltengが作成してくれたテンプレートに対して、Hello <span id="name"></span>という1行を追加しましょう。
このようになります。
<?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" />
</head>
<body>
<form id="Form">
<div><span id="messages"></span></div>
Hello <span id="name"></span>
</form>
</body></html>
追加した1行にはどういう意味があるのでしょうか？
TeedaではHTMLとそれに対応するPOJOクラス（Pageクラス）を1対1にマッピングし、Pageクラスの
プロパティは各HTMLタグのidによってマッピングされます。
（Pageモデルの詳細についてはXXXを参照してください。）
この原則をあてはめると、hello.htmlに対してはHelloPageクラスがいる必要があります。
またhello.htmlのnameというプロパティにおいては、HelloPage.nameというプロパティが対応します。
ではDoltengを使ってhello.htmlからHelloPageクラスを作成してみましょう。
hello.html上で右クリック→Dolteng→Create New Page classでPageクラスを作成できます。
ダイアログが出ますが、そのままFinishボタンを押してください。
すると、下記のようなHelloPageクラスが作成されます（図XXX）。
package examples.teeda.web.hello;
public class HelloPage {
public String name;
public Class initialize() {
return null;
}
public Class prerender() {
return null;
}
}
Seasar2.4ではpublicフィールドでのDIもされますので、getter/setterもありません。
initialize/prerenderは後に説明しますのでこの時点であまり気にされる必要はありません。
HelloPageクラスのnameプロパティの左横部分に注目してください。なにやら左右の矢印のようなものが
見えます。これはDoltengによるPageマーカーの機能です。PageマーカーとはTeedaのHTMLテンプレートと
Pageクラスのプロパティがバインドされていることを示します。
HTMLテンプレートのidとPageのプロパティが正しくバインドされているかどうかも一目瞭然になっています。
ではnameプロパティに、適当な文字列を与えて動かしてみましょう。
public String name = "Teeda";
Tomcatプラグインを使って、パッケージエクスプローラーのteeda-tutorialプロジェクト上で
右クリック→Tomcatプロジェクト→コンテキスト定義を更新をして、Tomcatを起動します。
次にhello.htmlにフォーカスをあてて、右クリック→Dolteng→View On Serverを実行します。
Hello Teedaと表示されたでしょうか？
・まとめ
このチャプターでは以下のことを学びました
・Teedaアプリケーションの作成方法の基礎
・TeedaのHTMLテンプレートとPageクラスの関係
・Teedaアプリケーション作成時の手順とDolteng活用方法
・Teedaアプリケーションを動かす
次チャプターではテキスト入力の仕方とボタンのサブミット、画面遷移についてを
足し算のサンプルを使いながら学びます。
次回以降の予定
・入力/サブミット、画面遷移
・Teedaライフサイクルメソッドと独自機能について
・Validatorとエラーメッセージ
・Select項目・チェックボックス
・ForEach
・ファイルダウンロード
・最後はTeeda+S2Daoのサンプル
くらいで終わり。
