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