JSF Activate JS
Your trail: 

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
JSF Activate JS
JSF Activate JS

Version management

Difference between version and

At line 3 added 3 lines
!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]
At line 6 changed 2 lines
!!!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:
!!!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.
At line 12 added 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 10 changed 4 lines
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml" [...] xmlns:activate="http://sigos.com/activate">
[...]
</html>
<j:activate id="data" value="#{testController.value}" variable="myData" handler="#{testController.handler}" events="change test">
<div control="{interpolate: true}">{this.myData}</div>
</j:activate>
At line 16 changed 2 lines
!!Get Tag
Dieser Tag führt einen HTTP-GET-Request zu einer Komponente nach dem [JSF-JQuery 2] Standard durch:
__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.
At line 22 added 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 20 changed 3 lines
<activate:get id="data" value="#{testController.value}" variable="myData">
<div control="{interpolate: true}">{this.myData}</div>
</activate:get>
@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!";
}
}
At line 25 changed one line
__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.
__Hinweis:__ Die entsprechenden Event-Handler werden nur installiert, wenn sie im Events-Attribut enthalten sind.
At line 27 changed one line
__Hinweis:__ Der AJAX-Aufruf erfolgt asynchron. Die [Aktivierungs-Chain|Activate JS#Chain] wird nach Success/Fail weiter ausgeführt.
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.
This page (revision-4) was last changed on 07-Apr-2017 20:24 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
609 Aufrufe

referenziert von
Activate JS
Activate JS Examples
JSF Activate JS

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2025.10.30 17:41:56 GMT