サポート > リポジトリ > レイアウト > JavaScriptのカスタマイズ JavaScript

JavaScriptのカスタマイズによってユーザーインタフェースの挙動を変更することができます。

Wagbyが生成したJavaScriptファイルを上書きするのではなく、「追加ファイル」を用意する方法を提供しています。これを使って標準の動作を変更することができます。

変更する範囲開発者が作成するファイル保存フォルダ (*1)
アプリケーション全体mycommon.jscustomize\webapps\system
モデル単位My.jscustomize\webapps\<モデルID>
画面単位My<画面識別子>.jscustomize\webapps\<モデルID>
メニューmenu.js (*2)customize\webapps\system
1. インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身で必要なフォルダの作成を行ってください。
2. menu.js は「上書き」になります。本節の後半にカスタマイズ事例を掲載しています。

モデル model1 の登録画面で、保存ボタンを押下したときに確認ダイアログを表示する例を示します。

customize\webapp\customer\MyInsertModel1.js を作成します。

ビルドすると wagbyapp\webapps\wagby\model1 にファイル MyInsertModel1.js が生成されています。中身は空です。これを使うとよいでしょう。
//
// 画面表示時に保存ボタンの押下時に確認ダイアログを
// 表示する処理をセットする
//
require(["dijit/registry", "dojo/ready"], function(registry, ready) {
  // 画面表示時に実行する
  ready(function() {
    // 保存ボタン(id が btnSend)のボタンを取得する
    var btnSend = registry.byId("btnSend");
    // 保存ボタンのデフォルトの click イベントを書き換える
    btnSend.onClick = function(e) {
      // 確認ダイアログを表示する
      showConfirmDialog("処理を続行します。よろしいですか?", function() {
        // OK ボタン押下時の処理
        // this の参照先が変わるため、click イベントオブジェクトから
        // form を取得する
        doSubmitForm(e.target.form, 'action_Send');
      });
    }
  });
});
  • 保存ボタン押下時の処理をOKボタン押下時の関数内に移すため、form の参照先(this の参照先)がボタンからダイアログに変わります。上のサンプルコードでは、ボタンクリック時のイベントオブジェクトから formを取得するようにしています。
  • 独自ボタンなど、他のボタンにも同じ考え方を適用できます。

モデル model1 の詳細画面で、集計ビューに関する(複数の)ボタンを非表示にする例を示します。

customize\webapp\customer\MyShowModel1.js を作成します。

ビルドすると wagbyapp\webapps\wagby\model1 にファイル MyShowModel1.js が生成されています。中身は空です。これを使うとよいでしょう。
require(["dijit/registry", "dojo/dom-style", "dojo/ready"], function(registry, domStyle, ready) {
  // 画面表示時に以下の関数が実行される
  ready(function() {
    // show<モデルID>_body.jsp 内の集計ビューのボタンのIDを配列に設定する
    // ボタンのIDの命名規則は、btnSendShowList<モデルID>Totalview
    // 集計ビューが複数ある場合、2番目以降のボタンのIDは、
    // btnSendShowList<モデルID>T<集計ビュー番号>Totalview
    var totalviewButtons = [
      "btnSendShowListModel1Totalview",   // 1番目の集計ビューボタンのID
      "btnSendShowListModel1T2Totalview", // 2番目の集計ビューボタンのID
    ];

    // 上記集計ビューボタンのIDからボタンのオブジェクトを取得し、ボタンの
    // DOM要素の style 属性に display: none を設定し非表示にする
    for (var i=0,l=totalviewButtons.length; i<l; i++) {
      var btnShowTotalview = registry.byId(totalviewButtons[i]);
      if (!btnShowTotalview) {
        continue;
      }
      domStyle.set(btnShowTotalview.domNode, "display", "none");
    }
  });
});
  • 集計ビューのボタンの命名規則は btnSendShowList<モデルID>Totalview となっています。また集計ビューが複数ある場合、2番目以降のボタンのIDは、btnSendShowList<モデルID>T<集計ビュー番号>Totalview となっています。
  • 上のサンプルコードでは、配列にボタンのIDを設定し、これらボタンのDOM要素に display:none を設定することで非表示化しています。

title属性を使う

customer モデルの一覧表示画面に用意される「登録画面へ」というボタンに Tips を用意してみます。ここでは HTML 5 規格で用意された title 属性を使います。

図2 登録画面に Tips を用意する

customize\webapp\customer\MyShowListCustomer.js を作成します。

ビルドすると wagbyapp\webapps\wagby\customer にファイル MyShowListCustomer.js が生成されています。中身は空です。これを使うとよいでしょう。
require(["dijit/registry", "dojo/ready"], function(registry, ready) {
 ready(function() {
   // 「登録画面へ」ボタンを id 指定で取得する
   var btnRegistration = registry.byId("btnNewInsertCustomer");
   // 「登録画面へ」ボタンの title 属性を設定する
   btnRegistration.set("title", "登録画面を表示します");
 });
});
  • 対象とするボタンの id は、自動生成された JSP ファイルの内容をテキストエディタで確認してください。

Dojotoolkit の Tooltip を使う

(Wagbyが内部で利用しているJavaScriptライブラリである) Dojotoolkit が提供する Tooltip を使うこともできます。

図3 登録画面に Tips を用意する (2)

上と同じように customize\webapp\customer\MyShowListCustomer.js を作成します。

require(["dijit/registry", "dijit/Tooltip", "dojo/ready"], function(registry, Tooltip, ready) {
 ready(function() {
   new Tooltip({
     // ツールチップを表示する対象となる「登録画面へ」ボタンの id を設定する
     connectId: ["btnNewInsertCustomer"],
     // ツールチップの文言を設定
     label: "<span style='color: red;'>登録画面を表示します</span>",
   });
 });
});
  • 対象とするボタンの id は、自動生成された JSP ファイルの内容をテキストエディタで確認してください。
  • 上の例のように、ツールチップの文言には HTML を含めることができます。

メッセージの国際化

メッセージを国際化対応する場合は、Dojotoolkit の国際化の枠組みを使います。

サーバ側ではなく、クライアント(Webブラウザで動作するJavaScript)の国際化になります。

ビルドしたアプリケーション wagbyapp\webapps\wagby\nls フォルダにある common.js を編集します。
他と重複しないリソースキーを割り当てて文を登録します。以下は TIPS_CUSTOMER_BTN_INSERT というリソースキーを使った例です。

TIPS_CUSTOMER_BTN_INSERT: "登録画面を表示します",

設定したリソースは JavaScript 内で res オブジェクトで参照できます。以下のようになります。

HTML 5 の title 属性を利用した場合:

btnRegistration.set("title", res.TIPS_MODEL1_BTN_INSERT);

Dojotoolkit の Tooltip を利用した場合:

label: "<span style='color: red;'>" + res.TIPS_MODEL1_BTN_INSERT + "</span>",

フォーカスを無効にする

新規登録画面のフォーカスを無効にする場合、MyInsert<モデルID>.js ファイルを用意し、標準の focusFirstElement 関数を空(処理なし)で上書きしてください。

function focusFirstElement() {
}

任意のボタンのIDにフォーカスをセットする

次の JavaScript コードは、設定したボタンのIDにフォーカスをセットします。

function focusFirstElement() {
 require(["dijit/registry", "dojo/ready"], function(registry, ready) {
   ready(function() {
     var btn = registry.byId("<ボタンのID>");//ボタンIDを指定してください。
     if (btn) {
       btn.focus();
     }
   });
 });
}

開発者が独自に用意した JavaScript ファイルを読み込ませることができます。

変更する範囲開発者が修正するファイル
アプリケーション全体customize\webapp\tiles2-base_classic2.jsp
画面単位customize\webapp\<モデルID>\<画面識別子><モデルID>_javascript.jsp

例 すべての画面で任意のJavaScriptファイルを読み込ませる

wagbyapp\webapps\$APPNAME\tiles2-base_classic2.jspを修正します。このファイルは先頭でさまざまなJavaScriptファイル読み込みを行なってるので、そこに開発者が(読み込みの処理を)挿入します。挿入位置は任意に決めてください。

具体的には、独自で開発した JavaScript ファイルまたは (jQueryなどの) ファイルを読み込むためのscriptタグを指定します。

個々の画面で任意のJavaScriptファイルを読み込ませる

Wagby が生成した XXX_javascript.jsp というファイルがあります。これにscriptタグを追加するとよいでしょう。

例えば customer モデルの詳細画面のために showCustomer_javascript.jsp というファイルが生成されています。これを修正し、customize\webapp\customer フォルダに保存します。