Templating mit Xpert.ivy und JSF

Jede nicht triviale Applikation hat ein Grunddesign das sich über die meisten Masken wiederholt. Damit man dieses Design nicht für jede Maske immer wieder Codieren muss, gibt es in JSF Templates, mit denen man an einem zentralen Ort diese Designs erstellen und, was noch viel wichtiger ist, warten kann.

In diesem Tutorial werde ich zeigen, wie man Templates in Xpert.ivy erstellt und verwendet.

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.

Demos

Ich habe 2 Demos erstellt die Application Template Demo und Decorated Template Demo heissen.

Templates erstellen

Templates sind *.xhtml Dateien die im webContent Ordner drin sein müssen.

Die Templates sollten in einem dafür vorgesehenen Ordner abgelegt werden. Dazu legt man einfach einen neuen Ordner im webContet Folder an. In diesem Beispiel heisst er templates.

Jetzt wo die Grundstruktur steht, kann man über das Kontext-Menu per New -> Other ein HTML Template anlegen.

Abb. 1: Neues HTML Template erstellen

Im Dialog wählt man nun den templates Ordner aus, gibt den Namen des Templates ein und klickt auf Next.

Abb. 2: Name des Templates eingeben

Als Template wählt man das New Facelet Template aus und klickt Finish. Das Resultat ist eine einfaches Template mit Titel, Header, Content und Footer. Dieses Template kann jetzt bearbeitet werden.

Abb. 3: Vorlage auswählen

Aufbau eines Templates

Schauen wir uns nun applicationTemplate.xhtml an und wie es von ApplicationTemplateDemo verwendet wird.

Code-Snippet 1: applicationTemplate.xhtml

Code-Snippet 2: ApplicationTemplateDemo

Wie im Code-Snippet 1 zu sehen ist, besteht ein Template nur aus HTML, ui:insert und ui:include.

ui:insert ist ein Platzhalter für den Inhalt den man per ui:define in einer Komponente, wie ApplicationTemplateDemo, definieren kann. Wenn nichts definiert ist, wird das Default das zwischen ui:insert ist verwendet.

Im Code-Snippet 2 sieht man, wie mit ui:composition das Template verwendet wird.

Interessant bei ui:composition ist auch, dass nur der Inhalt von ui:composition gerendert wird. Alles was ausserhalb von ui:composition ist, wird ignoriert.

ui:include, wie der Name schon verrät, fügt den Inhalt eines Templates ein. Ein solches Template kann wie das erste Template vorher erstellt werden, mit dem Unterschied, dass man New Facelet Composition Page als Template wählt.

Abb. 4: Facelet Composition Page

Code-Snippet 3: header.xhtml

ui:decorate

Eine Variation von ui:composition ist ui:decorate. ui:decorate hat die selben Funktionen wie ui:composition. Zusätzlich kann man aber ein ui:insert ohne name im Template definieren.

Code-Snippet 4: decoratedTemplate.xhtml

Im Code-Snippet 4 sieht man auf Zeile 17, dass ui:insert ohne name Attribute verwendet wird. Dies hat zur Folge, dass im Code-Snippet 5, alles was ausserhalb von einem ui:define ist, dort eingefügt wird.

Code-Snippet 5: DecoratedTemplateDemo

Fazit

Templates sind für jede nicht triviale Applikation ein muss, damit Änderungen am Design nicht an zig Stellen nachgeführt werden müssen.

Ü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.