Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Java EE 7 Grundkurs

Templates anlegen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Anlegen von Templates dient dazu, das standardmäßige Design einer Website festzulegen und dieses auf sämtlichen Seiten der Applikation zu übernehmen. Das JSF-Framework stellt hierfür entsprechende Funktionalität zur Verfügung.

Transkript

Das Problem. Der Chef oder der Kunde kommt, nachdem Sie eine umfangreiche Webseite geschrieben haben, und verlangt von Ihnen auf jeder dieser Seiten im Fußbereich etwas zu ändern. Sie sind frustriert. Die Lösung, Templates. In diesem Video werden wir uns mit Templates auseinandersetzen. Mit der Technologie im JSF-Umfeld, die es uns erlaubt gemeinsam wiederkehrende Elemente auf allen Seiten zu definieren. Ohne Templates ist es so, dass jede Seite komplett von Hand gebaut wird. Das ist sehr fehlerträchtig, anstrengend und langwierig. Auch die Wartung wird sehr, sehr kompliziert, denn Änderungen müssen schlimmstenfalls auf jeder einzelnen Seite vorgenommen werden. Aus diesem Grund gibt es ein einfaches Templating-System im JSF-Umfeld. Dabei ist es so, dass eine Applikation eines oder mehrere Templates besitzen kann. Im Template selbst, das ist eine normale JSF-Seite, sind Bereiche definiert, die von den Facelets, also den eigentlichen Seiten, mit Inhalt befüllt werden können. Die Seiten selbst definieren dann nur noch genau diese Inhalte. Kümmern sich also nicht mehr um das Layout und das einbinden von JavaScript oder CSS. Damit das funktioniert gibt es einige Tags die man kennen sollte. Auf Ebene des Templates wird bspw. das "ui:insert"-Tag benutzt. Das definiert nämlich Platzhalter, an deren Stellen Inhalte eingefügt werden können. Auf Ebene von der nutzenden Seite können Sie beispielsweise das "ui:composition"-Element benutzen. Damit definieren Sie, welches Layout verwendet werden soll. Das "ui:define"-Element erlaubt es Ihnen Inhalt zu definieren, der an der Stelle des passenden "ui:insert"-Elements eingefügt wird, also dieses ersetzt. Es gibt noch einige Tags mehr, die man verwenden kann. "ui:component" definiert beispielsweise eine JSF-Komponente, die in den JSF Komponenten-Tree eingefügt wird. Inhalt, der außerhalb dieses "ui:component"-Elementes liegt wird dabei ignoriert. Analog zu "ui:component" funktioniert "ui:fragment". Allerdings wird außerhalb liegender Inhalt nicht ignoriert. Und mit Hilfe von "ui:include" können Sie ein Dokument einfügen. Wichtig sind für uns eher die ersten drei Tags. Das bedeutet "ui:define", "ui:composition" und "ui:insert". Lassen Sie uns einmal gucken, wie wir diese Elemente verwenden können. Hier im Eclipse habe ich bereits eine Seite angelegt, die als Vorlage dienen kann. Sie sehen, es ist eine normale XHTML-Seite. Ich habe jetzt hier die Style-Angaben einmal ganz bewusst ausgeblendet. Die sollen uns nämlich nicht weiter irritieren. Und in dieser Seite sind bereits jetzt drei Bereiche erkennbar. Wir wollen, dass diese inneren Bereiche, also die "div's", wo "KOPFBEREICH" "INHALTSBEREICH" und "FUSSBEREICH" steht, nun von Facelets, also von abgeleiteten Seiten, mit Inhalten befüllt werden können. Zu diesem Zweck fügen wir, statt der Inhalte, die wir dort im Moment haben, noch "ui:insert"-Anweisungen ein. "ui:insert" verlangt ein Parameter, nämlich die Angabe des Parameters "Name". Dieser Name ist der Name des Platzhalters. Den können wir beliebig benennen. Ich benenne die entsprechenden Bereiche, also "kopfbereich", dasselbe mache ich dann noch für den "inhaltsbereich" und für den "fussbereich". Und so ein "ui:insert" kann, wenn es definiert wird, selber Inhalte schon aufnehmen. Diese Inhalte werden dann ersetzt durch die einzufügenden Inhalte. Aber tatsächlich nur, wenn diese Inhalte definiert worden sind. Das bedeutet, wenn die untergeordnete Komponente keine Inhalte definiert, dann bleibt der Inhalt, der ursprünglich definiert wurden ist, stehen. Durch das Hinzufügen der "ui:insert"-Anweisung haben wir aus dieser normalen Seite eine Template-Seite gemacht. Widmen wir uns nun dem Anlegen von einer oder zwei Inhaltsseiten. Zu diesem Zweck lege ich eine neue JSF-Seite an. Das ist in "XHTML Page", und wir nennen sie "ErsteInhaltsseite.xhtml". Hier können wir jetzt das Template "Blank Facelet Page" auswählen, und sagen "Finish". Dieses Template liegt uns bereits ein "ui:composition"-Element an. In diesem "ui:compostition"-Element wählen wir jetzt unser Template aus. Wir machen das, indem wir Strg+Space drücken. Damit ist jetzt definiert, welche Inhalte diese Seite überschreiben kann. Nämlich die Bereiche mit dem Namen "Kopfbereich", "Inhaltsbereich" und "Fußbereich". Das eigentliche Überschreiben der Inhalte machen wir über "ui:define"-Elemente. Und hier geben wir beispielsweise für den Kopfbereich den Namen "kopfbereich" an, weil das der Name des "ui:insert"-Elementes ist, das wir in der Template-Seite definiert haben. Jetzt können wir hier einen eigenen Inhalt definieren. Das gleiche können wir für den Fußbereich machen. Den "Content"-Bereich, also den Inhaltsbereich, den lassen wir erst einmal unverändert. Wenn wir die Seite jetzt ausführen, wird die Inhaltsseite geladen und angezeigt. Und Sie sehen, dass der Titel "Erste Seite" lautet und in der Fußzeile der Text "Fuß der ersten Seite" steht, während der Inhaltsbereich noch völlig unverändert bleibt. Lassen Sie uns eine zweite Seite anlegen, die ebenfalls dieses Template implementiert, und hier überschreiben wir jetzt auch den Inhaltsbereich. Das machen wir, indem wir entsprechende "ui:define"-Anweisungen hinterlegen. Die Reihenfolge der "ui:define"-Anweisungen ist dabei unwichtig. Das heißt, Sie können sehr wohl das "define" für den Fußbereich vor dem "ui:define" für den Inhaltsbereich definieren. Da ist auf nichts weiter zu achten. Beachten Sie bitte auch, dass sonstige Inhalte, die ich hier definiere, einfach ignoriert werden. Wir führen die Seite aus und sehen das Ergebnis. Die entsprechenden Inhalte überschreibt die Inhalte, die wir im Template definiert haben. Im Quellcode ist ebenfalls nichts mehr davon zu sehen, dass es sich hier um eine Template-Seite handelt und das wir zusätzlichen Inhalt definiert haben. Es wird tatsächlich die Vorlagenseite genommen, und deren Inhalte werden ersetzt. Sie sehen, es ist sehr einfach mit Hilfe von "ui:insert"-Elementen, "ui:compostition"-Elementen und "ui:define"-Elementen zu arbeiten. Sie sollten diese Funktionalität in Ihren JSF-Applikationen nutzen.

Java EE 7 Grundkurs

Lernen Sie die Grundlagen der Programmierung mit Java EE 7 verstehen und anwenden.

6 Std. 4 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!