7.3.4. 画面遷移¶
項目
7.3.4.1. 画面遷移がある場合（登録、更新など）の実装例¶
画面遷移がある場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit （セレクタ）
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajax でのデータ送信と画面遷移 – imuiAjaxSubmit
7.3.4.1.1. 画面遷移あり JSP （ヘッド情報）¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui"%>
<imui:head>
<title>新規登録画面</title>
<!-- Load library -->
<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script type="text/javascript">
var rules = {
textbox: {
required:true,
maxlength:20
},
textarea: {
required:true
}
};
var messages = {
textbox: {
required:"タイトルは必須です。",
maxlength:"タイトルは20文字以内で入力してください"
},
textarea: {
required:"テキストエリアは必須です。"
}
};
(function($) {
$(document).ready(function() {
// Form の 2 度押し防止
imuiDisableOnSubmit('#form');
// 参照画面へ引き渡すキーの配列生成
var optionalData = ['user_cd'];
// 登録ボタンクリック
$('#register-button').click(function() {
// バリデーションチェック
if (imuiValidate('#form', rules, messages)) {
// 確認ダイアログ表示
imuiConfirm(
'<c:out value="message" />', // メッセージ
'<c:out value="title" />' , // タイトル
function() { // OKクリック時のコールバック関数
// Ajax でのデータ送信と次画面への遷移
imuiAjaxSubmit('#form', 'POST', 'json', 'example/tgfw/reference/list');
}
);
}
});
});
})(jQuery);
</script>
</imui:head>
|
7.3.4.1.2. 画面遷移あり JSP （画面タイトル／ツールバー／コンテンツエリア）¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル を参照してください。コラム
imuiValidate を利用するときは、<input type=”submit”/> ではなく、<input type=”button”/> を利用してください。
7.3.4.2. 画面遷移がない場合の実装例¶
画面遷移がない場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit （セレクタ）
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajaxでのデータ送信 – imuiAjaxSend
7.3.4.2.1. 画面遷移なし JSP （ヘッダー／フッター）¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <imui:head>
<title>更新／削除画面</title>
<!-- Load library -->
<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script type="text/javascript">
var rules = {
textbox: {
required:true,
maxlength:20
},
textarea: {
required:true
}
};
var messages = {
textbox: {
required:"タイトルは必須です。",
maxlength:"タイトルは20文字以内で入力してください"
},
textarea: {
required:"テキストエリアは必須です。"
}
};
(function($) {
$(document).ready(function() {
// Form の 2 度押し防止
imuiDisableOnSubmit('#form');
// 参照画面へ引き渡すキーの配列生成
var optionalData = ['user_cd'];
// 更新ボタンクリック
$('#update-button').click(function() {
// バリデーションチェック
if (imuiValidate('#form', rules, messages)) {
// 確認ダイアログ表示
imuiConfirm(
'<c:out value="message" />', // メッセージ
'<c:out value="title" />' , // タイトル
function() { // OKクリック時のコールバック関数
// Ajaxでのデータ送信
imuiAjaxSend('#form', 'POST', 'json');
}
);
}
});
});
})(jQuery);
</script>
</imui:head>
|
7.3.4.2.2. 画面遷移なし JSP （画面タイトル／ツールバー／コンテンツエリア）¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル を参照してください。
7.3.4.3. Ajax 通信の利用方法¶
imuiAjaxSend, imuiAjaxSubmit を使用して Ajax 通信をする場合、呼び出し先のページでは処理成功時のメッセージ、処理失敗時のメッセージ、処理成功後に遷移するページへ引き渡すパラメータ、を返すことができます。
属性名 説明 型 必須 error 処理が失敗した場合 true、成功した場合 false を指定します。 boolean o successMessage 処理成功時のメッセージ。error: false の場合表示されます。 String – errorMessage 処理失敗時のメッセージ。error: true の場合表示されます。 String – detailMessages 処理失敗時の詳細なメッセージ。error: true の場合表示されます。 String/String[] – parameter 処理成功後に遷移するページへ引き渡すパラメータ。 Object –
7.3.4.3.1. parameter について¶
オブジェクトのキーを input タグの name 属性に、値を value 属性にセットして submit します。値に配列を指定することが可能です。ただし、1 次元配列のみサポートします。parameter の指定方法と、次画面での取得例は以下のようになります。parameter の指定Ajaxの処理を行うControllerの @RequestMapping メソッドで返り値のオブジェクトに parameter を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @RequestMapping(value = "register", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public Map<String, ? extends Object> ajax(RegisterForm form) {
Map<String, Object> result = new HashMap<String, Object>();
// 次の画面に渡すパラメータを設定します。
Map<String, Object> parameters = new HashMap<String, Object>();
List<String> arrayList = new ArrayList<String>();
arrayList.add("element1");
arrayList.add("element2");
parameters.put("param1", "value1");
parameters.put("param2", "value2");
parameters.put("array1", arrayList);
result.put("parameters", parameters);
return result;
}
|
次画面での取得（Controllerクラスで取得する）
1 2 3 4 5 6 7 8 9 | @Controller
@RequestMapping("example/tgfw/reference")
public class NextController {
@RequestMapping("list")
public String list(@ModelAttribute ParamForm form) {
return "example/tgfw/reference/list.jsp";
}
}
|
1 2 3 4 5 6 7 8 9 10 11 | public class ParamForm {
private String param1;
private String param2;
private List<String> array1;
// getter, setter
// ...
}
|
となります。
7.3.4.3.2. Ajax 実装例¶
コントローラークラスでは、@RequestMapping メソッドの実行結果をJSONとして応答するために、 メソッドに @ResponseBody を設定し、 メソッドの返り値をオブジェクトにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | @RequestMapping(value = "register", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public Map<String, ? extends Object> ajax(@Validated RegisterForm form, Errors errors) {
Map<String, Object> result = new HashMap<String, Object>();
// validationのエラー処理
if (errors.hasErrors()) {
// Errorsからメッセージを生成。
// result.put("errorMessage", "エラーメッセージ");
// result.put("detailMessages", {"詳細メッセージ1", "詳細メッセージ2", ... , "詳細メッセージn"});
result.put("error", Boolean.TRUE);
return result;
}
// 業務処理実行
// ...
// 正常終了
result.put("error", Boolean.FALSE);
// result.put("successMessage", "OK!");
// 必要に応じて、次の画面に渡すパラメータを設定します。
Map<String, Object> parameters = new HashMap<String, Object>();
List<String> arrayList = new ArrayList<String>();
arrayList.add("element1");
arrayList.add("element2");
parameters.put("param1", "value1");
parameters.put("param2", "value2");
parameters.put("array1", arrayList);
result.put("parameters", parameters);
return result;
}
|