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.
Im Dialog wählt man nun den templates Ordner aus, gibt den Namen des Templates ein und klickt auf Next.
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.
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.
Code-Snippet 3: header.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
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
Keine Kommentare:
Kommentar veröffentlichen
Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.