PrimeFacesのテーマを変更する

投稿日: 2019-11-05 2019-11-05
タグ: primefaces, theme

PrimeFacesはjQuery

ThemeRoller CSSテーマフレームワーク

を使用しており、ダウンロードしてすぐに適用できる30のあらかじめデザインされたテーマが付属しています。このチュートリアルでは、PriceFacesのテーマを変更する方法を説明します。

PrimeFacesテーマ、タイトル= "PrimeFaces-themes"、幅= 661、高さ= 449

テーマを変更するには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ユーザーガイド

参考文献

primefaces

theme

getdocs

13036