PrimeFaces verwendet das Framework jQuery ThemeRoller und verfügt über 30 vordefinierte Themen. Besuchen Sie alle verfügbaren http://primefaces.org/themes.html.html , bevor Sie ein benutzerdefiniertes Thema.
In diesem Lernprogramm zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Design erstellen und in PrimeFaces anwenden.
1. ThemeRoller CSS Framework
Besuchen Sie jQuery ThemeRoller , spielen Sie mit dem Wert, um Ihr Design anzupassen, und klicken Sie auf Download.
Wählen Sie auf der Downloadseite „** Alle Komponenten abwählen“ und klicken Sie auf den Download
2. Umbenennen in theme.css
Die von ThemeRoller heruntergeladene Datei enthält die Ordner css, development-bundle und js. Wechseln Sie in den Ordner "css" und benennen Sie "jquery-ui- {version} .custom.css" in "theme.css" um.
P.S Muss theme.css sein, kein anderer Name.
3. Bildpfad ändern
Dies ist der langwierige und langweilige Pfad. Bearbeiten Sie „` theme.css` “und ersetzen Sie den vorhandenen Standard-CSS-Image-Pfad durch den JSF-Ressourcenladepfad.
Ändern Sie zum Beispiel Folgendes:
url(images/ui-bg__highlight-soft__75__cccccc__1x100.png)
zu diesem:
url("#{resource['primefaces-mytheme:images/ui-bg__highlight-soft__75__cccccc__1x100.png']}")
Hier habe ich das gemacht, editiere
theme.css
im Datei-Editor, verwende die Option
Suchen und alle ersetzen
.
Ersetzen Sie zuerst diesen
url(images
zu diesem
url("#{resource['primefaces-mytheme:images
Zweitens ersetzen Sie dies:
.png
zu diesem
.png']}"
4. Jar it
Ihr neues Design muss der folgenden Ordnerstruktur folgen:
- jar
- META-INF
- resources
- primefaces-yourtheme
- theme.css
- images
Passen Sie den Ordner an, um eine obige Ordnerstruktur zu erstellen, indem Sie nur ein paar kopieren und einfügen. Gehen Sie dann zu einer Ebene des Ordners „
META-INT
“ und geben Sie den Befehl
jar -cvf yourtheme.jar
ein, um eine` yourtheme.jar`-Datei zu erstellen.
$ jar -cvf yourtheme.jar .
Listen Sie den Inhalt der erstellten JAR-Datei auf.
$ 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. Glas auf Classpath
Kopieren Sie oben "yourtheme.jar" in den Klassenpfad des Projekts.
6. web.xml
In
web.xml
füge folgendes ein:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>yourtheme</param-value>
</context-param>
Erledigt. Das neue benutzerdefinierte Design wird erstellt und in Ihrem PrimeFaces-Projekt angewendet.
Alternative Weg
Oben erwähnt, was in PrimeFaces-Benutzerhandbuch erwähnt wird, persönlich mag ich den Jar-Prozess nicht, der ziemlich lästig ist. Stattdessen können Sie das gesamte "` primefaces-yourtheme "kopieren “Und legen Sie es direkt in den JSF-Ressourcenordner.
Es klappt!