PrimeFacesでカスタムテーマを作成する

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

PrimeFacesはhttp://jqueryui.com/themeroller/[jQuery ThemeRoller]フレームワークを使用しており、30の事前定義されたテーマが用意されています。利用可能なすべてのhttp://primefaces.org/themes.html[テーマ]を参照してください。カスタムテーマ。

このチュートリアルでは、カスタムテーマを作成してPrimeFacesに適用する方法を説明します。

1. ThemeRoller CSS Framework

jQuery ThemeRoller

にアクセスし、値を中心に遊んでテーマをカスタマイズし、ダウンロードをクリックしてください。

jquery themeroller、title = "ThemeRoller"、width = 661、height = 395

ダウンロードページで「** すべてのコンポーネントの選択を解除する」を選択し、ダウンロードをクリックします

2. theme.cssに名前を変更する

ThemeRollerからダウンロードしたファイルには、css、development-bundle、jsの各フォルダがあります。 cssフォルダに移動し、
jquery-ui- {version} .custom.css`の名前を
theme.css`に変更します。

P.S

theme.css

、他の名前は必要ありません.

3.イメージパスを変更する

これは退屈で退屈なパスです。 “` theme.css` “を編集し、既存のすべての標準CSSイメージパスをJSFリソースローディングパスに置き換えます。

たとえば、次のように変更します。

url(images/ui-bg__highlight-soft__75__cccccc__1x100.png)

これに:

url("#{resource['primefaces-mytheme:images/ui-bg__highlight-soft__75__cccccc__1x100.png']}")

ここで私がやったことは、ファイルエディタで `theme.css`を編集し、

searchを使ってすべての

オプションを置き換えます。

まず、これを置き換えます

url(images

これに

url("#{resource['primefaces-mytheme:images

次に、これを置き換えます:

.png

これに

.png']}"

4. Jar It

新しいテーマは、次のフォルダ構造に従わなければなりません:

- jar
  - META-INF
    - resources
      - primefaces-yourtheme
        - theme.css
        - images

上記のフォルダ構造を作成するようにフォルダを調整します。コピーと貼り付けはわずかです。次に、 ”

META-INT

“フォルダの1つ上のレベルに移動し、
jar -cvf yourtheme.jar`コマンドを発行して
yourtheme.jar`ファイルを作成します。

$ jar -cvf yourtheme.jar .

作成されたjarファイルの内容をリストします。

$ jar -tf yourtheme.jar
META-INF/META-INF/MANIFEST.MF
.DS__Store
META-INF/resources/META-INF/resources/primefaces-yourtheme/META-INF/resources/primefaces-yourtheme/.DS__Store
META-INF/resources/primefaces-yourtheme/images/META-INF/resources/primefaces-yourtheme/images/ui-bg__flat__0__aaaaaa__40x100.png//..image files
META-INF/resources/primefaces-yourtheme/theme.css

5.クラスパス上のJar

“yourtheme.jar”の上にコピーして、クラスパスをプロジェクトに追加します。

6. web.xml

`web.xml`に、これを入れます:

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

完了しました。新しいカスタムテーマが作成され、PrimeFacesプロジェクトに適用されます。

オルタナティブ・ウェイ

上記の内容はhttp://primefaces.org/documentation.html[PrimeFacesユーザーガイド]に記載されていますが、私は個人的にJarプロセスが嫌いです。これはかなり面倒です。代わりに、 “primefaces-yourtheme” “フォルダに保存し、JSFリソースフォルダに直接配置します。

primefacesでカスタムテーマを作成するには、title = "create-custom-theme-in-primefaces"、width = 465、高さ= 307