skillup

技術ブログ

Java

JSFのテンプレート機能

投稿日:

保守性の向上で必要なHTMLの考え方

静的なサイトであっても、動的なサイトであっても保守性を向上させるためにもすべて静的なHTMLファイルで書くのは得策ではありません。

多くのサイトでは

ほぼ決まっている部分

  • ヘッダー
  • 左側のコンテンツ
  • フッター

動的(ページにより変わる)部分

  • 中のコンテンツの部分

に分かれていることが一般的です。

例えばテンプレートのようなものを作り、「決まっている部分」と「中のコンテンツの部分」と分けておき、それを組み合わせることでページを作ります。

JSFでも当然これをサポートするような仕組みがあります。

サンプル

まず下記のような2つのページを表示することを考えます。

ページ1

page_1

ページ2

page_2

ファイル構成

ファイル構成は下記のようになります。

  • ヘッダー header.xhtml
  • サイドバー  left.xhtml
  • フッター footer.xhtml
  • テンプレート newTemplate.xhtml
  • ※アクセスファイル site.xhtml
  • アクセスファイル2 site2.xhtml

※URLで直接見えるファイルのことです。

ソース

実際のソースは下記のようになります。

静的なファイル群

気を付けるべきはui:compositionのタグの中しか読み込まれないので、その前後に書いても出力されません。

その中は通常のHTMLかJSFで定義されているタグを使うことができます。

ヘッダー header.xhtml

 

サイドバー  left.xhtml

 

フッター footer.xhtml

 

テンプレート

もっとも大事な部分になります。

基本的にここでファイルの構成をきめることになりますので、

  • CSSやJSなどの読み込みを行う
  • 静的なページの読み込みは<ui:inclue src=”~”>で行う
  • 動的な部分は<ui:insert name=”~”>で定義しておく

テンプレート newTemplate.xhtml

アクセスファイル

URLから直接呼ばれるファイルです。テンプレートの読み込みと、動的な部分の定義を行います。

ポイントとしては

  • 動的な部分の定義、<ui:define name=”~”>の部分がtemplateのinsertに対応する。(このnameは当然templateのinsertのnameと一緒。)
  • ui:compositonの中のみが読み込まれる。

アクセスファイル site.xhtml

アクセスファイル2 site2.xhtml

また動的な部分をさらに別ファイルにする場合は、site.xhtmlの場合、下記のように書いてもOKです。

なお、headerやfooterなどもページによっては変えることがあると思いますので、その場合はtemplateで<ui:insert>で定義しておき、アクセスポイントで<ui:define>を使います。

Netbeansでの補完機能

Netbeansを使うと、

テンプレートは

右クリック→新規→その他→「JavaServerFaces」→「Faceletsテンプレート」

で作れます。

CSSなんかも適当に作ってくれるのでこれを使えばモックアップ的なものはかなり高速に作れます。

Netbeansはまだまだ無限の可能性を秘めてますね・・・

参考リンク

http://d.hatena.ne.jp/shin/20100712/p1

キャプチャもあって大変わかりやすかったです。

 

-Java
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Glassfishの暴走に関して

JavaEEのアプリケーションサーバーではglassfishを使っているんですが、 メモリをかなり食うのと、頻繁に暴走してIDEからの処理を一切受け付けなくなることが多いです。 まだまだ全然対処法がわ …

no image

新アプリの本番環境デプロイについて

新しく作ったWEBアプリを本番配置しようとしたんですが、何度もやっているはずの処理がいざやろうとするといろいろと手間取ってしまい、1時間近くかかりました。 容量悪いなーと思いつつ、こういった行為はなる …

no image

クラスパスの通し方

今回はNetbeansでなく、IDEを使わずにJavaを使う場合の記事です。 Javaで開発している人の99%はIDEで開発をしていると思うのですが、サーバー上で一時的テストをしないといけないような場 …

no image

JavaSEでのCDI

以前、JavaSEでもCDIを使ってみたい!と思ったのですが、以前は探し方が悪かったのか情報を見つけ出すことができませんでした。 が、昨日ちょっと検索したらちょっと情報があり、無事実装できたのでメモし …

no image

CDIの循環依存エラー&JSFでの条件分岐について

本日は小ネタなので2つのネタをまとめます。 Contents1 CDI循環依存エラー2 JSFでの条件分岐 CDI循環依存エラー 半年近くやってますが、いまだにJavaEEでエラーがでてくると焦ります …