Créer un thème personnalisé dans PrimeFaces

PrimeFaces utilise jQuery ThemeRoller , et il est fourni avec 30 thèmes prédéfinis. Visitez tous les themes disponibles, avant de créer un thème personnalisé.

Dans ce tutoriel, nous allons vous montrer comment créer un thème personnalisé et l’appliquer dans PrimeFaces.

1. Framework CSS de ThemeRoller

Visitez jQuery ThemeRoller , jouez avec la valeur pour personnaliser votre thème et cliquez sur Télécharger.

jquery themeroller

Sur la page de téléchargement, sélectionnez “ Désélectionner tous les composants “, puis cliquez sur le bouton de téléchargement.

2. Renommez le fichier theme.css.

Le fichier que vous avez téléchargé à partir de ThemeRoller aura les dossiers css, bundle de développement et js. Allez dans le dossier css, renommez jquery-ui- {version} .custom.css en` theme.css`.

P.S Doit être theme.css , pas d’autre nom.

3. Changer le chemin de l’image

C’est le chemin fastidieux et ennuyeux, éditez “` theme.css` “, remplacez tout le chemin d’image css standard existant par le chemin de chargement de ressources JSF.

Par exemple, changez ceci:

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

pour ça :

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

Voici ce que je faisais, éditez theme.css dans l’éditeur de fichier, utilisez search et remplacez toutes les options

Tout d’abord, remplacez ceci

url(images

pour ça

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

Deuxièmement, remplacez ceci:

.png

pour ça

.png']}"

4. Jar It

Votre nouveau thème doit suivre la structure de dossiers suivante:

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

Ajustez le dossier pour créer une structure de dossier ci-dessus, juste quelques copier-coller. Accédez ensuite au dossier « META-INT » et lancez la commande jar -cvf yourtheme.jar pour créer un fichier` yourtheme.jar`.

$ jar -cvf yourtheme.jar .

Répertorie le contenu du fichier JAR créé.

$ 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 sur Classpath

Copiez ci-dessus «` yourtheme.jar` »dans le chemin de classe du projet.

6. web.xml

Dans web.xml , mettez ceci:

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

Terminé. Le nouveau thème personnalisé est créé et appliqué dans votre projet PrimeFaces.

Voie alternative

Ci-dessus figurent les mentions contenues dans PrimeFaces guide de l’utilisateur , personnellement, je n’aime pas le processus Jar, qui est assez gênant. Vous pouvez plutôt copier l’intégralité de ` primefaces-yourtheme ”Et placez-le directement dans le dossier des ressources JSF.

créer un thème personnalisé dans primefaces

Ça marche!

Références

lien://tag/primefaces/[primefaces]lien://tag/thème/[thème]

TOC