Teedaのサンプルアプリ作成

サンプルアプリの概要
「画面に入力した値の入力値チェック(validation)を行う簡単なWebアプリです。」

※Teedaでアプリケーション作成時の注意点

[開発環境]

[用意するもの]

eclipseでChuraプロジェクトを以下の手順で作成して下さい
eclipse→新規プロジェクト作成→Chura→Chura Projectを選択→プロジェクト名を入力 →Root Package Nameを入力「jp.co.infonic」→Project Typeで「Teeda Only」を選択

  • input.html(初期表示画面:ここから情報を入力します。)
  • InputPage.java(入力した値の保持とvalidationの定義。input.htmlと1:1で対応)
  • NextPage.java(入力した値を保持。next.htmlと1:1で対応)
  • next.html(input.htmlから遷移する、入力した値の確認画面)

たったこれだけ!自作の設定ファイルは不要です。
※elipseにDoltengプラグインがインストールさている場合、eclipseでhtmlファイルを開き、そのエディタ内で、Ctr + 5キー押下すると、現在のhtmlに対応するPageクラスの雛形が自動生成されます。

[処理の流れその1]
入力値チェックを行う場合

1.input.htmlの画面からユーザ情報を入力。
http://localhost:8080/TeedaSample1/view/lesson1/input.html

2.リクエストの送信ボタンを押下(「do送信でvalidate」ボタンを押下)。

3.入力した値がvalidationにひっかかった場合、エラーメッセージが元の画面に表示される。

[処理の流れその2]
単純に画面遷移を行う場合

1.input.htmlの画面からユーザ情報を入力。
http://localhost:8080/TeedaSample1/view/lesson1/input.html

2.リクエストの送信ボタンを押下(「go送信で確認」ボタンを押下)。

3.次画面next.htmlに入力した値が表示される。
http://localhost:8080/TeedaSample1/view/lesson1/next.html

input.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<title>Teeda lesson1 page</title>
<style type="text/css">
<!--
div.next {
    font-color: #FFFFFF;
    background-color: #CCFFCC;
    width:  720px;
    height: 340px;
    font-weight: bold;
    margin:  15px;
    padding: 15px;
    padding-right: 160px;
}

div.box {
	background-color: #FFFFDD;
	padding: 8px;
	width: 720px;
}

-->
</style>

<body>
	<div class="next">

		ユーザ情報入力[POST送信]<br />
		
		<form id="testForm">
			<div class="box">
				年齢:<input type="text" id="userAge" name="age" value="" />
				validation msg:<span id="userAgeMessage"></span>
			</div>
			<div class="box">
				名前:<input type="text" id="userName" name="name" value="" />
				validation msg:<span id="userNameMessage"></span>
			</div>
			<div class="box">
				住所:<input type="text" id="userAddress" name="address" value="" />
			</div>
			<div class="box">
				<p>
					<input type="submit" id="doSendUserProfile" value="do送信でvalidate" />
				</p>
				
				<p>
					<input type="submit" id="goNext" value="go送信で確認" />
					※入力値が正しい場合のみ画面遷移します。
				</p>
			</div>
		</form>
	</div>
</body>
</html>

InputPage.java

package jp.co.companyname.web.lesson1;

import javax.faces.internal.ValidatorChain;

import javax.faces.validator.Validator;

import org.seasar.teeda.extension.validator.TLengthValidator;
import org.seasar.teeda.extension.validator.TRequiredValidator;

public class InputPage {
	
	// Validation用の定数アノテーション→まだ動作検証できていない
	//public static final String userAge_TRequiredValidator = null;
	//public static final String useAge_LengthValidator = "minimum=2";
	
	// 初期値
	private Integer userAge    = 21;
	private String userName    = "長澤まさみ";
	private String userAddress = "東京都";
	
	/**
	 * 動的なバリデーション
	 * 
	 * [命名規約]
	 * get + id名 + Validator
	 * 
	 * 複数のValidatorを返す場合には、ValidatorChainを使用します
	 * 
	 * @return
	 */	
	public Validator getUserAgeValidator() {
		return createAgeValidator();
	}
	
	public Validator getUserNameValidator() {
		return createNameValidator();
	}

	
	/**
	 * 年齢のvalidation定義
	 * @return
	 */
	protected Validator createAgeValidator() {
		ValidatorChain chain = new ValidatorChain();
		TRequiredValidator tval = new TRequiredValidator();// 必須入力設定
		tval.setTarget("doSendUserProfile");
		chain.add(tval);
		
		TLengthValidator lengthValidator = new TLengthValidator();
		lengthValidator.setMinimum(1);// 最小桁数設定
		lengthValidator.setMaximum(3);// 最大桁数設定
		lengthValidator.setTarget("doSendUserProfile");
		chain.add(lengthValidator);
		return chain;
	}

	
	/**
	 * 名前のvalidation定義
	 * @return
	 */
	protected Validator createNameValidator() {
		ValidatorChain chain = new ValidatorChain();
		TRequiredValidator tval = new TRequiredValidator();// 必須入力設定
		tval.setTarget("doSendUserProfile");
		chain.add(tval);
		
		TLengthValidator lengthValidator = new TLengthValidator();
		lengthValidator.setMinimum(4);// 最小桁数設定
		lengthValidator.setMaximum(8);// 最大桁数設定
		lengthValidator.setTarget("doSendUserProfile");
		chain.add(lengthValidator);
		return chain;
	}
	
	public String getUserName() {
		System.out.println("[InputPage]getUserName is called.");
		return userName;
	}
	
	/**
	 * submitボタンのidがdoSendUserProfileの場合に呼び出されるメソッド
	 *
	 * [規約]
	 * submitボタンのidの属性値とメソッド名を合わせる
	 * 戻り値はString型
	 */
	public String doSendUserProfile() {
		System.out.println("doSendUserProfileメソッドcalled");
		System.out.println("DO [userAge]" + userAge);
		System.out.println("DO [userName]" + userName);
		System.out.println("DO [userAddress]" + userAddress);
		//return "next";// 指定する文字列は、遷移先のhtmlファイルから拡張子(.html)を除いたもの。jspの指定は不可。
		return null;// 同一画面に遷移する場合
	}

	public void setUserName(String uname) {
		System.out.println("[InputPage]setUserName is called.");
		this.userName = uname;
	}

	public String getUserAddress() {
		System.out.println("[InputPage]getUserAddress is called.");
		return userAddress;
	}

	public void setUserAddress(String uad) {
		System.out.println("[InputPage]setUserAddress is called.");
		this.userAddress = uad;
	}

	public Class initialize() {
		System.out.println("[InputPage]initialize called.");
		return null;
	}

	public Class prerender() {
		System.out.println("[InputPage]prerender called");
		return null;
	}

	public Integer getUserAge() {
		System.out.println("[InputPage]getUserAge is called.");
		return userAge;
	}

	public void setUserAge(Integer uage) {
		System.out.println("[InputPage]setUserAge is called.");
		this.userAge = uage;
	}

}

NextPage.java

package jp.co.companyname.web.lesson1;

public class NextPage {

	private Integer userAge;

	private String userName;

	private String userAddress;

	public String getUserName() {
		return userName;
	}
	
	public void setUserName(String uname) {
		this.userName = uname;
	}

	public String getUserAddress() {
		return userAddress;
	}

	public void setUserAddress(String uad) {
		this.userAddress = uad;
	}

	public Integer getUserAge() {
		return userAge;
	}

	public void setUserAge(Integer uage) {
		this.userAge = uage;
	}

	public Class initialize() {
		return null;
	}

	public Class prerender() {
		return null;
	}
}

next.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>次のページ</title>
<style type="text/css">
<!--
div.back {
    background-color: #CCFFCC;
    width:  400px;
    height: 300px;
    font-weight: bold;
    margin: 12px;
    padding: 10px;
}
-->
</style>
</head>
<body>
	<span>ユーザ情報の確認</span>
	<div class="back">

		[入力値の確認]
		<p>
			年齢:<span id="userAge"></span>
		</p>
		<p>
			名前:<span id="userName"></span>
		</p>
		<p>
			住所:<span id="userAddress"></span>
		</p>
		<p>
			このページは入力値確認用 next.html です。
		</p>
	</div>
</body>
</html>