サポート > Wagby Developer Network > 見栄えのカスタマイズ > サイドバー部

サイドバーの構造


図1 サイドバー
(クリックすると拡大画像が表示されます)

サイドバーの幅や高さは、$(DEVHOME)\env\template\base_classic2.jsp ファイルで決められています。 これは Dojo が提供する「アコーディオン」という部品を使っています。

  <%-- side bar --%>
  <c:choose>
    <c:when test="${sessionScope.__jfc_sidebar_mode == true}">
    <div id="sidebararea" class="sidebararea" dojoType="dijit.layout.ContentPane" region="left" style="width: 8em;">
      <div dojoType="dijit.layout.AccordionContainer" region="leading" style="height: 80%;" splitter="true">

        <tiles:insert attribute="sidebar"/>
      </div>
    </div>
    </c:when>
    <c:otherwise>
      <div id="sidebararea" dojoType="dijit.layout.ContentPane" region="left" style="width: 0%; visibility: hidden;"></div>
    </c:otherwise>
  </c:choose>
  <%-- side bar --%>

tiles:insert タグによって組み込まれる sidebar 部はモデル毎に自動生成される xxx_sidebar.jsp ファイルです。この内容は通常、次のようになっています。

<%@ page pageEncoding="UTF-8" %>
<fmt:setBundle basename="jfcapp"/>
<%@ include file="/system/sidebar.jsp" %>

ここで、include ディレクティブによって組み込まれる $(DEVHOME)\env\webpage\system\sidebar.jsp ファイルは Wadget の表示を行うものです。

サイドバー部は、次のように使われます。

Wadget を組み込む (標準)

Wadget (ワジェット)とは、サイドバー内で動作する小さなプログラムのことです。

開発者は任意の Wadget を作成し、Wagby に登録することができます。 詳細はWadget の開発をお読み下さい。

サブメニューを表示する

Wagby の標準では、サブメニューはタイトルの直下に位置づけられています。
このサブメニューを、サイドバー部で表示させるように設定できます。

Wagby 定義ファイルの一つである「project_env.xls」(xls-project フォルダ内)を編集します。 「customize」タブ内にある「サイドバー部分へのサブメニュー表示」という項目を「○」にし、ビルドを行ってください。

カスタマイズ方法

色やフォントを変更する

CSS ファイルを変更します。 詳細はテーマ別 CSS の解説をお読みください。

サイドバーの文言を変更する

メッセージWadgetのページをお読みください。