GEDOPLAN
Webprogrammierung

PlainHTML-JSF, Passt-Through Elements

Webprogrammierung

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:

plain_html_jsf

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Application Server

Wildfly mit http/2

Unter der “vielsagenden” Spezifikation rfc7540 wurde mitte letzten Jahres die Version 2 des http-Protokolls verabschiedet. Basierend auf Googles eigener Entwicklung…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!