16.5. テーマ
Seam アプリケーションはとても簡単にスキン変更をすることも可能です。 テーマ API はローカライゼーション API にとても似ています。ただし、もちろんこれら 2 つの関心事は関連がなく、アプリケーションの中にはローカライゼーションとテーマの両方をサポートするものもあります。
まず、サポートされるテーマのセットを設定します。
<theme:theme-selector cookie-enabled="true">
<theme:available-themes>
<value>default</value>
<value>accessible</value>
<value>printable</value>
</theme:available-themes>
</theme:theme-selector>
最初に記述されたテーマがデフォルトテーマです。
テーマはそのテーマと同じ名前のプロパティファイルにテーマとして定義されます。 例えば、
default テーマは default.properties に一連のエントリとして定義されます。 例えば、default.properties は以下のように定義します。
css ../screen.css template /template.xhtml
通常、 テーマリソースバンドルのエントリは Facelets テンプレートの名前とイメージ、 または CSS スタイルへのパスです (通常はテキストであるローカリゼーションのリソースバンドルとは異なります)。
これで JSP や Facelet ページでこれらのエントリを使えるようになりました。例えば、Facelets ページでスタイルシートを適用するには
<link href="#{theme.css}" rel="stylesheet" type="text/css" />
あるいは、 サブディレクトリにページ定義が存在している場合は次のようになります。
<link href="#{facesContext.externalContext.requestContextPath}#{theme.css}"
rel="stylesheet" type="text/css" />
最も強力な使い方として Faceletsでは
<ui:composition> で使用されるテンプレートを適用できます。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="#{theme.template}">
ロケール選択と同様、 ユーザーが自由にテーマを変更できる組み込みのテーマ選択があります。
<h:selectOneMenu value="#{themeSelector.theme}">
<f:selectItems value="#{themeSelector.themes}"/>
</h:selectOneMenu>
<h:commandButton action="#{themeSelector.select}" value="Select Theme"/>