サポート > Wagby Developer Network > 見栄えのカスタマイズ > ヘルプ画面

Wagby が提供するヘルプ画面をカスタマイズする方法を説明します。

ヘルプ画面処理の流れ

グローバルリンク部に用意されたヘルプリンクは、$(DEVHOME)\env\webpage\help\index.jsp ファイルを参照しています。このファイルは Wagby に標準で組み込まれており、画面毎に適切なヘルプ画面を呼び出すようになっています。 

...
<body>
<div align="center">
<%@ include file="../header.html" %>
</div>
<h1 class="title_help">
  <fmt:message key="__jfc_common.link.help"/>
</h1>
<p>
<c:set var="appname" value="${sessionScope.__jfc_app_name}"/>
<c:choose>
  <c:when test="${appname != null}">
    <c:import url="${appname}.html"
         charEncoding="Windows-31J"/> ...(1)
  </c:when>
  <c:otherwise>
    <fmt:message key="__jfc_common.headline.underConst"/>
  </c:otherwise>
</c:choose>
</p>
<div align="center">
[ <a href= "JavaScript:window.close()">
  <fmt:message key="__jfc_common.text.close"/>
  </a> ]
<br><br>
</body>

このファイルでは、(1) の <c:import>タグにより、${appname}.html というファイルを開くように指定されています。 ${appname} の部分には画面名が自動的に設定されます。

この ${appname}.html に対応した、画面毎のヘルプファイルはすべて自動生成されます。具体的には、次のようになっています。

詳細表示画面のヘルプ

ファイル showStaff.html の例を示します。 

<h2>スタッフ詳細表示</h2>
詳細表示画面です。

新規登録画面のヘルプ

ファイル insertStaff.html の例を示します。 

<h2>スタッフ新規登録</h2>
新規登録画面です。

一覧表示画面のヘルプ

ファイル showListStaff.html の例を示します。 

<h2>スタッフ検索</h2>
一覧表示画面です。

ファイル置き換え

ヘルプ画面のカスタマイズは、次の手順で行ってください。

  1. $(DEVHOME)\env\work\srcgen\webpage\help フォルダに自動生成された各種ヘルプファイルをそれぞれ修正します。
  2. 修正したファイルを、$(DEVHOME)\customize\webpage\help フォルダに保存します。

CSS ファイル

ヘルプ画面用の CSS ファイルとして、$(DEVHOME)\env\webpage\help\help.css が提供されています。 開発者は必要に応じて、同ファイルを修正してください。

テンプレートファイルのカスタマイズ

開発者は、自動生成される HTML ファイルのテンプレートを編集することもできます。 これらのファイルは、$(DEVHOME)\env\template\html\__help_XXX.html として提供されます。

このファイルを編集することで、処理毎に統一されたヘルプ画面を生成させることができるようになります。 （ここで「XXX」の部分には、ファイルの拡張子が入ります。）

標準では、次のようになっています。

詳細表示画面のヘルプテンプレート

__help_show.html ファイルです。 

<h2>$block {title}</h2>
詳細表示画面です。

新規登録画面のヘルプテンプレート

__help_insert.html ファイルです。 

<h2>$block {title}</h2>
新規登録画面です。

一覧表示画面のヘルプテンプレート

__help_showlist.html ファイルです。 

<h2>$block {title}</h2>
一覧表示画面です。

ヘルプアイコンを押下すると PDF を閲覧できるようにする

画面右上に表示されているヘルプのアイコンをクリックすると、すぐに PDF ファイルを閲覧できるようにすることもできます。 この場合は globallink.jsp ファイルを編集します。

$(DEVHOME)\env\template\jspc\globallink.jsp の編集例を示します。 

<%@ page pageEncoding="UTF-8"%>
<fmt:setBundle basename="jfcapp"/>
...
    <td><a href ="help/manual.pdf" >
      <div class="btnPopAppHelp"></div></a></td>
...

ヘルプアイコンをクリックすると、help/manual.pdf が開くようになります。 manual.pdf 自体は、開発者の方で別途ご用意の上、$(DEVHOME)\customize\webpage\help フォルダへ保存します。

このページ

見栄えのカスタマイズ