7.2.4. 画面遷移¶
項目
7.2.4.1. 画面遷移がある場合（登録、更新など）の実装例¶
画面遷移がある場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit （セレクタ）
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajax でのデータ送信と画面遷移 – imuiAjaxSubmit
7.2.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 59 | <%@ 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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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', 'reference/list/views/list');
}
);
}
});
});
})(jQuery);
</script>
</imui:head>
|
7.2.4.1.2. 画面遷移あり JSP （画面タイトル／ツールバー／コンテンツエリア）¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル を参照してください。コラム
imuiValidate を利用するときは、<input type=”submit”/> ではなく、<input type=”button”/> を利用してください。
7.2.4.2. 画面遷移がない場合の実装例¶
画面遷移がない場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit （セレクタ）
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajaxでのデータ送信 – imuiAjaxSend
7.2.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.2.4.2.2. 画面遷移なし JSP （画面タイトル／ツールバー／コンテンツエリア）¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル を参照してください。
7.2.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.2.4.3.1. parameter について¶
オブジェクトのキーを input タグの name 属性に、値を value 属性にセットして submit します。値に配列を指定することが可能です。ただし、1 次元配列のみサポートします。parameter の指定方法と、次画面での取得例は以下のようになります。parameter の指定
1 2 3 4 5 6 7 8 9 | Map<String, Object> parameter = new HashMap<String, Object>();
ArrayList<String> arrayList = new ArrayList<String>();
arrayList.add("array1");
arrayList.add("array2");
arrayList.add("array3");
parameter.put("param1", "value1");
parameter.put("param2", "value2");
parameter.put("array1", arrayList);
|
次画面での取得
1 2 3 4 5 6 7 8 9 10 11 12 13 | public class Test2Action {
public String param1;
public String param2;
public ArrayList<String> array1;
@Execute(validator=false)
public String index(){
return "/sa/hello/output.jsp";
}
}
|
となります。
7.2.4.3.2. Ajax 実装例¶
非同期で返却するレスポンスオブジェクトを定義します。
1 2 3 4 5 6 7 8 9 10 | package sample.sastruts.dto.samplesp;
public class MyAjaxResponse {
public String result;
public boolean error;
public String errorMessage;
public String successMessage;
public String[] detailMessages;
public Map<String, Object> parameter;
}
|
アクションクラスでは、上記レスポンスオブジェクトに対して値をセットし、JSON 文字列に変換します。変換した結果の文字列をプロパティにセットします。
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 | public String ajaxResponse;
@Execute(validator = false)
public String ajax() {
MyAjaxResponse responseObject = new MyAjaxResponse();
try {
Map<String, Object> parameter = new HashMap<String, Object>();
ArrayList<String> arrayList = new ArrayList<String>();
arrayList.add("array1");
arrayList.add("array2");
arrayList.add("array3");
parameter.put("param1", "value1");
parameter.put("param2", "value2");
parameter.put("array1", arrayList);
// 成功時
responseObject.result = "success";
responseObject.error = false;
responseObject.successMessage = "登録が完了しました。";
responseObject.parameter = parameter;
} catch (Exception e) {
responseObject.error = true;
responseObject.errorMessage = "データ登録時にエラーが発生しました。";
responseObject.detailMessages = new String[] { "管理者にお問い合わせください。" };
}
// レスポンスオブジェクトをJSON文字列に変換
ajaxResponse = JSON.encode(responseObject);
return "sample/ajaxResponse.jsp";
}
|
アクションクラスで生成した JSON 文字列をクライアントに application/json として返します。上記 ajax メソッドの返却値 “sample/ajaxResponse.jsp” に相当します。
1 2 | <%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8" %>
${ajaxResponse}
|