PrimeFaces verwendet jQuery ThemeRoller CSS-Design-Framework und verfügt über 30 vordefinierte Designs, die Sie in Sekundenschnelle herunterladen und anwenden können. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Thema in PriceFaces ändern können.
Es gibt zwei Möglichkeiten, ein Thema zu ändern:
-
Herunterladen und Anwenden mit Maven.
-
Manuell herunterladen und anwenden.
1. Maven-Download
Für Maven-Benutzer besuchen Sie dieses PrimeFaces verfügbare Thema , wählen Sie ein Thema aus, und merken Sie sich das in Maven definierte Thema.
In diesem Fall zeigen wir Ihnen, wie Sie ein Standarddesign (Aristo) in ein Glass-X-Design ändern.
Datei: 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>
Datei: web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
Wenn Sie es ausführen, wird die Designfarbe geändert. Wenn Sie in den Quellcode schauen, zeigen Sie jetzt auf glass-x.
<!-- html source code --> <link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x"/>
2. Manuell herunterladen
Wenn Sie kein Maven-Benutzer sind, besuchen Sie einfach das Repository von PrimeFaces, laden Sie das Design-Jar manuell herunter, legen Sie es in Ihren Projektklassenpfad und konfigurieren Sie die
web.xml
.
Datei: web.xml
//...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
Motiv ändern
Eine schöne Reise, um mit EL expression ein Thema dynamisch anzuwenden. Siehe das folgende Code-Snippet:
Datei: web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{loggedInUser.preferences.theme}</param-value>
</context-param>
P.S Referenz - PrimeFaces Benutzerhandbuch