読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

PrimeFaces JavaScript

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

テーマの切替は通常

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

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

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>
実行結果

redmond、afterdarkはそれぞれバンドルテーマの名前です。

初期表示

redmondボタン押下

afterdarkボタン押下
f:id:kikutaro777:20130810221518j:plain

使いどころは微妙ですが(^^;まあビューだけの定義で気軽にテーマチェンジできる、ってくらいかなぁ。
この「PrimeFaces.hogehoge()」で指定できるメソッドは他にも幾つかあるようなので、気が向いたら触ってみようー。

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村