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

Java EE 7 Grundkurs

HTML-5-Unterstützung

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die aktuelle Version des JSF-Framework unterstützt die HTML-5-Programmierung, wobei zwei unterschiedliche Ansätze zur Auswahl stehen. Der Einsatz dieser hängt hierbei vom jeweiligen Anwendungsgebiet ab.

Transkript

Ein ganz wesentliches neues Feature bei JSF 2.2 ist die Unterstützung von HTML5. Welche Möglichkeiten es hier gibt, werden wir in diesem Video eben so klären, wie, was Facelets sind; nämlich die Anzeigekomponenten im JSF-Umfeld. Views werden im JSF-Umfeld per Facelet definiert. Die Facelets stellen dabei einen Ersatz für die völlig veraltete JSP-Technologie dar. Ebenfalls beinhalten Facelet optional ein Templating-System. Diese Facelets, also die Komponenten, die letztlich zu HTML umgewandelt und an den Browser geschickt werden, werden heutzutage mit HTML5 und CSS gebaut. Um diese HTML5-Unterstützung sicherzustellen, gibt es sogenannte Passthrough-Attribute und Passthrough-Elemente. Werfen wie zunächst einen Blick auf die Passthrough-Attribute. Wenn wir mit HTML5 arbeiten wollen, haben wir ein Problem. HTML5 ist nämlich noch nicht in jedem Bereich final. Ebenfalls gibt es bei HTML5 Dinge, die es so vorher noch nicht gab, nämlich zum Beispiel die sogenannten Data-Attribute. Diese Data-Attribute sind selbstdefinierbare Attribute, die per JavaScript sehr einfach abzufragen und auszuwerten sind. Das Problem dabei ist, dass Komponenten im JSF-Umfeld normalerweise Klassen sind, die halt einen bestimmten Satz an Eigenschaften haben, und diese Eigenschaften sind wiederum als Attribute verfügbar. Das kann zu Problemen führen, denn die Standardkomponenten kennen ja schließlich nicht alle möglichen, definierbaren Data-Attribute. Es gibt noch weitere Attribute, also zum Beispiel sowas wie Placeholder oder Type, die es ebenfalls nicht auf den JSF-Komponenten gibt. Die Lösung für dieses Problem besteht darin, Passthrough-Attribute zu benutzen. Diese gibt es auch wirklich erst mit der JSF-Version 2.2, die mit der Java EE 7 eingeführt wird. Passthrough-Attribute werden direkt in die Ausgabe geschrieben. Das bedeutet, sie haben keine direkte Repräsentation in JSF-Komponenten und das hat einen ganz gewaltigen Vorteil, denn existierende Komponenten müssen nicht angepasst werden. Wie definieren wir nun solche Passthrough-Attribute? Das ist relativ einfach. Passthrough-Attribute erfordern es, dass wir einen eigenen Namensraum im Kopf der Seite definieren und dass wir diesem Namensraum einen Präfix zuweisen. Der Namensraum ist immer: "http://xmlns.jcp.org/jsf/passthrough". Diese Passthrough-Attribute werden dann auf Ebene von gewöhnlichen JSF-Komponenten notiert. Angenommen, wir hätten das Präfix "p" für diesen Namensraum vergeben, dann könnte das so aussehen wie in diesem Beispiel. Hier hätten wir ein "inputText"-Element und dieses "inputText"-Element verfügt über zwei Passthrough-Attribute, nämlich "type" and "placeholder". Beide wandern sie genau so wie sie sind in die Ausgabe. Sehen wir uns dies einmal in der Praxis an. Im Eclipse können wir nun ein neues, dynamisches Webprojekt anlegen. Wir nennen das "JSF_Passthrough". Wir fügen diesem Projekt die Unterstützung für JSF hinzu und sind nun in der Lage, eine JSF-Page diesem Projekt hinzuzufügen. Das ist eine XHTML-Seite, wir nennen sie: "EmailEingabe.xhtml", und wir wählen als Vorlage die "Blank JSF Page" aus. Diese Blank JSF Page müssen wir nun lediglich noch anpassen. Wir müssen hier den Namensraum definieren für die Passthrough-Attribute. Das machen wir, indem wir ein Präfix vergeben und jetzt dadrin in diesem "xmlns:p"-Attribut schreiben: "http://xmlns.jcp.org"... ..."/jsf/passthrough". Damit sind wir in der Lage, die Passthrough-Attribute zu benutzen. Nun können wir unsere Seite zusammenbauen. Wir definieren erstmal ein "h2"-Element für die "E-Mail-Eingabe" und legen dann ein "h:form"-Element an. Innerhalb dieses "h:form"-Elements packen wir das "inputText"-Element; den Wert, also "value", lassen wir leer. Dieses "inputText"-Element verfügt in diesem Fall auch noch nicht über eine "id", das interessiert uns alles noch nicht. Was wir jetzt machen können ist, zu schreiben: "p:type" und können jetzt sagen, das ist ein Eingabeelement vom Typ "email". Mit Hilfe der "placeholder"-Angabe können wir einen Platzhalter definieren. Das wird übrigens nur von HTML5-fähigen Browsern tatsächlich unterstützt, unmodernere Browser werden dies ignorieren. Das fertige Element sieht so aus wie in diesem Beispiel. Ein "inputText"-Element mit "type"- und "placeholder"-Angaben. Wenn wir das Projekt nun laufen lassen, werden wir gleich einen Browser sehen, wo wir die E-Mail-Eingabe haben und man beachte, dass hier ein Platzhalter drin ist. Dies ist ein HTML5-Feature. Lassen Sie uns einen ganz kurzen Blick auf den Quellcode werfen, der generiert worden ist. Ganz relevant für uns neben der Wahrnehmung, dass es hier dann doch einige Dinge gibt, die wir so gar nicht definiert haben, ist, dass wir hier das Placeholder- und das Type-Attribut auf Ebene eines HTML-Input-Elementes haben. Diese Angaben sorgen dafür, dass das Ganze von HTML5-fähigen Browsern entsprechend dargestellt wird. Werfen Sie bitte auch einen Blick darauf, dass wir hier im Kopf ein Doctype-Deklaration haben, die für HTML5 geeignet ist. Und achten Sie bitte darauf, dass wir in unserer Ausgangsdatei hier eine Doctype-Deklaration im Kopf der Seite hatten, die für HTML 4.01 bzw. XHTML 1.0 ausgelegt war. Dies wird automatisch ersetzt von JSF-Framework in JSF 2.2. Das bedeutet, der Standard-Doctype, also der Standardtyp der Seite, ist immer HTML5. Dies muss man wissen und man kann es sich zunutze machen, denn automatisch werden alle Seiten HTML5-kompatibel und -fähig. Passthrough-Attribute erlauben es uns also, dass wir bereits existierenden JSF-Komponenten zusätzliche Attribute hinzufügen, die dann letztlich nicht serverseitig verarbeitet, sondern direkt in die Ausgabe geschrieben werden. Genau andersrum funktionieren die Passthrough-Elemente. Das sind nämlich Elemente, die serverseitig verarbeitet werden, obwohl JSF sie eigentlich gar nicht kennt. Normalerweise ist es so, dass Elemente, die nicht mit einem der JSF-Namensräume verknüpft sind, von JSF ignoriert werden. Bei Passthrough-Elementen ist dies nicht der Fall. Passthrough-Elemente selbst sind nämlich normale HTML-Elemente, bei denen das Element selbst oder mindestens ein Attribut im Namensraum "http://xmlns.jcp.org/jsf" liegt. So ein Passthrough-Element wird dann, wenn es erkannt wird, in den JSF-Komponentenbaum aufgenommen und entsprechend verarbeitet. Dabei wird es intern durch eine passende Komponente repräsentiert, sollte es keine wirklich genau übereinstimmende Komponente geben, wird eine Standardkomponente verwendet. Die Attribute, die im Passthrough- Namensraum liegen, werden der Komponente zugeordnet. Alle anderen Attribute, die also quasi nicht repräsentierbar sind, werden als Passthrough-Attribute behandelt und einfach unverändert in die Ausgabe geschrieben. Schauen wir uns einmal an, wie wir dies umsetzen können. Wir sehen hier eine JSF-Seite. Dieser JSF-Seite werden wir nun den Namensraum "http://xmlns.jcp"... ...".org/jsf" hinzufügen. Wir verknüpfen diesen Namensraum mit dem Präfix "jsf". Das gibt uns jetzt die Möglichkeit, ein Input-Element vom Typ "date" zu definieren. Dies ist ein HTML5-Eingabeelement, dafür gibt es keine direkte Repräsentation im JSF-Umfeld. Wir können hier einen Placeholder benutzen. Auch für diesen Placeholder gibt es keine entsprechende Repräsentation. Und wir können dieses Element jetzt dennoch über das JSF-Präfix als Passthrough-Element markieren. Damit ist dieses Eingabeelement vom Typ "Datum" auch gleichzeitig serverseitig verarbeitbar. Wenn wir das Ganze jetzt laufen lassen, werden wir feststellen, dass kein Fehler oder Ähnliches generiert wird, sondern dass wir ein einfaches HTML5-Eingabelement sehen. Wenn wir nun diese Seite einmal in einem richtigen Browser aufrufen, beispielsweise dem Chrome-Browser, dann sehen wir auch, dass sich dieses Element wirklich wie ein HTML5-Element verhält. Wir sehen hier nämlich, dass wir jetzt hier ein Datumsbereich entsprechend angeben oder auswählen können. Im Quellcode der Seite erkennen wir ebenfalls, dass es sich um ein HTML5-Element vom Typ "date" handelt und dass keine weiteren großartigen Änderungen vorgenommen worden sind. Passthrough-Attribute und Passthrough-Elemente geben Ihnen somit eine schöne, einfache Möglichkeit, HTML5 sinnvoll im JSF-Umfeld zu nutzen. Die Verwendung ist relativ einfach, Sie benötigen nur die Namensräume: "http://xmlns.jcp.org/jsf" oder: "http://xmlns.jcp.org/jsf/passthrough". Entsprechende Elemente werden dann entweder im Komponentenbaum repräsentiert als Passthrough-Elemente oder sie werden ignoriert, als Passthrough-Attribute.

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!