JSF Activate JS integriert Activate JS in den JSF Lifecycle.

Inhalt#

Hintergrund#

Activate JS steht zunächst als unabhängiges Javascript Framework zur Verfügung. In manchen Fällen mächte man Activate JS jedoch in ein JSF Framework integrieren. JSF Activate JS stellt die erforderlichen Componenten zur Verfügung.

Activate Tag#

Die Schnittstelle zwischen Activate JS und JSF besteht konsequenter Weise aus einem Tag, der Bestandteil von JSF-JQuery ist. Die Idee ist, einen JSF-Tag als oberste Schnittstelle eines Activate-HTML-Subtrees zu verwenden. Innerhalb der Activate-Struktur werden keine JSF-Tags mehr verwendet, weil JSF keine Manipulation des HTML-Tree durch Javascript unterstützt.

Aus anderer Sicht befindet sich unterhalb eines Activate-Tag immer eine Activate-JS-HTML-Struktur ohne JSF-Tags. Die Kommunikation zwischen JSF und Activate JS erfolgt über den Activate-Tag:

<j:activate id="data" value="#{testController.value}" variable="myData" handler="#{testController.handler}" events="change test">
    <div control="{interpolate: true}">{this.myData}</div>
</j:activate>

Hinweis: Diese Komponente generiert einen DIV-Tag mit einem Ajax-Control-Attribut. Grundsätzlich kann das Ajax-Control eigenständig zu Rest-Services kommunizieren. Der Vorteil hierin besteht in der Anbindung von EL-Expressions an eine bestehende Java-Infrastruktur.

Hinweis: Der AJAX-Aufruf erfolgt asynchron. Die untergeordnete Aktivierungs-Chain wird nach Success/Fail weiter ausgeführt, während die Aktivierungs-Chain auf gleicher Ebene unmittelbar weiter ausgeführt wird.

Handler#

Die wichtigste Schnittstelle zwischen Activate JS und JSF ist der Handler. Es handelt sich um die EL-Referenz auf ein Java-Objekt mit frei implementierbaren Methoden:

@Named
public class TestController implements Serializable {
	private static final long serialVersionUID = 1L;
	
	public void change(Node node) {
		System.out.println("changed");
	}
	public String test(Node node) {
		return "Hello World!";
	}
}

Hinweis: Die entsprechenden Event-Handler werden nur installiert, wenn sie im Events-Attribut enthalten sind.

Die Events werden durch das Event-System von JQuery angesteuert:

<button onclick="$(this).trigger('test'); return false;">Test</button>

Damit ist es relativ einfach, einen Server-Event auszulösen. Um damit auch Daten übertragen zu können, ist man besser beraten, ein Control zu implementieren:

<button control="{test: 'some-param'}">Test</button>

Natürlich ist noch ein entsprechendes Control zu implementieren:

$.controls.extend({
	test: function(next) {
		var context = this;
		var value = this.control.get();
		this.element.attr("onclick", "return false;");
		this.element.on("click", function() {
			context.element.trigger("test", {data: value, callback: function(response) {
				context.element.text(response);
			}});
		});
		next();
	}
});

Das Control hört auf den Namen "test". Die Implementierung besteht zunächst aus einem Click-Handler, der Default-Form-Submit wird durch "return false;" abgeschaltet. Bei einem auftretenden Klick wird nun der Event "test" am aktuellen Element (context.element) ausgelöst.

Zusätzlich werden die Parameter data und callback mitgegeben. Die Daten werden an die Java-Methode als parameter übergeben, die Callback-Funktion wird aufgerufen, nachdem die Antwort des Server-Requests beendet ist. Diese Funktion enthält dann das Response-Objekt mit dem Return-Wert der Java-Methode.