Activate JS
Your trail: 

This page (revision-32) was last changed on 21-Apr-2017 08:45 by Dieter Käppel

This page was created on 29-Mar-2017 08:37 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
32 21-Apr-2017 08:45 14 KB Dieter Käppel to previous
31 21-Apr-2017 08:45 14 KB Dieter Käppel to previous | to last
30 10-Apr-2017 17:33 14 KB Dieter Käppel to previous | to last
29 10-Apr-2017 17:17 14 KB Dieter Käppel to previous | to last
28 10-Apr-2017 15:23 14 KB Dieter Käppel to previous | to last
27 10-Apr-2017 06:51 14 KB Dieter Käppel to previous | to last
26 07-Apr-2017 20:46 14 KB Dieter Käppel to previous | to last
25 07-Apr-2017 19:44 13 KB Dieter Käppel to previous | to last
24 07-Apr-2017 19:37 13 KB Dieter Käppel to previous | to last
23 07-Apr-2017 19:36 13 KB Dieter Käppel to previous | to last
22 07-Apr-2017 19:31 12 KB Dieter Käppel to previous | to last
21 05-Apr-2017 16:46 12 KB Dieter Käppel to previous | to last

Page References

Incoming links Outgoing links
Activate JS
Activate JS

Version management

Difference between version and

At line 7 changed one line
[Activate JS] befindet sich noch in der Entwicklung. Für die Nutzung einer Beta-Version nehmen Sie bitte [Kontakt] zu uns auf.
[Activate JS] befindet sich noch in der Entwicklung. Die Beta-Version erhalten Sie aus dem [Intersult Maven Repository] innerhalb des Projekts [JSF-JQuery 2]. Eine wachsende Zahl von Beispielen finden Sie auf [Activate JS Examples].
At line 9 changed one line
!!!Design Anforderungen
!!!Architektur
At line 19 added one line
** Der HTML-Code soll nicht durch wiederholte Script-Tags verunreinigt werden
At line 22 changed 3 lines
** Verwendung von JQuery-Plugins
** Verwendung von anderen Javascript-Bibliotheken
* __Abhängigkeiten:__ [Activate JS] basiert rein auf JQuery, sonst wird nichts gebraucht
** Verwenden von JQuery-Plugins
** Einbinden und Steuern von anderen Javascript-Bibliotheken
** Erweiterbarkeit zur Unterstützung von [JSF] durch [JSF Activate JS]
* __Unabhängig:__ [Activate JS] basiert rein auf [JQuery], sonst wird nichts gebraucht
* Einfache Anwendbarkeit
** Einfaches Hinzufügen von Javascript-Controls auf vielen HTML-Elementen
** Kurze und leicht lesbare JSON-Syntax
At line 29 changed one line
Ein Control-Attribut besteht aus einem JSON-String, der ein oder mehrere Paare aus Control-Name und Control-Wert enthält {<control-name>: <control-value>, [...]}. Control-Werte können von unterschiedlichem Typ sein:
Ein Control-Attribut besteht aus einem JSON-String, der ein oder mehrere Paare aus Control-Name und Control-Wert enthält {<control-name>: <control-value>, ...}.
At line 31 changed 5 lines
||Typ Control-Wert||Beispiel||Erklärung
|Literal|'some-value'|Die Zeichenkette wird so übernommen. Anwendungen sind die Definition von Template-Namen oder das Setzen von CSS-Literalen.
|Wert|true, false, 1, 2, 3|Der Wert wird so übernommen. Anwendungen sind Parameter, For-Werte oder Bedingungen.
|Javascript-Expression|this.test == 1, !x|Der Javascript-Ausdruck wird ausgewertet und das Ergebnis übernommen. Es ist zu beachten, dass die Evaluierung vor dem Verarbeiten des Controls ausgeführt wird. Eventuell später erzeugte Werte können daher nicht zur Verfügung stehen.
|Javascript-Function|function() {this.test == 1}|Die Funktion wird erst dann evaluiert, wenn der Wert tatsächlich verwendet wird. Damit können voneinander abhängige Ausdrücke verwendet werden, wie etwa bedingte Färbung von Zeilen innerhalb eines For-Control.
Die Control-Werte bestehen aus Javascript und werden erst zum jeweiligen Zeitpunkt das Ausführens evaluiert. Dies bedeutet insbesondere, dass ein Control auch auf Werte zugreifen kann, die von vorherigen Controls desselben Control-Attributs erzeugt wurden.
At line 84 changed one line
Um Elemente wiederholen zu können, wird das Control for genutzt:
Um Elemente wiederholen zu können, wird das Control for genutzt. For unterstützt drei Arten der Iteration:
At line 86 changed 3 lines
<div control="{for: {begin: 0, end: 2, variable: 'index'}}">
<label for="{prefix}:input" control="{interpolate: true}">Input {index}</label>
<input control="{interpolate: true, apply: $.fn.InputText, id: 'input'}"/>
!Index Iteration
Bei der Index Iteration durchläuft eine Integervariabel einen Wert von begin (einschließlich) bis end (ausschließlich):
{{{
<div control="{for: {begin: 0, end: 3, variable: 'index'}}">
<div control="{interpolate: true}">Count: {index}</div>
At line 94 added one line
}}}
At line 96 added 18 lines
!Array Iteration
Bei der Array Iteration werden die Elemente eines Arrays durchlaufen:
{{{
<div control="{for: {list: this.someList, variable: 'element'}}">
<div control="{interpolate: true}">Element: {element}</div>
</div>
}}}
!Object Iteration
Bei der Object Iteration werden die Elemente eines Arrays durchlaufen:
{{{
<div control="{for: {list: this.someObject, variable: 'value'}}">
<div control="{interpolate: true}">Key: {index}, Value: {value}</div>
</div>
}}}
At line 117 changed one line
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}}}">
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}} }">
At line 126 changed one line
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}}}">
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}} }">
At line 150 changed one line
Mit dem Control if können die verbleibenden Controls bedingt ausgeführt werden:
Mit dem Control if können Controls bedingt ausgeführt werden:
At line 153 changed one line
<div control="{if: test == 2, css: {color: '#10a010'}}">Some Text</div>
<div control="{if: {condition: test == 2, css: {color: '#10a010'}} }">Some Text</div>
At line 156 changed one line
__Hinweis:__ Die If-Condition wird während des Parsens des Javascript-Code ausgeführt, was in vielen Fällen zu früh sein kann.
Das erste Element innerhalb des Contol-Values ist die If-Condition. Evaluiert diese zu true, wird der Rest des Control-Values in die Control-Chain eingefügt.
At line 158 changed one line
Um auf Ergebnisse anderer Controls zugreifen zu können, kann die Condition auch eine Funktion sein:
!!Rendered
Man kann Elemente zwar mit styles ausblenden, allerdings verbleiben diesen dann doch im DOM-Baum und brauchen weiterhin Ressourcen. Mit dem Control rendered werden die Elemente vollständig entfernt und das Ausführen weiterer Controls unterbunden:
At line 161 changed one line
<div control="{if: function() {return this.test == 2}, css: {color: '#10a010'}}">Some Text</div>
<label control="{rendered: this.type != 'input'}">Input</label>
At line 164 changed 2 lines
!!Rendered
Man kann Elemente zwar mit styles ausblenden, allerdings verbleiben diesen dann doch im DOM-Baum und brauchen weiterhin Ressourcen. Mit dem Control rendered werden die Elemente vollständig entfernt und das Ausführen weiterer Controls unterbunden:
!!AJAX Request
Ein Server-Request kann durch das AJAX-Control durchgeführt werden:
At line 168 changed one line
<label control="{rendered: function() {this.type != 'input'}}">Input</label>
<div control="{ajax: {url: 'http://localhost/test', variable: 'data'}, interpolate: true}">{data}</div>
At line 195 added 43 lines
__Erklärung:__ Es wird ein AJAX-Request durchgeführt und das Ergebnis in der Variable data gespeichert. Das nachfolgende Interpolation-Control fügt den Text in den Tag-Content ein.
Die möglichen AJAX-Control Parameter:
||Parameter||Bedeutung
|method|HTTP Method, die verwendet wird, wohl hauptsächlich GET oder POST
|URL|Die URL, die für den AJAX-Request benutzt wird
|data|Die Query/Post-Parameter für den AJAX-Request
|variable|Die Variable in der das Ergebnis gespeichert wird
!!Text
Grundsätzlich ist es möglich, den Tag-Text durch den Interpolate-Tag mit Daten zu versehen. Manchmal kann es jedoch nützlich sein, den Inhalt eines HTML-Tags durch einen Text zu ersetzen. Untergeordnete Elemente werden ebenfalls ersetzt, die Attribute werden nicht berührt.
{{{
<div control="{text: this.someVariable}"/>
}}}
!!Async
Bestimmte Controls arbeiten grundsätzlich asynchron, wie etwa das Ajax-Control. Es besteht auch die Möglichkeit, asynchrone Stellen einzubauen:
{{{
<tr control="{for: {list: this.rows, variable: 'row'}, async: 1000 * Math.random(),
after: {css: {visibility: 'visible'}} }" style="visibility: hidden;">
[...]
</tr>
}}}
__Erklärung:__ Das Async-Control ermöglicht ein synchrones Rendern jeder TR-Row, die durch die vorhergehende For-Schleife erzeugt wurde. Jede Zeile ist zunächst unsichtbar (visibility) und wird nach dem Rendern auf visible gesetzt.
!!Bind
Mit dem Bind-Control ist die Verknüfung eines Input-Elements mit einem Javascript-Objekt möglich. Zum einen wird der Wert aus dem Objekt in das Input-Element eingetragen. Zum anderen wird Change-Handler installiert, der den veränderten Werden in das Objekt zurückschreibt.
{{{
<input control="{bind: this.node.value}"/>
}}}
!!Log
Mit dem Log-Control können Konsolenausgaben auf der Browser-Konsole ausgegeben werden:
{{{
<div control="{log: 'Hello World!'}">
}}}
At line 215 changed one line
|control|Der aktuelle Control-Entry, der gerade verarbeitet wird. Er besteht aus key (Name) und value (function).
|control|Der aktuelle Control-Entry, der gerade verarbeitet wird. Er besteht aus key (Name) und value (Javascript).
At line 294 added 5 lines
|clone|Diese Funktion erzeugt einen untergeordneten Context. Sie wird in der Regel intern aufgerufen, wenn ein Child-Element im HTML-Tree verarbeitet wird.
|replace|Damit ist das konforme Ersetzen des eigenen HTML-Elements möglich. Schleifen, Bedingungen und andere dynamische Elemente ersetzen oft das eigenen Element mit dieser Funktion.
|getControls|Liefert die uncompilierte Liste der im Control-Attribut enthaltenen Controls in der Form eines Javascript-Objects zurück. Die Keys entsprechen den Control-Namen und die Values den Control-Values.
|splitObject|Damit kann eines JSON-String in Key-Value-Paare zerlegt werden. Diese Funktion wird von getControls intern verwendet, auch vom After-Control um untergeordnete Controls in die Control-Chain einzufügen.
|stringify|Ähnlich JSON.stringify, allerdings wird etwas kompakterer Code erzeugt.
At line 300 added 2 lines
__Warning:__ Die Grundfunktionen des Context sollten nicht überschrieben werden, weder durch User-Extends, noch durch Controls mit Variable- oder Set-Anweisung, da es sonst zu Fehlern kommen kann.
This page (revision-32) was last changed on 21-Apr-2017 08:45 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
3353 Aufrufe

referenziert von
Activate JS
Activate JS Examples
Intersult Produkte
JSF Activate JS

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.22 00:34:45 GMT