Contents
保守性の向上で必要なHTMLの考え方
静的なサイトであっても、動的なサイトであっても保守性を向上させるためにもすべて静的なHTMLファイルで書くのは得策ではありません。
多くのサイトでは
ほぼ決まっている部分
- ヘッダー
- 左側のコンテンツ
- フッター
動的(ページにより変わる)部分
- 中のコンテンツの部分
に分かれていることが一般的です。
例えばテンプレートのようなものを作り、「決まっている部分」と「中のコンテンツの部分」と分けておき、それを組み合わせることでページを作ります。
JSFでも当然これをサポートするような仕組みがあります。
サンプル
まず下記のような2つのページを表示することを考えます。
ページ1
ページ2
ファイル構成
ファイル構成は下記のようになります。
- ヘッダー header.xhtml
- サイドバー left.xhtml
- フッター footer.xhtml
- テンプレート newTemplate.xhtml
- ※アクセスファイル site.xhtml
- アクセスファイル2 site2.xhtml
※URLで直接見えるファイルのことです。
ソース
実際のソースは下記のようになります。
静的なファイル群
気を付けるべきはui:compositionのタグの中しか読み込まれないので、その前後に書いても出力されません。
その中は通常のHTMLかJSFで定義されているタグを使うことができます。
ヘッダー header.xhtml
1 2 3 4 5 6 7 8 9 10 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <ui:composition > <h1>サンプル</h1> ここはヘッダーです。 </ui:composition> </html> |
サイドバー left.xhtml
1 2 3 4 5 6 7 8 9 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <ui:composition > <p>画面左側です</p> </ui:composition> </html> |
フッター footer.xhtml
1 2 3 4 5 6 7 8 9 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <ui:composition > <p>フッターです</p> </ui:composition> </html> |
テンプレート
もっとも大事な部分になります。
基本的にここでファイルの構成をきめることになりますので、
- CSSやJSなどの読み込みを行う
- 静的なページの読み込みは<ui:inclue src=”~”>で行う
- 動的な部分は<ui:insert name=”~”>で定義しておく
テンプレート newTemplate.xhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <h:outputStylesheet name="./css/default.css"/> <h:outputStylesheet name="./css/cssLayout.css"/> <title>Facelets Template</title> </h:head> <h:body> <div id="top"> <ui:include src="header.xhtml"/> </div> <div> <div id="left"> <ui:include src="left.xhtml" /> </div> <div id="content" class="left_content"> <ui:insert name="content"></ui:insert> </div> </div> <div id="bottom"> <ui:include src="footer.xhtml" /> </div> </h:body> </html> |
アクセスファイル
URLから直接呼ばれるファイルです。テンプレートの読み込みと、動的な部分の定義を行います。
ポイントとしては
- 動的な部分の定義、<ui:define name=”~”>の部分がtemplateのinsertに対応する。(このnameは当然templateのinsertのnameと一緒。)
- ui:compositonの中のみが読み込まれる。
アクセスファイル site.xhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <ui:composition template="./newTemplate.xhtml"> <ui:define name="content"> <div> <p> 1ページ目です。 </p> </div> </ui:define> </ui:composition> </html> |
アクセスファイル2 site2.xhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <ui:composition template="./newTemplate.xhtml"> <ui:define name="content"> <div> <p> 2ページ目です。 </p> </div> </ui:define> </ui:composition> </html> |
また動的な部分をさらに別ファイルにする場合は、site.xhtmlの場合、下記のように書いてもOKです。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <ui:composition template="./newTemplate.xhtml"> <ui:define name="content"> <ui:include src="hogehogexhtml" /> </ui:define> </ui:composition> </html> |
なお、headerやfooterなどもページによっては変えることがあると思いますので、その場合はtemplateで<ui:insert>で定義しておき、アクセスポイントで<ui:define>を使います。
Netbeansでの補完機能
Netbeansを使うと、
テンプレートは
右クリック→新規→その他→「JavaServerFaces」→「Faceletsテンプレート」
で作れます。
CSSなんかも適当に作ってくれるのでこれを使えばモックアップ的なものはかなり高速に作れます。
Netbeansはまだまだ無限の可能性を秘めてますね・・・
参考リンク
キャプチャもあって大変わかりやすかったです。