サポート > リポジトリ > 画面機能 > 画面遷移 (10) JavaScript(フロントエンド)との連携スクリプトJavaScript

画面遷移時にフロントエンド側の処理を組み合わせる方法を説明します。

model1 の画面に配置したオリジナルボタンを押下した際に確認ダイアログボックスを表示させるようにします。「OK」選択時にのみmodel2画面へ遷移させるものとします。

図1 model2へ遷移するオリジナルボタン
図2 ボタン押下時に確認ダイアログが表示される

1. model1にオリジナルボタンを配置する

ここでは model1 一覧表示画面に「model2検索画面へ」というボタンを用意してみます。イベント名を ShowListModel2 とします。

図3 オリジナルボタンを用意する

2. オリジナルボタン押下時のスクリプト

図1で用意したオリジナルボタン押下時に呼び出されるスクリプトを作成します。スクリプトファイルは WEB-INF/script/model1/ShowListModel1_ShowListModel2.js となります。

function process() {
  var ExcelFunction = Java.type("jp.jasminesoft.util.ExcelFunction");
  var Jfcerror = Java.type("jp.jasminesoft.jfc.error.Jfcerror");
  var Jfcwarn = Java.type("jp.jasminesoft.jfc.error.Jfcwarn");
  var Jfcinfo = Java.type("jp.jasminesoft.jfc.error.Jfcinfo");
  var stdout = java.lang.System.out;

  return "redirect:/mainMenu.do?name=showListModel2";
}

別画面に遷移させるため redirect を指定しています。

3. ボタンIDの確認

自動生成されたファイル showList<モデルID>_navigationbar.jsp をテキストエディタで開きます。今回の場合は wagby/model1/showListModel1_navigationbar.jsp となります。

図1で追加したオリジナルボタンのボタンIDを確認します。今回の場合は btnShowListModel1ShowListModel2 となっていました。

4. ブラウザで動作する JavaScript を用意する

customize フォルダに webapp/model1/MyShowListModel1.js を用意します。

customize/webapp 以下の model1 フォルダは手動で作成する必要があります。
ビルド後は wagby/model1/MyShowListModel1.js として保存されます。

このファイルの内容は次のとおりです。

require(["dijit/registry", "dojo/ready"], function(registry, ready) {
  // 画面表示時に以下の関数が実行される
  ready(function() {
    // オリジナルボタンの id と onClick コードを showListModel1_navigationbar.jsp で確認します
    // オリジナルボタンの id でボタンのオブジェクトを取得します
    var btnShowListModel2 = registry.byId("btnShowListModel1ShowListModel2");
    if (!btnShowListModel2) {
      // 権限等でボタンが表示されていない場合、イベント設定は行なわない
      return;
    }
    // ボタン押下時のデフォルトの処理を書き換えて確認ダイアログを表示するようにする
    btnShowListModel2.onClick = function() {
      showConfirmDialog("model2画面へ遷移してもよろしいですか。", function() {
        // ボタン押下時のデフォルトの処理を実行する
        submitNavigationCommand('navigation', 'showListModel1.do', 'action_ShowListModel2', 'null');
      });
    }
  });
});         
  • フロントエンド部(ブラウザ)で動作する JavaScript ファイルでは、Dojotoolkit という UI ライブラリを利用します。先頭行の require 指定は Dojotoolkit のライブラリを有効にしています。
  • showConfirmDialog 関数は Dojotoolkit が提供するライブラリです。