JavaScriptのカスタマイズ

最終更新日: 2021年12月8日
R8 | R9

変更するファイル

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

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

例 ボタン押下時にダイアログを表示する

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

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

ビルドすると wagbyapp\webapp\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\webapp\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 を設定することで非表示化しています。

例 任意のボタンにTipsを用意する

title属性を使う

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

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

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

ビルドすると wagbyapp\webapp\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 を使うこともできます。

図2 登録画面に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\webapp\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();
     }
   });
 });
}

入力内容を破棄してよいか、を確認するダイアログを無効にする

新規登録・コピー登録・更新画面で、別の画面へ遷移しようとした場合、"入力内容は破棄されますがよろしいですか?" というダイアログが表示されます。このダイアログ表示を無効にする場合は、mycommon.js に次のスクリプトを用意します。

function confirm_destruction(okCallback, cancelCallback) {
  okCallback();
}

繰り返しコンテナの最初の列に用意される挿入、削除ボタンの並び

繰り返しコンテナの最初の列に用意される挿入、削除ボタンは常に横並びで表示されます。これを縦並びにするためには次の対応を行います。

後者のスタイル指定の解除には JavaScript の対応が必要です。ここでは繰り返しコンテナ "detail" を操作する例を示します。このコードを MyInsert<モデルID>.js および MyUpdate<モデルID>.js に含めるとよいでしょう。

require(["dijit/registry", "dojo/dom-attr", "dojo/query", "dojo/ready"], function(registry, domAttr, query, ready) {
 // 画面表示時に実行する
 ready(function() {
   // name 属性値が detail の a タグの兄弟ノードの div タグ下にある
   // table タグの行の最初の td タグの3番目の div タグを取得する
   query("a[name='detail'] ~ div.field_box table tbody tr td:first-child div div:nth-child(3)").forEach(function(node) {
     // style 属性を削除する
     domAttr.remove(node, "style");
   });
 });
});
図3 挿入、削除ボタンを縦並びにする

メニュー表示エリアの高さを変更する

標準では、ポータル表示エリアおよびメニュー表示エリアの高さは 600 ピクセルで固定されています。これを変更するスクリプトを紹介します。(*6)

このスクリプトを customize\webapp\system フォルダに menu.js として保存します。(標準の system\menu.js を上書きします。)

function init() {
var tabindex = getCookie("__jfc_cookie_tabindex");
var tabindex_head = getCookie("__jfc_cookie_tabindex_head");
if (tabindex == null || tabindex_head == null){
tabindex = 1;
tabindex_head = tabindex;
}
seltab2('box','head',eval(tabindex),eval(tabindex_head));
}
Initializer.addInit(init);
require(["dojo/dom", "dojo/dom-style"], function(dom, domStyle) {
 var mainMenuContainer = dom.byId("mainMenuContainer");
 if (mainMenuContainer) {
   domStyle.set(mainMenuContainer, "height", "900px");
 }
});
  • 1行目から11行目までは、標準で同梱されている system/menu.js と同じ内容です。13行目以降が追加したスクリプトになっています。
  • 上の例では 900 ピクセルとしています。この値を適切に変更してください。(*7)
6. ポータルはメニューのタブに含まれているため、メニューのタブの高さを変更すると、ポータルの表示エリアの高さも同時に変わります。
7. JavaScriptでウインドウの高さを取得することはできますが、Wagbyは「サブメニュー」など、上部にさまざまなコンテンツを含めた画面レイアウトとなっているため、ブラウザのウインドウの高さをそのままセットすることはできません。

任意のJavaScriptを追加する

開発者が独自に用意した 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 フォルダに保存します。