Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Java EE 7: Geschäftsanwendungen

Layout definieren, Teil 1: JSF-Templating

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
JSF stellt einen einfach zu erlernenden und dennoch leistungsfähigen Mechanismus zur Verfügung, mit dessen Hilfe Sie das Layout einer Webseite zentral ablegen können. Dieses Video behandelt den JSF-Templating-Mechanismus.

Transkript

Das was Benutzer üblicherweise als erstes von einer Applikation sehen, ist eine Webseite mit einem schicken oder weniger schicken Layout. Dieses Layout soll sich konsistent über alle Seiten an Applikation ziehen. Aus diesem Grund werden wir uns in diesem Video damit auseinandersetzen, wie wir ein Grundlayout mit Hilfe von JSF Layoutfunktionalitäten erstellen können. JSF selber verfügt über einen Template-basierten Ansatz. Es bedeutet, eine Applikation kann eines oder mehrere Templates besitzen. In jedem Template sind dann Bereiche definiert, die von Seiten mit Inhalten befüllt werden können. Die Seiten selbst definieren dann nur noch diese Inhalte. Das bedeutet, der Rahmen außenrum ist gesetzt und die Seite definiert eben nur noch das, was sie individuell unterscheidet von dem, was in der Vorlage drinsteht. Diese Templates funktionieren mit bestimmten JSF Tags. Zum einen gibt es das ui:composition Tag damit definieren wir überhaupt erstmal ein Layout. Ui:insert definiert ein Platzhalter an dessen Stelle Inhalte eingefügt werden können. Auf Ebene von einzelnen Seiten definieren wir mit Hilfe von ui:define ein Bereich, in dem Inhalte eingefügt werden können. Und dieses ui:define wird an das passende ui:insert-Element auf Ebene der Vorlage gebunden und zwar mit Hilfe der Eigenschaft Name. Ui:component erlaubt es uns eine JSF-Komponente zu definieren, die in den JSF-Seiten Tree eingefügt wird. Der Inhalt, der sich außerhalb einer derartigen Komponente befindet, wird dabei ignoriert. Und dann gibt es noch ui:fragment, das funktioniert analog zu ui:component allerdings wird der außerhalb liegender Inhalt nicht ignoriert. Und ui:include erlaubt es uns dann zu guter Letzt ein komplettes Dokument einzufügen. Wir werden nun diese Informationen nutzen, um ein grundsätzliches Basislayout für eine Seit zu definieren. Zunächst einmal sollten wir allerdings unser Projekt für die Ausführung mit JavaServer Faces konfigurieren. Zu diesem Zweck wechseln wir in die Eigenschaften des Projektes, klicken auf Project Facets und setzen das Häkchen bei JavaServer Faces. Ein Klick auf Further configuration available erlaubt es uns, ein URL Mapping zu definieren. Und wir entfernen hier das vorhandene URL Mapping und fügen ein neues auf *.xhtml hinzu. Damit mappen wir alle Dateien mit der Dateiendung xhtml auf JavaServer Faces und sorgen dafür, dass diese dann ausgeführt werden. Nun können wir ein erstes Template anlegen, wir machen dies, indem wir WebContent Ordner zunächst einmal einen neuen Unterordner anlegen. den wir templates nennen. Nun fügen wir eine neue Datei hinzu, es machen wir per Rechtsklick auf WebContent, Other und dann können wir nach xhtml suchen und dann werden wir die XHTML Page finden. Diese XHTML Page legen wir in den Ordner templates und wir nennen sie template.xhtml. Ein Klick auf Next, erlaubt es uns ein XHTML Template auszuwählen. Und wir wählen hier eine Blank JSF Page aus, denn es ist die Startseite unserer Applikation. Und wir haben jetzt hier quasi eine leere Seite mit header, body und sonst nichts weiter drin. Wir widmen uns nun zunächst dem Header-Bereich. Hier legen wir ein Meta-Antrag an, mit dem Namen charset und dem Wert utf-8. Lassen Sie sich bitte nicht davon irritieren, dass Sie hier eine Fehlermeldung angezeigt bekommen, eine Warnung, dass das Attribut nicht bekannt sei. Hintergrund ist der, dass dieses Meta-Element mit diesem Charset erst ab HTML 5 bekannt ist und Eclipse geht davon aus, dass wir hier mit HTML 4.1 beziehungsweise mit XHTML 1 arbeiten. Das wird aber in Ausgabe dann später von JSF zu HTML 5 gerendert. Das nächste Element, was wir hinzufügen, ist ein Title-Element, über das geben wir nämlich den Seitentitel aus. Und hier fügen wir nun das erste ui:insert-Element ein, untergeordneter beziehungsweise abgeleitete Seiten sollen nämlich in der Lage sein, einen eigenen Titel vorzugeben. Wir geben diesen ui:insert den Namen title, über den werden wir das später wieder referenzieren. Und hier können wir jetzt halt sagen, Kundenverwaltung ist der Standardtitel unserer Seite. Im Bodybereich definieren wir ein div-Element und dadrin werden wir dann ein Header-Bereich anlegen, das machen wir wieder mit einem ui:insert-Element und dem geben wir den Namen header. Diesen Namen können Sie frei wählen Das ist nicht wichtig, dass die einen irgendwie sprechenden Namen haben. Das überlässt man am besten sich selbst beziehungsweise seiner Fantasie, welchen Namen man denn wählt. Ich habe mich üblicherweise für englische Namen entschieden. Ein weiteres ui:insert nimmt den eigentlichen Inhalt im Englischen content auf. Das ist der eigentliche Seiteninhalt ein weiteres ui:insert nimmt einen Fußbereich auf, deswegen nennen wir das footer. Und ein letztes die ui:insert-Eement werden wir benutzen, um gegebenenfalls JavaScripte auszugeben, die außerhalb oder unterhalb des eigentlichen Inhaltsbereihes dann positioniert werden. Dem Contentbereich geben wir nun erstmal ein Standardinhalt mit. Da schreiben wir einfach rein: Kein Inhalt definiert. Header und footer werden wir in EXTRA- Dateien auslagern. Zu diesem Zweck verwenden wir hier ui:include-Elemente und die lassen wir auf noch nicht existierende Dateien mit dem Namen header.xhtml beziehungsweise footer.xhtml zeigen. Nun legen wir diese beiden Dateien header.xhtml und footer.xhtml an und werden dort dann auch wieder Inhalte hinterlegen. Zu diesem Zweck machen wir einen Rechtsklick auf WebContent, wählen aus dem Kontextmenü New, Other und dann wieder XHTML Page. Und diesmal benennen wir die XHTML Page header.xhtml. Wir achten wieder darauf, dass hier im richtigen Ort da nämlich templates liegt. Nur ein Klick auf Next erlaubt es uns ein anderes Template diesmal auszuwählen, nämlich Blank Facelet Page. Das ist dann quasi eine untergeordnete Seite, die weniger Inhalte beinhaltet. Hier entfernen wir mal von dem ui:composition-Element das Template Attribut. Und geben jetzt hier einfach nur ein Text aus, nämlich: Ich bin der Header und analog gehen wir nun für den Footer vor. Wir legen also eine neue XHTML-Seite an, sorgen wieder dafür, dass sie im richtigen Ordner liegt, wählen das geeignete Template aus, klicken auf Finisch, entfernen hier das Template Attribut und definieren nun hier ein HTML 5 footer-Element mit einer copyright Angabe und haben damit header und footer fertig implementiert. Den Dateinamen passen wir noch kurz an. Der muss natürlich footer.xhtml heißen. Und damit haben wir unsere Komponenten fertig. Der letzte Schritt wird nun sein, eine Inhaltseite zu erstellen. Die legen wir ebenfalls über das Kontextmenü, New, Other an und wir wählen wieder den Eintrag XHTML Page. Diese Inhaltsdatei lassen wir nun einfach nur innerhalb von WebContent erzeugen, sie heißt index.xhtml. Wir wählen diesmal wieder die Option Blank Facelet Page aus. Und diesmal verwenden wir tatsächlich ein Template, nehme ich das Template, was wir gerade eben definiert haben. Das liegt im Unterordner templates und heißt template.xhtml. Zu guter Letzt legen wir nun fest, dass sich die Web-Applikation auch ohne Angabe eine Datei öffnen lässt. Und das machen wir, indem wir die Datei web.xml öffnen und hier im Source-Code die welcome-file-list anpassen und dort ein welcome-file-Eintrag einfügen mit dem Wert index.xhtml Nun können wir unsere Applikation starten. Wir machen zu diesem Zweck ein Rechtsklick auf das CustomerManagement Projekt und wählen aus dem Kontextmenü Run as, Run on Server, lassen das deployen und wenn Ihr Server schon läuft, dann geht es ziemlich schnell, wenn ich starte der Server durch und Sie sehen die Inhalte, die Sie nun definiert haben, die Webseite funktioniert. In diesem Video haben wir uns damit auseinandergesetzt, wie wir mit JSF Templating-Mechanismen ein einfaches noch nicht sonderlich schönes, aber inhaltlich schon funktionierendes Layout bauen können. Wir haben eine Template-Datei angelegt und hier per ui:insert verschiedene Bereiche definiert in den Inhalte, dann später eingefügt beziehungsweise überschrieben werden können. Wir haben darüber hinaus eine Inhaltsseite angelegt, die dieses Template benutzt und wir haben unsere Applikation für die Verwendung mit JavaServer Faces konfiguriert.

Java EE 7: Geschäftsanwendungen

Verfolgen Sie, wie eine komplette Business-Applikation unter dem Einsatz des gesamten Java-Enterprise-Techologiestacks ensteht.

5 Std. 2 min (39 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!