Diese JSF-Erweiterung ermöglicht es, einfache Javascript und JQuery
Komponenten JSF-Konform zu implementieren. JSF-JQuery enthält zwar einige fertig einsatzfähige Komponenten, versteht sich allerdings vorwiegend als API zum Implementieren eigener Komponenten.
Zusammenfassung#
Der Vorteil von JSF besteht in der Möglichkeit, mit XHTML arbeiten zu können und die Web-Seite hochgradig in Komponenten strukturieren zu können. Die Anbindung an Controller durch EL-Expressions erlaubt einfache Interaktionen mit Java-Code.Der Nachteil von JSF besteht jedoch in einem Aufwendigen Rekonstruieren der gesamten Seitenstruktur. Gerade bei komplexen Web-Seiten führt dies zu einer immensen Rechenzeit, sowieso hohem Speicherverbrauch.
Reine Javascript-Komponenten haben den Vorteil, dass die Elemente auf der Web-Seite sehr unabhängig voneinander agieren können. Änderungen, Server-Requests und andere Aktionen sind daher sehr leichtgewichtig. Allerdings liefert JQuery und andere Javascript-Bibliotheken aufgrund ihrer Beschaffenheit, kein Mittel um den Aufbau der Web-Seite zu strukturieren. Javascript-Bibliotheken werden daher selten im Business-Bereich eingesetzt.
JSF-JQuery kombiniert nun die Vorteile beider Welten:
- Strukturieren durch Komponenten, XHTML und EL-Binding
- Leichtgewichtige Kommunikation zwischen Browser und Server
Hintergrund#
JSF-JQuery implementiert die JSF Ressource-API, um die AJAX- bzw. JSON-Requests von JQuery- und anderen Javascript-Komponenten entgegenzunehmen. JSF-JQuery stellt den FacesContext und einen Mini-Lifecycle zur Verfügung, sodass mit EL-Expressions weitestgehend wie gewohnt gearbeitet werden kann.Enthaltene Komponenten#
Einige grundlegende Komponenten sind bereits enthalten. Diese können als Beispiel für das Implementieren weiterer Komponenten dienen.JQuery-AJAX#
Der Tag <j:ajax> stellt das Gegenstück zu <f:ajax> oder <p:ajax> von Primefaces dar.API#
Die abstrakte Klasse JQueryComponent baut direkt auf die JSF-Klasse UIComponentBase auf und stellt die Grundlage zum Implementieren von JQuery- und anderer Javascript-Komponenten dar.
<c:forEach begin="1" end="3" var="index">
<p:commandButton id="index-#{index}" value="Index Button #{index}" ajax="false">
<j:ajax listener="#{jqueryController.indexAction(index)}" onsuccess="console.log(response);"/>
</p:commandButton>
</c:forEach>
Das Beispiel erzeugt 3 Knöpfe durch einen For-Each-Loop und ruft die Action-Methode eines Controllers auf. Zusätzlich wird die Index-Variable als Parameter übergeben.