[Subsonic Airlines] 会員登録画面 – テンプレートの作成

今回は、テンプレートについて説明します。

これまでの記事
設定ファイルの作成
http://subsonic.info/ja/2015/08/23/subsonic-airlines-会員登録画面-設定ファイルの作成/

ソースコード
https://github.com/subsonicsystems/subsonic-airlines-members


テンプレートを使用すると、複数の画面で共通の構成を利用することができます。JSF標準の
テンプレートは、Faceletsです。

http://subsonic.info/ja/2015/08/12/subsonic-airlines-faceletsの使用/

/WEB-INF/templates/default.xhtml

<!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:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <f:view transient="true">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <h:outputStylesheet library="css" name="screen.css"/>
            <title><h:outputText value="Subsonic Airlines"/></title>
        </h:head>
        <h:body>
            <div>
                <p:graphicImage library="images" name="header.png" styleClass="header"/>
            </div>
            <div>
                <ui:insert name="content"/>
            </div>
            <div class="height300"></div>
            <div>
                <h:outputText value="&#169; 2015 Subsonic Airlines"/>
            </div>
        </h:body>
    </f:view>
</html>

今回は、テンプレートファイルを/WEB-INF/templates/default.xhtmlとしていますが、ディレクトリとファイル名は任意に決めることができます。

f:viewタグでtransient=”true”を指定するとステートレスモードとなり、セッションタイムアウトによるViewExpiredExceptionが発生することを防ぎます。

h:outputStylesheetタグのlibraryは、ディレクトリを指定します。nameは、ファイル名を指定します。今回は、library=”css”、name=”screen.css”となっているので、/resources/css/screen.cssを参照します。

h:outputTextタグは、文字列を出力します。valueに出力する文字列を指定します。

p:graphicImageタグは、imgタグを出力します。library=”images”、name=”header.png”と指定しているので、/resources/images/header.pngを参照します。

styleClassは、imgタグのclassに対応しています。

ui:insertタグは、テンプレートを呼び出す側のxhtmlファイルのui:defineタグに対応しています。例として、/index.xhtmlファイルについて説明します。

/index.xhtml

<!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"
      xmlns:p="http://primefaces.org/ui">
    <h:body>
        <ui:composition template="/WEB-INF/templates/default.xhtml">
            <ui:define name="content">
                <h:outputText value="Subsonic Airlinesへようこそ"/>
                <p/>
                <p:link outcome="/register/input" value="会員登録"/>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

ブラウザから/index.xhtmlにアクセスがあった際、index.xhtmlのui:compositionタグにおいて、template=”/WEB-INF/templates/default.xhtml”と指定しているので、/WEB-INF/templates/default.xhtmlがテンプレートとして使用されます。

そして、index.xhtmlではなく、default.xhtmlが出力されます。

その際にdefault.xhtmlのui:insertタグで、name=”content”と指定しているので、このタグの部分が
index.xhtmlの<ui:define name=”content”>と</ui:define>で囲まれた部分に置き換えられます。

逆に言えば、index.xhtmlのui:defineタグの外側の部分については、出力対象となりません。

次回に続きます。