Teedaのサンプルアプリ作成
サンプルアプリの概要
「画面に入力した値の入力値チェック(validation)を行う簡単なWebアプリです。」
[開発環境]
- JDK1.5.0_13
- eclipse3.2
- Tomcat5.5.25(Seasar2はスタンドアローンアプリでも動くのでスタンドアローンアプリの場合は不要)
- Seasar2 2.4.20
- S2.4.20.zipを解凍し、各jarファイルにクラスパスを通す(詳細設定は他サイトを参考にして下さい)
- eclipseにDoltengプラグインをインストール
[用意するもの]
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>