intra-mart Accel Platform UIデザインガイドライン(PC版) 第5版 2015-04-01

7.1.4. 画面遷移

7.1.4.1. 画面遷移がある場合(登録、更新など)の実装例

画面遷移がある場合の概要と実装方法についての説明です。

  • 処理の流れ
  • Form の 2 度押し防止 – imuiDisableOnSubmit (セレクタ)
  • バリデーションチェック – imuiValidate
  • 確認ダイアログ表示 – imuiConfirm
  • Ajax でのデータ送信と画面遷移 – imuiAjaxSubmit

7.1.4.1.1. 画面遷移あり HTML (ヘッド情報)

 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
<imart type="head">
 <title>新規登録画面</title>
 <!-- Load library -->
 <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
 <script src="ui/js/imui-form-util.js"></script>
 <imart type="imuiValidationRule" rule="foo/bar#hoge" rulesName="rules" messagesName="messages" />
 <script type="text/javascript">
   (function($) {
     $(document).ready(function() {
       // Form の 2 度押し防止
       imuiDisableOnSubmit('#form');

       // 参照画面へ引き渡すキーの配列生成
       var optionalData = ['user_cd'];

       // 登録ボタンクリック
       $('#register-button').click(function() {

         // バリデーションチェック
         if (imuiValidate('#form', rules, messages)) {
           // 確認ダイアログ表示
           imuiConfirm(
             '<imart type="string" value=$data.dialogMessages.message escapeJs="true" />', // メッセージ
             '<imart type="string" value=$data.dialogMessages.title escapeJs="true" />',  // タイトル
             function() { // OKクリック時のコールバック関数
               // Ajax でのデータ送信と次画面への遷移
               imuiAjaxSubmit('#form', 'POST', 'json', 'reference/list/views/list');
             }
           );
         }
       });
     });
   })(jQuery);
 </script>
</imart>

7.1.4.1.2. 画面遷移あり HTML (画面タイトル/ツールバー/コンテンツエリア)

登録画面の実装サンプル を参照してください。
または、 更新画面の実装サンプル を参照してください。

コラム

imuiValidate を利用するときは、<input type=”submit”/> ではなく、<input type=”button”/> を利用してください。

7.1.4.1.3. 画面遷移あり サーバサイドJavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/**
 * 初期化処理
 *
 * ・・・
 * @validate foo/bar_validation#init
 * @onerror handleErrors
 */
function init(request) {
    // 初期化の際の処理
}
function handleErrors() {
    // 入力チェックに失敗した際の処理
}

コラム

  • バリデーションチェックについて

    実装例の中で、バリデーションチェック(送信値チェック)をしています。
    送信値が規定のルールに反する場合は、確認ダイアログを表示せず処理を中断し、ルールに反している入力箇所にエラーの旨を表示します。
    詳しくは、 Jssp Validator を参照してください。
  • Ajaxについて

Ajax の呼び出し先 を参照してください。
  • 登録・更新画面について
基本的な画面の作成方法があります。
詳しくは、 登録画面 を参照してください。
または、 更新画面 を参照してください。

7.1.4.2. 画面遷移がない場合の実装例

画面遷移がない場合の概要と実装方法についての説明です。

  • 処理の流れ
  • Form の 2 度押し防止 – imuiDisableOnSubmit (セレクタ)
  • バリデーションチェック – imuiValidate
  • 確認ダイアログ表示 – imuiConfirm
  • Ajaxでのデータ送信 – imuiAjaxSend

7.1.4.2.1. 画面遷移なし HTML(ヘッド情報)

 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
<imart type="head">
  <title>更新/削除画面</title>
  <!-- Load library -->
  <script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
  <script src="ui/js/imui-form-util.js"></script>
  <imart type="imuiValidationRule" rule="foo/bar#hoge" rulesName="rules" messagesName="messages" />
  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        // Form の 2 度押し防止
        imuiDisableOnSubmit('#form');

        // 参照画面へ引き渡すキーの配列生成
        var optionalData = ['user_cd'];

        // 更新ボタンクリック
        $('#update-button').click(function() {
          // バリデーションチェック
          if (imuiValidate('#form', rules, messages)) {
            // 確認ダイアログ表示
            imuiConfirm(
              '<imart type="string" value=$data.dialogMessages.message escapeJs="true" />', // メッセージ
              '<imart type="string" value=$data.dialogMessages.title escapeJs="true" />',  // タイトル
              function() { // OKクリック時のコールバック関数
                // Ajaxでのデータ送信
                imuiAjaxSend('#form', 'POST', 'json');
              }
            );
          }
        });
      });
    })(jQuery);
  </script>
 </imart>

7.1.4.2.3. 画面遷移なし サーバサイドJavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/**
 * 初期化処理
 *
 * ・・・
 * @validate foo/bar_validation#init
 * @onerror handleErrors
 */

function init(request) {
    // 初期化の際にしたい処理
}
function handleErrors() {
    // 入力チェックに失敗した際にしたい処理
}

コラム

  • バリデーションチェックについて

    実装例の中で、バリデーションチェック(送信値チェック)をしています。
    送信値が規定のルールに反する場合は、確認ダイアログを表示せず処理を中断し、ルールに反している入力箇所にエラーの旨を表示します。
    詳しくは、 Jssp Validator を参照してください。
  • Ajaxについて

Ajax の呼び出し先 を参照してください。
  • 登録・更新画面について
基本的な画面の作成方法があります。
詳しくは、 登録画面 を参照してください。
または、 更新画面 を参照してください。

7.1.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.1.4.3.1. parameter について

オブジェクトのキーを input タグの name 属性に、値を value 属性にセットして submit します。
値に配列を指定することが可能です。ただし、1 次元配列のみサポートします。

parameter の指定方法と、次画面での取得例は以下のようになります。
parameter の指定
1
2
3
4
5
parameter: {
    key1: 'value1',
    key2: 'value2',
    array1: [ 'array1', 'array2', 'array3' ]
}
次画面での取得
1
2
3
4
5
6
function init(request) {
    var v1 = request.key1; // 'value1'
    var v2 = request.key2; // 'value2'
    var a1 = request.getParameterValues('array1'); // ['array1', 'array2', 'array3']
    ...
}
となります。

7.1.4.3.2. Ajax 実装例

 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
function init(request) {
    ...
    response.setContentType('application/json; charset=utf-8');
    ...
    var resultObject = SomeAPI.doSomething();
    if (resultObject.error) {
        // 処理が失敗した場合
        response.sendMessageBodyString(
            ImJson.toJSONString({
                error: resultObject.error,
                errorMessage: resultObject.message,
                detailMessages: ['管理者にお問い合わせください', '連絡先:admin@xxx.xxx.xxx']
            })
        );
    }

    // 処理が成功した場合
    response.sendMessageBodyString(
        ImJson.toJSONString({
            error: false,
            errorMessage: '',
            successMessage: '登録しました',
            parameter:{
                param1: 'value1',
                param2: 'value2',
                array1: ['array1', 'array2', 'array3']
            }
        })
    );
}