サポート > Wagby Developer Network > 見栄えのカスタマイズ > レイアウト構造
Wagby が標準で提供する画面は、各部品（パーツ）から構成されています。
各部の名称
Wagby の画面レイアウトは、次のように各部分に名前がついています。
図1 画面レイアウト
（クリックすると拡大画像が表示されます）
| 名称 | 説明 | 自動生成されるファイル |
|---|---|---|
| title | Web ブラウザのタイトル部です。 | ○ |
| header | アプリケーション名を表示します。 | ○ |
| globallink | 共通で使われるリンクを表示します。 | - |
| submenu | メニューをコンパクトに表示します。 | - |
| pankuzu | パンくずが表示されます。 | - |
| pagetitle | 画面名称が表示されます。 | ○ |
| sidebar | サイドバー部分です。ここに「Wadget」（ワジェット）と呼ばれる小さなプログラム（JSP）が配置されます。 | ○ |
| description | この画面の説明文章が表示される部分です。 | ○ |
| errormsg | エラーメッセージが表示される部分です。 | - |
| body | モデルの情報が表示される部分です。 | ○ |
| action | モデルに関する操作ボタンが表示される部分です。 | - |
| logonuserinfo | ログオンユーザ名が表示される部分です。 | - |
| footer | フッターが表示される部分です。 | ○ |
各部品を構成する要素は、拡張子 ".jsp" が付与されたファイルとなっています。
「自動生成されるファイル」とは、Wagby ビルダによる「定義ファイルの変換」処理のたびに作り直されることを示します。 それ以外のファイルは、$(DEVHOME)\env\template\jspc フォルダに用意されています。
レイアウト定義ファイル
このレイアウトを定義したファイルは、$(DEVHOME)\env\template\base_classic2.jsp になります。 このファイルは基本的な配置のみを行い、デザインは CSS で行っています。
...
<html>
...
<body class="${sessionScope.__jfc_cssfilename}" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding: 10; margin: 0; border: 0;" onLoad="Initializer.init();" onUnload="Initializer.fin();">
<%-- Dojo Layout container --%>
<div id="dojolayout" dojoType="dijit.layout.BorderContainer" style="width:100%; height: 100%; padding:0; margin:0; border:0;">
<%-- page top --%>
<div id="toparea" dojoType="dijit.layout.ContentPane" region="top">
<tiles:insert attribute="header"/>
<tiles:insert attribute="globallink"/>
<tiles:insert attribute="submenu"/>
<tiles:insert attribute="pankuzu"/>
</div>
<%-- page top --%>
<%-- 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 --%>
<%-- main content --%>
<div id="centerarea" dojoType="dijit.layout.ContentPane" region="center" style="height: 80%; padding: 0.1em 0.3em 0.5em 0.3em; margin-right: 0.2em; visibility: hidden;">
<tiles:insert attribute="pagetitle"/>
<tiles:insert attribute="description"/>
<div align="center">
<tiles:insert attribute="errormsg"/>
<tiles:insert attribute="navigationbar"/>
<tiles:insert attribute="body"/>
</div>
</div>
<%-- main content --%>
<%-- page bottom --%>
<div id="bottomarea" dojoType="dijit.layout.ContentPane" region="bottom" style="height: 2.5em; visibility: hidden;">
<!-- side bar control -->
<c:choose>
<c:when test="${sessionScope.__jfc_sidebar_mode == true}">
<div style="padding:0; margin:0">
<a href= "${__jfc_request_uri}?action_ChangeSidebar=${sessionScope.__jfc_sidebar_mode}">
<img src="img/sidebar_off.gif" border="0"/>
</a>
</div>
</c:when>
<c:otherwise>
<div>
<a href= "${__jfc_request_uri}?action_ChangeSidebar=${sessionScope.__jfc_sidebar_mode}">
<img src="img/sidebar_on.gif" border="0"/>
</a>
</div>
</c:otherwise>
</c:choose>
<tiles:insert attribute="logonuserinfo"/>
<tiles:insert attribute="footer"/>
<tiles:insert attribute="endbody"/>
</div>
<%-- page bottom --%>
</div>
</body>
</html>
ここで、<tiles:insert> タグは attribute 属性に記述された部品（JSPファイル）を埋め込むという意味です。
tiles-defs.xml
各部品（JSPファイル）と base_classic2.jsp 内の<tiles:insert>タグを結びつけているのが $(DEVHOME)\env\work\srcgen\webpage\WEB-INF\tiles-defs.xml ファイルです。 このファイルは自動生成されます。
<tiles-definitions>
<definition name="classic2.page" path="/base_classic2.jsp">
<put name="beandef" value="/parts/beandef.jsp"/>
<put name="body" value="/parts/body.jsp"/>
<put name="description" value="/parts/description.jsp"/>
<put name="endbody" value="/parts/endbody.jsp"/>
<put name="errormsg" value="/parts/errormsg.jsp"/>
<put name="footer" value="/parts/footer.jsp"/>
<put name="globallink" value="/parts/globallink.jsp"/>
<put name="header" value="/parts/header.jsp"/>
<put name="javascript" value="/parts/javascript.jsp"/>
<put name="logonuserinfo" value="/parts/logonuserinfo.jsp"/>
<put name="navigationbar" value="/parts/navigationbar.jsp"/>
<put name="pagetitle" value="/parts/pagetitle.jsp"/>
<put name="pankuzu" value="/parts/pankuzu.jsp"/>
<put name="sidebar" value="/parts/sidebar.jsp"/>
<put name="submenu" value="/parts/submenu.jsp"/>
<put name="title" value="/parts/title.jsp"/>
</definition>
...
最初の definition 要素で、base_classic2.jsp というファイルに "classic2.page" という名前をつけています。 この名前は、同ファイルの中で識別子として用いられます。
各 put 要素では、<tiles:insert>タグ内の attribute 属性で指定された名前が、実際に参照するファイルとの関連付けを指定しています。 例えば、"body" という名前は、実際には body.jsp ファイルを使う、というような定義になっています。
各画面毎の definition 要素については、ボディ部の構造で説明します。
