サーバー処理の呼び出し
次に送信ボタンを用意して、入力したデータをサーバーに送信する処理を実装します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mainDiv">
<form id="simpleForm">
<div class="formHeader">xxx</div>
<table class="responsive">
<tbody>
・・・ 中略 ・・・
</tbody>
</table>
<button id="sendButton" type="button">送信</button>
</form>
</div>
</body>
</html>
SimplePage.htmlに追加したボタンの応答処理は、SimpleForm.javaに対応するJavaScriptファイルSimpleForm.jsを作成し、ボタンの応答処理を記述します。SimpleForm.jsは開発ツールのWebリソース作成で、SimplePageクラス中のSimpleFormを検索し、SimpleFormに対応するJavaScriptファイルを作成します。
この操作で作成したSimpleForm.jsは以下のようになります。
/**
* @fileOverview {@link SimpleForm}クラスを記述したファイルです。
*/
/**
* @class SimpleForm
*
* @extends Form
*/
SimpleForm = createSubclass("SimpleForm", {}, "Form");
/**
* HTMLエレメントとの対応付けを行います。
*/
SimpleForm.prototype.attach = function() {
Form.prototype.attach.call(this);
};
SimpleForm.jsにsendButtonの応答処理を追加すると以下のようになります。
/**
* HTMLエレメントとの対応付けを行います。
*/
SimpleForm.prototype.attach = function() {
Form.prototype.attach.call(this);
var thisForm = this;
this.find("#sendButton").click(function () {
thisForm.send();
});
};
/**
* 送信ボタンの処理。
*/
SimpleForm.prototype.send = function() {
this.submit("serverMethod", function(r) {
logger.log("json=" + JSON.stringify(r));
});
};
attachメソッドで使用している、this.find()はjQueryのセレクターを指定して、フォーム中のjQueryのオブジェクトを取得するメソッドです。このメソッドを使用して送信ボタンのjQueryオブジェクトを取得し、それに対してクリックイベントのハンドラーを設定しています。送信ボタンのイベントハンドラーでは、SimpleFormのsendメソッドを呼び出しています。そのsendメソッドではFormクラスのsubmitメソッドを使用して、サーバーサイドのメソッドである"serverMethod"を呼び出しています。
SimpleForm.javaに"serverMethod"を追加したものが、以下のソースです。
public class SimpleForm extends Form {
/**
* コンストラクタ。
*/
public SimpleForm() {
super(null);
・・・ 中略 ・・・
}
/**
* Logger.
*/
private Logger logger = Logger.getLogger(SimpleForm.class);
/**
* サーバーメソッドのサンプル。
* @param p POSTされた情報。
* @return 応答情報。
* @throws Exception 例外。
*/
@WebMethod
public Response serverMethod(final Map<String, Object> p) throws Exception {
this.methodStartLog(logger, p);
Map<String, Object> data = this.convertToServerData(p);
String text1 = (String) data.get("text1");
Integer integer1 = (Integer) data.get("integer1");
BigDecimal numeric1 = (BigDecimal) data.get("numeric1");
java.sql.Date date1 = (java.sql.Date) data.get("date1");
logger.debug("text1=" + text1 + ",integer1=" + integer1 + ",numeric1=" + numeric1 + ",date1=" + date1);
Response ret = new JsonResponse(JsonResponse.SUCCESS, "");
this.methodFinishLog(logger, ret);
return ret;
}
}
SimpleFormのserverMethodは、戻り値はResponse、引数はMap<String, Object>のメソッドで、JavaScriptからの呼び出しを許可する、@WebMethodアノテーションが付いています。引数のMap<String, Object> pには、フォームに入力されたデータが入ってきます。pに入っているデータは、フォームに入力された文字列です。このpをconvertToServerDataメソッドを使って変換すると、フォーム中のフィールドに対応したデータ型に変換します。
IntegerFieldに入力されたデータはIntegerのデータ、NumericFieldのデータはBigDecimalのデータ、DateFieldのデータはjava.sql.Dateのデータとなります。こうしたデータの変換をいちいち記述するのは面倒な作業で、さらに完成したソースの可読性を下げてしまいます。また、使用するデータ型をIntegerからBigDecimalに変更するような仕様変更が発生した場合、その変換処理も変更する必要が出てきます。
dataforms.jarの場合、フォームに配置するフィールドをIntegerFieldからNumericFieldに変更し、convertToServerDataを使用すれば、適切なデータ型への変換が行われます。フォームに値を入力し送信ボタンを押下した場合、serverMethodの動作ログは以下のようになります。
2018-02-18 21:39:27,083 INFO DataFormsServlet - context=/pagesample, uri=/pagesample/pagesample/page/SimplePage.df
2018-02-18 21:39:27,083 INFO DataFormsServlet - classname=pagesample.page.SimplePage
2018-02-18 21:39:27,084 INFO DataFormsServlet - method=simpleForm.serverMethod
2018-02-18 21:39:27,084 DEBUG Page - csrfToken=Km1iWkVJdtY/3TvnsGdjtUOwS/DoXbK7prOG5LwSb2EIuXUA8pntnQ==
2018-02-18 21:39:27,085 INFO SimpleForm - pagesample.page.SimpleForm.serverMethod start param={csrfToken=Km1iWkVJdtY/3TvnsGdjtUOwS/DoXbK7prOG5LwSb2EIuXUA8pntnQ==, text1=aaa, integer1=10, numeric1=200.00, date1=2018/02/18}
2018-02-18 21:39:27,087 DEBUG SimpleForm - text1=aaa,integer1=10,numeric1=200.0,date1=2018-02-18
2018-02-18 21:39:27,087 INFO SimpleForm - pagesample.page.SimpleForm.serverMethod finish result=dataforms.controller.JsonResponse@e66e990
2018-02-18 21:39:27,088 DEBUG JsonResponse - json={
"contentType": "text/plain; charset=utf-8",
"result": "",
"status": 0
}
