This page (revision-4) was last changed on 07-Apr-2017 20:24 by Dieter Käppel

This page was created on 05-Apr-2017 16:43 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
4 07-Apr-2017 20:24 3 KB Dieter Käppel to previous
3 07-Apr-2017 20:24 3 KB Dieter Käppel to previous | to last
2 07-Apr-2017 19:22 1 KB Dieter Käppel to previous | to last
1 05-Apr-2017 16:43 328 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 3 added 3 lines
!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]
At line 8 added 68 lines
!!!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.