サポート > Wagby Developer Network(R8) > 画面のカスタマイズ > JSP,JavaScript,CSSによる画面カスタマイズ

画面デザインをカスタマイズする方法を説明します。

ログオン画面の背景画像は wagbyapp\webapps\$APPNAME\img\logon_bg.png として用意されています。

差し替えたいファイルを JPEG 形式画像として用意します。これを次の場所に保存します。(*1)

customize\webapp\img\logon_bg.png
1. インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身でimgフォルダの作成を行ってください。

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

変更する範囲開発者が作成するファイル保存フォルダ (*2)
アプリケーション全体mycommon.csscustomize\webapps\css
モデル単位My.csscustomize\webapps\<モデルID>
画面単位My<画面識別子>.css (*3)customize\webapps\<モデルID>
システム管理system\My.csscustomize\webapps\system
2. インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身で必要なフォルダの作成を行ってください。
3. 画面識別子は "画面種別" + "モデルID" の組み合わせです。SCREENID 関数の戻り値になります。

CSSファイルの適用ルール

CSSファイルの読み込み順は次のようになります。同じ設定があった場合、後に読み込まれた設定に上書きされます。これによって適用範囲を限定したカスタマイズが行えるようになっています。

  1. (製品に同梱されている)標準の common.css
  2. mycommon.css
  3. <モデルID>/My.css
  4. My<画面識別子>.css

管理処理タブ内のモデルの扱い

管理処理など、以下の画面については system/My.css が共通で適用されます。作成した My.css を customize\webapp\system/My.css として保存してください。

  • メニュー
  • 管理処理 - インポートとエクスポート,統計情報,システムログ閲覧,このアプリケーションについて,オンラインライセンス認証,ログオンユーザ管理,メンテナンスモード切り替え
  • 共通処理 - プレファレンス

テーマごとのカスタマイズ

カスタマイズしたファイル (例 mycommon.css) に記載した内容は、どのテーマ (claro,soria,tundra,nihilo) にも適用されます。テーマ毎に指定したい場合は、wagbydesigner\bin\webpage\css 内のテーマ別ファイルを直接、修正してください。

Wagby のバージョンアップ時は、開発者はこの修正を(バージョンアップしたWagbyにも)適用してください。

例 一覧表示の項目間を黒色にする

図1 項目間の色を変更した例
@charset "UTF-8";

.display_label_list:first-child
{
  border-style:none;
}
.display_label_list
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}

.display_field_list td:first-child,
.display_field2_list td:first-child,
.display_field_list_selected td:first-child,
.display_field2_list_selected td:first-child
{
  border-style:none;
}
.display_field_list td,
.display_field2_list td,
.display_field_list_selected td,
.display_field2_list_selected td
{
  border-style:solid;
  border-width:0px 0px 0px 1px;
  border-color:#000;
}

例 フォーカスセット時に背景色と入力欄を囲む枠を表示する

テキストボックス、日付ドロップダウンカレンダ、リストボックス、テキストエリアにフォーカスがセットされた時に背景色と入力欄を囲む枠を表示することができます。

@charset "UTF-8";

div.dijitTextBoxFocused.dijitTextBox,
table.dijitSelectFocused.dijitSelect,
textarea.dijitTextBoxFocused.dijitTextBox {
 /* 背景色を変える */
 background: #FFF8DC;
 /* 入力欄を囲む枠を表示する */
 outline: 3px solid #CBE6F3;
}
.soria table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents,
.tundra table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents,
.nihilo table.dijitSelectFocused.dijitSelect > tbody > tr > td.dijitReset.dijitStretch.dijitButtonContents 
{
  /* リストボックスの背景色を変える */
  background: #FFF8DC;
}

CSS テーマ soria, tundra, nihilo はリストボックスのテーブルに背景画像が設定されているため、その対応を行っています。

例 model1のページタイトルを変更する

model1 のすべての画面に反映させる場合は customize\webapp\model1\My.css を用意します。

.pagetitle {
  border-left: 10px solid #6BBF3F;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#95FF65",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #95FF65, #FFFFFF);
  background: -moz-linear-gradient(right, #95FF65, #FFFFFF);
  background: -ms-linear-gradient(right, #95FF65, #FFFFFF);
  background: -o-linear-gradient(right, #95FF65, #FFFFFF);
  background: linear-gradient(to right, #95FF65, #FFFFFF);
}

例 model1の登録画面のページタイトルを変更する

画面を限定させる場合は画面識別子を指定します。登録画面は Insert とモデルIDで表現します。customize\webapp\model1\MyInsertModel1.css を用意します。

.pagetitle {
  border-left: 10px solid #CC0000;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#FF2819",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #FF2819, #FFFFFF);
  background: -moz-linear-gradient(right, #FF2819, #FFFFFF);
  background: -ms-linear-gradient(right, #FF2819, #FFFFFF);
  background: -o-linear-gradient(right, #FF2819, #FFFFFF);
  background: linear-gradient(to right, #FF2819, #FFFFFF);
}

例 model1の更新画面のページタイトルを変更する

更新画面は Update とモデル ID で表現した画面識別子を使います。customize\webapp\model1\MyUpdateModel1.css を用意します。

.pagetitle {
  border-left: 10px solid #E49B0F;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#FBE731",endColorstr="#FFFFFF");
  background: -webkit-linear-gradient(left, #FBE731, #FFFFFF);
  background: -moz-linear-gradient(right, #FBE731, #FFFFFF);
  background: -ms-linear-gradient(right, #FBE731, #FFFFFF);
  background: -o-linear-gradient(right, #FBE731, #FFFFFF);
  background: linear-gradient(to right, #FBE731, #FFFFFF);
}

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

変更する範囲開発者が作成するファイル保存フォルダ (*4)
アプリケーション全体mycommon.jscustomize\webapps\system
モデル単位My.jscustomize\webapps\<モデルID>
画面単位My<画面識別子>.jscustomize\webapps\<モデルID>
メニューmenu.js (*5)customize\webapps\system
4. インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身で必要なフォルダの作成を行ってください。
5. 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 を設定することで非表示化しています。

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

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 ファイルの内容をテキストエディタで確認してください。

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

(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();
     }
   });
 });
}

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

このスクリプトを 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(["dijit/registry", "dojo/ready"], function(registry, ready) {
  ready(function() {
    // メニュー表示エリアを取得する
    var mainMenuContainer = registry.byId("mainMenuContainer");
    if (!mainMenuContainer) {
      return
    }
    // メニュー表示エリアの高さを変更する
    mainMenuContainer.resize({h: 700});
  });
});
  • 1行目から11行目までは、標準で同梱されている system/menu.js と同じ内容です。13行目以降が追加したスクリプトになっています。
  • 上の例では 700 ピクセルとしています。この値を適切に変更してください。(*6)
6. JavaScriptでウインドウの高さを取得することはできますが、Wagbyは「サブメニュー」など、上部にさまざまなコンテンツを含めた画面レイアウトとなっているため、ブラウザのウインドウの高さをそのままセットすることはできません。

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

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

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

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

例えば独自で開発した CSS ファイルや、jquery読み込みのためのscriptタグの指定といったケースがあります。

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

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

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

標準で同梱されている、または Wagby が生成した JSP ファイルの修正は、常に上書き保存になります。保存先フォルダの起点は次のとおりです。

customize\webapp

このフォルダを起点に、生成されたアプリケーションのフォルダ構成に対応したカスタマイズファイルを保存してください。

自動生成されたファイルをカスタマイズしたあとにモデル定義を変更した場合、追加した定義にあわせてカスタマイズファイルも手動で修正する必要があります。そのため上書き保存方式によるカスタマイズはモデルの構造が固まったあとで行うことを推奨します。

Wagbyが提供する標準エラー画面は次のとおりです。これをカスタマイズすることで表示内容を変更することができます。

ファイル (*6) 説明
error/4xx.jsp HTTPステータスコードが400系の場合に表示されます。
error/5xx.jsp HTTPステータスコードが500系の場合に表示されます。
6. これらのファイルはビルドしたアプリケーション wagbyapp/webapps/$APPNAME 直下に用意されています。

仕様・制約

401,402などのコードにあわせた個別のメッセージを表示する場合は、4xx.jsp内にif文を記述して振り分けるようにしてください。

Wagby Developer Day 2018