サポート > Wagby Developer Network(R7) > 画面のカスタマイズ > 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 のバージョンアップの都度、この修正を反映させる必要があります。

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

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

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")の作成を行ってください。

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

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