Versierte JSF-Entwickler sind damit vertraut ihre Facelets-Views mit den JSF eigenen Komponenten zu entwickeln, selbst wenn es sich bei diesen lediglich um einfache Synonyme für das HTML-Pendant handelt. So wird bekanntlich z.B. aus einem “” im HTML ein “” Seit JSF 2.2 gibt es neben den Pass-Through Attributes auch so genannte Pass-Through Elements die es erlauben reines HTML mit JSF Verhalten an zu reichern.
Schauen wir uns zu Beginn ein sehr überschaubares Formular an:
An dieser Stelle ist nicht ersichtlich ob es sich dabei um ein klassisches JSF-Formular handelt oder komplett auf die JSF Komponenten gesetzt wurde. Selbst ein Blick in den HTML-Quelltext verrät dies ohne weiteres nicht. Der Grund ist klar: der JSF-Renderer sorgt dafür, dass die verwendeten Komponenten (h:inputText, h:commandButton…) in eine entsprechende HTML-Repräsentation umgewandelt werden. Wie eine solche Repräsentation aussieht hängt von den Komponenten ab. Neben sehr einfachen Varianten die nahezu 1:1 in ein HTML Pendant umgewandelt werden, existieren natürlich auch sehr komplexe Komponenten die in der der HTML Seite durch eine Vielzahl von verschachtelten Elementen repräsentiert werden.
Aber zurück zu unserem Formular, das natürlich passend zum Thema mit den neuen Passthrough Elementen implementiert wurde:
<form jsf:id="form">
<input type="text" name="Name" placeholder="Name" jsf:value="#{formBean.name}">
<input type="email" name="email" placeholder="Email" jsf:value="#{formBean.mail}">
<textarea placeholder="Message" rows="6" jsf:value="#{formBean.message}"></textarea>
<button type="submit" class="submit" jsf:id="submit" jsf:action="#{formBean.submit()}">
Send Message
</button>
<span class="messages">
<h:messages globalOnly="true" showDetail="false" >
</span>
</form>
Durch den verwendeten Facelets Namespace : xmlns:jsf=”http://xmlns.jcp.org/jsf ” steht uns in JSF nun die Möglichkeit offen unsere Views mit reinem HTML zu schreiben. Wollen wir die HTML-Komponenten nun um JSF Funktionen erweitern verwenden wir die entsprechenden JSF-Attribute mit dem Präfix „jsf:“. Wie oben zu sehen wird dies z.B. verwendet um die Eingabefelder mittels EL-Expression an unseren Controller zu binden („jsf:value“) oder das Abschicken des Formulars an eine JSF Action („jsf:action“). Wichtig dabei zu beachten ist das JSF nur die HTML-Komponenten in die ViewState übernimmt und entsprechende Objekte erzeugt die ein solches „jsf:“ Element aufweisen. So können Elemente ohne „jsf:id“ z.B. nicht per Ajax neu gerendert werden oder das Weglassen der jsf-ID am Formular würde zu einem Fehler führen da die Eingabefelder kein gültiges übergeordnetes JSF-Form-Element aufweisen.
Was soll das Ganze denn nun? Diese Erweiterung im JSF läuft unter dem Begriff „HTML5 friendly markup“. Das Problem das sich derzeit für die JSF Komponenten darstellt besteht darin das ausschließlich die Attribute ins HTML gerendert werden die auch von der Komponente vorgesehen sind. So führt z.B. die Verwendung des neuen HTML5-Attributes „placeholder“ an einem h:inputText nicht wie erwartet dazu, dass bei leerem Eingabefeld ein Standard-Text angezeigt wird da dieses Attribut bei der Entwicklung der InputText-Komponente nicht vorgesehen wurde. Das ist nur ein Beispiel von sehr vielen zusätzlichen Attributen die verwendet werden können und langfristig werden auch weitere Attribute zu erwarten sein. Jedes einzelne dieser Attribute müsste nun im Framework verankert und dem h:inputText als erlaubte Attribute hinzugefügt werden um diese auch an den JSF-Komponenten zu verwenden. Um das zu umgehen gibt es nun gleich zwei Varianten. Zum einen erlauben die bereits eingangs erwähnten Passthrough Attribute solche Eigenschaften direkt an die HTML-Komponten weiter zu geben, ohne das der Renderer diese verarbeitet: (Namespace: xmlns:pt=http://xmlns.jcp.org/jsf/passthrough)
<h:inputText pt:placeholder="Name" value="#{formBean.name}">
Die zweite Variante die oben gezeigt wurde sind die Passthrough Elements, diese gehen noch einen Schritt weiter und drehen den Spieß um, anstatt JSF-Komponenten mit HTML-Attributen zu versehen, reichern wird HTML-Nodes mit JSF-Attributen an. Sie erlauben uns so ohne großen Aufwand ein beliebiges HTML Template zu verwenden oder dieses durch einen Webdesigner gestalten zu lassen und anschließend JSF-Funktionalität hinzuzufügen ohne die Elemente des Templates zu verändern. Auch ist die Verwendung der Passt-Through Elements bei eigenen Komponenten denkbar bei denen es im Detail auf das Ausgabe HTML ankommt.
Sourcen unter: https://github.com/GEDOPLAN/plainhtml-jsf
