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

Wagbyが自動生成した画面を修正する方法を説明します。

標準で同梱されている、または自動生成されたJSP,JavaScript,CSSファイルを修正します。
修正したファイルは「上書き保存」となります。保存先フォルダの起点は次のとおりです。

customize\webapp

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

ご注意ください

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

ファイルを置換する方法

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

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

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

wagbyapp\webapps\wagby\cssフォルダ内に標準のcssファイルが含まれています。標準の common.css を修正する場合、mycommon.css に変更したい箇所のみを記述し、次の場所に(修正したファイルを)保存します。

customize\webapp\css\mycommon.css
インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身でcssフォルダの作成を行ってください。
mycommon.css に記載した内容(CSS)は、どの「テーマ (claro,soria,tundra,nihilo)」にも適用されます。テーマ毎に指定したい場合は、wagbydesigner\bin\webpage\css 内のテーマ別ファイルを直接、修正してください。この場合は Wagby のバージョンアップの都度、この修正を反映させる必要があります。

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

図 項目間の色を変更した例
@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;
}

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

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

@charset "UTF-8";

div.dijitTextBoxFocused.dijitTextBox,
table.dijitSelectFocused.dijitSelect,
textarea.dijitTextBoxFocused.dijitTextBox {
  /* 背景色を変える */
  background-color: #FFF8DC;
  /* 入力欄を囲む枠を表示する */
  outline: 3px solid #CBE6F3;
}

開発者はモデル単位で利用されるCSSファイルを用意することができます。例えばモデル model1 の場合、model1/My.css というファイルを作成してください。CSSファイルの適用順は (1) common.css (2) mycommon.css (3) <モデルID>/My.css になります。

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

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

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

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

開発者は画面ごとに利用されるCSSファイルを用意することができます。例えばモデル model1 の新規登録画面には model1/MyInsertModel1.css というファイルを作成してください。CSSファイルの適用順は (1) common.css (2) mycommon.css (3) <モデルID>/My.css (4) <モデルID>MyInsertModel1.css になります。

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

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の更新画面のページタイトルを変更する

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

wagbyapp\webapps\wagby\tiles2-base_classic2.jspを修正します。 cssファイルや、jquery読み込みのためのscriptタグの指定などはこのファイルを修正するとよいでしょう。

修正したファイルを次の場所に保存し、ビルドを行います。

customize\webapp\tiles2-base_classic2.jsp

mycommon.js という(空の)カスタマイズ専用 js ファイルを用意しています。 このファイルにコードを記述し、systemフォルダに保存します。

customize\webapp\system\mycommon.js

ビルドを行うことで、すべての画面で mycommon.js に記載されたコードが動作します。

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

自動生成された MyXXX.js というファイルが用意されています。これは各画面専用カスタマイズ js ファイルです。こちらをご利用ください。 これをcustomize\webappフォルダ以下に保存します。例を示します。

customize\webapp\customer\MyShowCustomer.js
インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身でモデル名に対応するフォルダ(上記例では "customer")の作成を行ってください。

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

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

customize\webapp\customer\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 を作成します。

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

自動生成された XXX_javascript.jsp というファイルがあります。これにscriptタグを記載することができます。
修正後はcustomize\webappフォルダ以下に保存します。例を示します。

customize\webapp\customer\showCustomer_javascript.jsp
インストール直後は、customize\webappフォルダまでが用意されています。開発者ご自身でモデル名に対応するフォルダ(上記例では "customer")の作成を行ってください。

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

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

仕様・制約

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