Teedaチュートリアル4
チュートリアル4は、入力/サブミット・画面遷移についてです。
本チュートリアルでは、以下のことを学びます。
・Teedaの入力コンポーネントの使い方/submitコンポーネントの使い方
・Teedaの画面遷移の仕方について
・値の引継ぎの基本について
上記のことを学ぶために、以下のHTML/Pageクラスを書いてみます。
1.足し算入力画面のHTMLとPageクラス
2.足し算結果画面のHTMLとPageクラス
1をaddInput.html/AddInputPage.javaとし、2をaddResult.html/AddResultPage.javaとします。
4-1.入力コンポーネントの使い方/submitコンポーネントの作り方・使い方
入力コンポーネントの使い方/submitコンポーネントの作り方・使い方をみていきましょう。
addInput.htmlを書いてみます。前回のチャプターでHelloWorldを出してみたのを思い出してください。
Pageクラスのプロパティをテキスト出力するために以下のように書いたはずです。
<span id="name"></span>
今度は同じようにinput項目を書いてみましょう。ここでTeedaの基本原則を思い出してください。
そう、タグのid属性にPageクラスのプロパティ名と同一のものを記述する、でしたね。
同じようにinputタグでもid属性を使って、Pageクラスのプロパティとマッピングします。下記のように記述します。
<input type="text" id="arg1"/>
ではaddInput.htmlを書いてみましょう。
リクエストをサーバ側へ送信したいので、formタグ・inputタグを使って下記のように記述します。
<?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> <table> <tr><td><input type="text" id="arg1" /></td></tr> <tr><td><span> + </span></td></tr> <tr><td><input type="text" id="arg2" /></td></tr> <tr><td><input type="submit" id="doCalculate" value="計算実行"/></td></tr> </table> </form> </body></html>
ここでもう一点注目すべきことがあります。
それは<input type="submit" id="doCalculate" value="計算実行"/>です。
id属性をみてください。doCalculateとまるで動詞のように書かれています。
そう、Teedaではメソッドとして扱われます。Teedaではsubmitなどのイベントを発生させるタグなどは、
doメソッドと呼ばれており、Pageクラスのメソッドとマッピングされます。
submitタグをPageクラスのメソッドとマッピングする場合には、idをdoからはじめます。例えばdoCalculateのようになります。
他にも何種類かバリエーションがありますが、まずはsubmitタグはidにPageクラスのメソッド名を
記述してマッピングする、と覚えましょう。
ではDoltengを使って、AddInputPageを作ってみましょう。
package examples.teeda.web.add;
public class AddInputPage {
public Integer arg1;//1
public Integer arg2;//2
public Class doCalculate() {//3
return null;
}
public Class initialize() {
return null;
}
public Class prerender() {
return null;
}
}では作成したPageクラスを振り返ってみましょう。
Pageクラスの番号が振ってある部分を見てください。
1、2はinput textタグ(<input type="text" ...)とマッピングします。
3はinput submitタグ(<input type="submit" ...)とマッピングし、ボタンが押されると、
doCalculateメソッドが呼ばれます。
・ここまでのまとめ
・入力項目のタグでもTeedaの原則に違わず、idによってPageクラスのプロパティでマッピングする
・submit項目はid属性によってPageクラスのメソッドとマッピングする
