PrimeFacesのJavaScript APIでテーマチェンジ！

PrimeFacesのユーザガイドを細かく読んでいくと、意外とまだ知らない機能が多い…(^^;

テーマの切替は通常

web.xmlでパラメータ指定
ThemeSwitcherコンポーネント利用

のどちらかを使いますが、これに加えて

JavaScript API利用

という方法があることを知りました(^^:

web.xmlでパラメータ指定

おそらくこれが最も標準的な設定方法かと思います。
http://www.primefaces.org/themes.html

以下のようなcontext-paramを指定するだけです。

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>redmond</param-value>
</context-param>

動的に変える場合はparam-valueを変数としてプログラムから変えればOKです。

ThemeSwitcherコンポーネント利用

ThemeSwitcherコンポーネントは以下Showcaseで具体的に確認できます。
http://www.primefaces.org/showcase/ui/themeswitcher.jsf

テーマ変更専用のコンポーネントですね。

JavaScript API利用

で、こんな方法もあるらしいです。

PrimeFaces固有のJavaScript APIに

changeTheme(theme)

というのがあって、具体的には以下のように使えます。

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>PrimeFaces Theme Switch</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <p:panel id="pnl" header="JavaScriptでテーマチェンジ">
                <p:commandButton value="redmond" onclick="PrimeFaces.changeTheme('redmond');" />
                <p:commandButton value="afterdark" onclick="PrimeFaces.changeTheme('afterdark');" />
            </p:panel>
        </h:form>
        
    </h:body>
</html>