プログラムの問題ではありませんが、「UIのデザインをどうしよう？」がいつも一番悩ましいところです。
適当に作ってきた反省として、今回は、マテリアルデザインを使ってみたいと思います。
マテリアルデザインを実現するフレームワークはいくつもありますが、ここでは MUI を使います。
MUIを選んだ理由は、単純に私がこれまでUIのデザインには全く疎く、一番シンプルそうに思えただけです。
とりあえずデザインは、sample に掲載されているメニューをそのまま使っています。
最初に考えた仕様とほぼ同じ構成です。
| ホームへ | ヘッダー |
|
話題リスト ： |
タイトル 本文 ： |
４画面に分割されていますが、実質は、
・ヘッダー
・サイドバー
・コンテンツ
の３つです。(フッターは使いません)
ヘッダーとサイドバーは常に表示するので、これから作ろうと思うプログラムは全て、これらを表示するように記述する必要があります。
ちょっと、面倒ですね。
「Ajaxで全部できるだろう」と思われる方もいるでしょうが、私は、JavaScript による UI 作成に慣れていないので、
今回はサーバーサイドでいきたいと思います。
※ JSPだから、Ajaxは使えないという訳じゃありません。念のために。
さて、JSPに MUI を埋め込むとして、画面ごとにに、毎回同じ記述を行うのは面白くありません。
java なら class 化するのも一つの方法ですが、こういった場合 JSP では外部ソースの インクルード が使えます。
＜%@include インクルードするJSP%＞
ここでは、ヘッダーとサイドバーを分けて、それぞれをインクルードすることにします。
前に「１つのソースで書く」という原則を崩すようですが、コンパイルは通して行われるので、便宜上分けていると思ってください。
また、このように分ける事で 1000行以上のファイルが出来ることはまずありません。
環境設定のような共通部分も分けておくと後々変更が容易になります。
余談ですが、java にインクルード機能が無いのは不思議ですね。
全部クラスで記述しろという事でしょうか・・・。
サンプルとしては、下記の様になります。
＜div class="mui-container-fluid"＞
の中に、本文が入るようにすれば良いです。
サイドメニュー(side_menu.jsp)は、
ヘッダー(header_menu.jsp)は、
| « 前頁 | 次頁 » |