PrimeFaces utilise jQuery ThemeRoller CSS framework framework , et vient avec 30 thèmes préconçus que vous pouvez télécharger et appliquer en quelques secondes. Dans ce tutoriel, nous allons vous montrer comment changer un thème n PriceFaces.
Il y a deux façons de changer de thème:
-
Utiliser Maven pour télécharger et appliquer.
-
Téléchargez manuellement et appliquez.
1. Téléchargement Maven
Pour les utilisateurs Maven, visitez le
PrimeFaces available theme
, sélectionnez un thème, mémorisez le thème défini dans Maven et configurez le
web.xml
.
Dans ce cas, nous allons vous montrer comment changer un thème par défaut (aristo) en thème glass-x.
Fichier: 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>
Fichier: web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
Exécutez-le, la couleur du thème sera changée et, à l’intérieur du code source, il pointe maintenant sur glass-x.
<!-- html source code --> <link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x"/>
2. Télécharger manuellement
Pour les utilisateurs non-Maven, il suffit de visiter le référentiel de PrimeFaces, de télécharger le fichier jar de thème manuellement, de le placer dans le chemin de classe de votre projet et de configurer le fichier
web.xml
.
Fichier: web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
Changer de thème dynamique
Un beau voyage pour utiliser l’expression EL pour appliquer un thème de manière dynamique. Voir l’extrait de code suivant:
Fichier: web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{loggedInUser.preferences.theme}</param-value>
</context-param>
P.S Reference - PrimeFaces user guide
Références
lien://tag/primefaces/[primefaces]lien://tag/thème/[thème]