PrimeFaces Themes für Xpert.ivy installieren und erstellen

Mit PrimeFaces Themes können Sie Ihrer Applikation mit nur wenig Aufwand ein komplett neues Aussehen geben. Ich werde Ihnen zeigen, wie Sie Themes von der PrimeFaces Theme Gallery in Xpert.ivy installieren können und wie Sie Ihr eigenes mit jQuery ThemeRoller erstellen können.

Unter http://www.primefaces.org/themes.html finden Sie über 30 Themes die Sie installieren können. Die Downloads für die Themes befinden sich unter http://repository.primefaces.org/org/primefaces/themes.

Ich werde das Redmond Theme in diesem Beispiel hier installieren. Sie könne es unter http://repository.primefaces.org/org/primefaces/themes/redmond/1.0.8/redmond-1.0.8.jar herunterladen.

Kopieren Sie redmond-1.0.8.jar in das webapps/ivy/WEB-INF/lib Verzeichnis des Designers.

Als nächstes müssen Sie webapps/ivy/WEB-INF/web.xml in einem Texteditor öffnen. Suchen Sie nach dem context-param mit dem param-name primefaces.THEME. Ersetzen Sie den param-value mit redmond.

Nun können Sie den Xpert.ivy Designer neu starten und Ihre Html User Dialoge erscheinen nun in diesem Theme.

Falls keines der verfügbaren Themes Ihrem Geschmack entspricht, können Sie mit dem jQuery ThemeRoller Ihr eigenes Theme erstellen und in Xpert.ivy installieren.

Öffnen Sie den ThemeRoller unter http://jqueryui.com/themeroller und gestalten Sie Ihr eigenes Theme. Wenn Sie zufrieden sind, klicken Sie auf Download theme. Scrollen Sie ganz nach unten und laden Sie das Theme herunter.

Nachdem Sie das Theme heruntergeladen haben, entpacken Sie das Zip und wechseln Sie in das css/theme-name Verzeichnis der entpackten Zip Datei.

Bevor wir das Theme verwenden könnnen, müssen wir noch ein paar Anpassungen vornehmen.

Löschen Sie als erstes jquery-ui-1.9.2.custom.min.css. Als nächstest müssen Sie jquery-ui-1.9.2.custom.css nach theme.css umbenennen.

Öffnen Sie theme.css in einem Texteditor. Sie müssen die Urls zu den Bildern anpassen. Hier ein Beispiel:

Vorher: url(images/einbild.png)

Nachher: url("#{resource['primefaces-xpertivy-hacker:images/einbild.png']}")

Falls Sie einen anderen Namen als xpertivy-hacker für das Theme gewählt haben, müssen Sie primefaces-xpertivy-hacker mit primefaces-ihr-theme-name ersetzen. Dies gilt für den Rest dieses Tutorials überall wo Sie xpertivy-hacker sehen.

Wenn Sie theme.css mit Notepad++ geöffnet haben, können Sie die Urls folgendermassen automatisch ersetzen lassen:

• Drücken Sie CTRL+h um den Search/Replace Dialog zu öffnen
• Wählen Sie Regular expression bei den Search Mode Optionen aus
• Suchen Sie nach url\((.+)\)
• Ersetzen Sie mit url("#{resource['primefaces-xpertivy-hacker:\1']}")
• Klicken Sie Replace All

Erstellen Sie nun folgende Ordnerstruktur:

• META-INF
• resources
• primfaces-xpertivy-hacker

Verschieben Sie theme.css und das images Verzeichnis in das primefaces-xpertivy-hacker Verzeichnis. Zum Schluss müssen Sie aus dem META-INF Verzeichnis eine Zip Datei machen und nach xpertivy-hacker.jar umbennen. Beachten Sie, dass die gezipte Datei nun mit .jar und nicht mehr mit .zip endet.

Jetzt ist Ihr Theme fertig. Kopieren Sie das Jar wie vorher in das lib Verzeichnis und ändern Sie den Wert für primefaces.THEME im web.xml auf xpertivy-hacker.

Starten Sie den Xpert.ivy Designer neu und probieren Sie Ihr eigenes Theme aus.

Weiterführende Ressourcen

PrimeFaces Theme pro Projekt konfigurieren

PrimeFaces Dokumentation

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Email Address

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.