JSF-JQuery
This is version . It is not the current version, and thus it cannot be edited.
Back to current version   Restore this version

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:

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.