レイアウトを変更する
1) Weber4.0のレイアウト制御について
これまでのサンプルでもご紹介しましたようにWeberCreatorで 作成したWebアプリケーションは、
- ヘッダー部分にシステムのタイトル
- フッター部分にCopyrightの文言
- 左ペインにメニュー
- メインコンテンツ領域にマスタ登録、参照系の画面
から構成された画面になっています。
たとえば、以下のサンプルはメッセージ一覧を表示した時の画面ですが、
メッセージ一覧画面の元ソース（message_search.html）を ブラウザで開いてみるとこんな感じに表示されます。
メッセージ一覧画面に表示されていたヘッダーのタイトルやメニュー表示が
ありません。
実は、画面全体の構成レイアウトやヘッダー、フッター、メニューといった部分はそれぞれ独立したHTMLファイルから構成されており、メッセージ一覧画面
を表示するときにWeberフレームワークがこれらのHTMLファイルを一まとまりのWeb画面にマージしてくれます。
たとえば、画面全体を構成するレイアウト用のHTML（layout/layout.html）をブラウザで開くと以下の画面が表示さ れます。
ヘッダー用HTML(/layout/header.html）、フッター用HTML（/layout/fudder.html）、メニュー用HTML （/message/message_menu.html）はそれぞれ以下の画面になります。
図 ヘッダー用 HTML(/layout/header.html）
図 フッター用 HTML（/layout/fudder.html）
図 メニュー用 HTML （/message/message_menu.html
これらのファイルはそれぞれ以下のフォルダにあります。
2) レイアウトのカスタマイズ
それでは、レイアウトを編集して以下のような画面を表示するように変更してみましょう。
図 ヘッダーにメッセージ管理、カテゴリ管理へのリンクを表示するレイア ウト
今回修正する箇所はレイアウト用のHTMLになります。下記 緑色部分を追記してください。
変更はこれだけです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<link rel="stylesheet" type="text/css" href="./../../css/stylesheet.css"/>
<span w_kind="include" w_name="head"/>
</head>
<body>
<div id="container">
<div id="header">
<span w_kind="include" w_name="header">
<h2>ヘッダー表示エリア（実行時にlayout/header.htmlのbody要素がここに出力されます)</h2>
</span>
</div>
<!-- ここから追加 -->
<ul id="topmenu">
<font color="white">|</font>
<li><a href="./web-contents/message/search.wb">メッセージ管理</a></li>
<font color="white">|</font>
<li><a href="./web-contents/category/search.wb">カテゴリ管理</a></li>
<font color="white">|</font>
<li><a href="./web-contents/weber/weber_login.html">ログイン</a></li>
<font color="white">|</font>
<li><a href="./web-contents/weber/logout.wb">ログアウト</a></li>
</ul>
<!-- ここまで追加 -->
<div id="wrapper">
<div id="content">
<span w_kind="include" w_name="body">
<br/>
<br/>
コンテンツ表示エリア<br/>
実行時に各ＷＥＢページのbody要素がここに出力されます<br/>
<br/>
<br/>
<br/>
</span>
</div>
</div>
<div id="navigation">
<span w_kind="include" w_name="menu">
<br/>
メニュー表示エリア<br/>
<br/>
<br/>
<br/>
</span>
</div>
<div id="footer">
<span w_kind="include" w_name="fudder">
フッター表示エリア<br/>
</span>
</div>
</div>
</body>
</html>
編集が終わりましたら、コンパイルして実行してみてください。
メッセージ一覧画面だけでなく、そのほかの画面も同じレイアウトが適用されているハズです。
図 レイアウト変更 後のログイン画面