PrimeFacesはjQuery ThemeRoller CSSテーマフレームワーク を使用しており、ダウンロードしてすぐに適用できる30のあらかじめデザインされたテーマが付属しています。このチュートリアルでは、PriceFacesのテーマを変更する方法を説明します。
テーマを変更するには2つの方法があります:
-
Mavenを使ってダウンロードして適用する.
-
手動でダウンロードして適用してください.
1. Mavenのダウンロード
Mavenユーザーの場合は、http://www.primefaces.org/themes.html[PlimeFaces available theme]にアクセスし、テーマを選択し、Mavenで定義されているテーマを覚えて、 `web.xml`を設定します。
この場合、デフォルトテーマ（aristo）をglass-xテーマに変更する方法を説明します。
File:pom.xml
//...
<repositories>
<repository>
<id>prime-repo</id>
<name>Prime Repo</name>
<url>http://repository.primefaces.org</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>glass-x</artifactId>
<version>1.0.6</version>
</dependency>
<dependencies>
File:web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
それを実行すると、テーマの色が変更され、ソースコード内を見ると、今度はglass-xを指しています。
<!-- html source code --> <link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x"/>
2.手動でダウンロードする
Maven以外のユーザーの場合は、PrimeFacesのリポジトリにアクセスし、テーマjarを手動でダウンロードしてプロジェクトのクラスパスに配置し、 `web.xml`を設定してください。
File:web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
テーマを動的に変更する
テーマを動的に適用するためにEL式を使用する素晴らしい旅行。次のコードスニペットを参照してください。
ファイル:web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{loggedInUser.preferences.theme}</param-value>
</context-param>
P.Sリファレンス - PrimeFacesユーザーガイド