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 removed 3 lines
!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]
At line 9 changed 2 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.
!!!Tags
Die Schnittstelle zwischen [Activate JS] und [JSF] besteht konsequenter Weise aus entsprechenden Tags. Diese können mit dem Namespace http://sigos.com/activate in das HTML-Dokument eingebunden werden:
At line 12 removed 2 lines
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:
At line 15 changed 3 lines
<j:activate id="data" value="#{testController.value}" variable="myData" handler="#{testController.handler}" events="change test">
<div control="{interpolate: true}">{this.myData}</div>
</j:activate>
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml" [...] xmlns:activate="http://sigos.com/activate">
[...]
</html>
At line 20 changed one line
__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.
!!Get Tag
Dieser Tag führt einen HTTP-GET-Request zu einer Komponente nach dem [JSF-JQuery 2] Standard durch:
At line 22 removed 5 lines
__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:
At line 28 changed 11 lines
@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!";
}
}
<activate:get id="data" value="#{testController.value}" variable="myData">
<div control="{interpolate: true}">{this.myData}</div>
</activate:get>
At line 41 changed one line
__Hinweis:__ Die entsprechenden Event-Handler werden nur installiert, wenn sie im Events-Attribut enthalten sind.
__Hinweis:__ Diese Komponente generiert einen DIV-Tag mit einem Ajax-Control-Attribut. Grundsätzlich kann das Ajax-Control-Attribut eigenständig zu Rest-Services kommunizieren. Der Vorteil hierin besteht in der Anbindung von EL-Expressions an eine bestehende [Java]-Infrastruktur.
At line 43 changed 33 lines
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.
__Hinweis:__ Der AJAX-Aufruf erfolgt asynchron. Die [Aktivierungs-Chain|Activate JS#Chain] wird nach Success/Fail weiter ausgeführt.