[JSF Activate JS] integriert [Activate JS] in den [JSF] Lifecycle.

!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]

!!!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|Activate JS#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.