[Activate JS] ist eine JQuery basierende Templating Engine.

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

!!!Aktueller Status
[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].

!!!Architektur
Es sind bereits einige populäre Templating Engines und Javascript-Framework auf dem Markt. Aus unserer Sicht erfüllt jedoch keines der Frameworks die von uns aufgestellten Forderungen:

* __Reines Javascript:__ Die Implementierung soll in reinem Javascript erfolgen, keine Zwischencompilierung, keine Installation von Tools.
** Einfaches Include in die Web-Page
** Verwenden einer beliebigen Entwicklungsumgebung
** Debugging des Javascript-Codes der 1:1 übereinstimmt, mit dem was geschrieben wurde
* __Reines HTML:__ Die Implementierung des HTML-Codes soll in HTML erfolgen.
** Leichte lesbarkeit, Javascript-Konstrukte wie $("<div>") sollen vermieden werden
** Zusammengehörigkeit des Codes nach dem Lokalitätsprinzip, Code ist nicht unnötig verteilt
** Der HTML-Code soll nicht durch wiederholte Script-Tags verunreinigt werden
* __Erweiterbarkeit:__ Activate JS soll einfach erweitert werden können
** Behandlung neuer Control-Strukturen
** Instantiierung von JQuery-Komponenten
** 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

!!!Controls
Die HTML-Seite wird grundsätzlich in reinem HTML oder XHTML aufgebaut. [Activate JS] greift nur durch Controls in den HTML-Code ein. Diese Controls werden über das Attribut control aktiviert.

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>, ...}.

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.

!!Apply
Mit dem Apply control können beliebige Javascript-Funktionen auf das JQuery-Objekt angewendet werden:

{{{
<div control="{apply: $.fn.Panel}">
	<div>Header</div>
	<div>Content</div>
</div>
}}}

__Erklärung:__ Das Attribut "control" enthält JSON-Code, der ein oder mehrere Key-Value-Paare enthalten kann. Jeder Key ist einem Control aus $.controls zugeordnet. Im obigen Beispiel also der Key apply ruft $.controls.apply auf. This entspricht dabei dem JQuery-Element des Elements. Verwendet man die Bridge eines JQuery-Widgets, wie etwa $.fn.Panel, wird das JQuery-Widget instantiiert.

!!Template
Mit dem Template Control wird der aktuelle DOM-Subtree zum Template mit dem Namen des Value aus dem JSON-Entry erklärt. Der DOM-Subtree wird aus dem aktuellen Browser-Document entfernt, sodass er nicht mehr sichtbar ist:

{{{
<div control="{template: 'some-panel', apply: $.fn.Panel}" style="margin-top: 10px;">
	<div>Template Header</div>
</div>
}}}

!!Apply Template
Mit dem Control applyTemplate wird ein mit dem Control template definiertes DOM-Element an der betreffenden Stelle wieder eingefügt. Das betreffende Template kann dabei mehrfach eingefügt werden:

{{{
<div control="{applyTemplate: 'some-panel'}">
	<div>Individual Content 1</div>
</div>
}}}

!!Define und Insert
Mit den Controls define und insert können weitere Elemente in ein Template eingefügt werden. Dabei ist define kein echtes Control, weil es durch das control applyTemplate aktiv ersetzt wird:

{{{
<div control="{template: 'some-panel', apply: $.fn.Panel}" style="margin-top: 10px;">
	<div>Panel Template</div>
	<div control="{insert: 'content'}"/>
</div>

<div control="{applyTemplate: 'some-panel'}">
	<div control="{define: 'content'}">Individual Content 2</div>
</div>
}}}

__Erklärung:__ Das Element (div) mit dem Control applyTemplate wird durch das Template mit dem Namen "some-panel" ersetzt. Dabei werden alle Controls des Templates angewendet, zusätzlich zu den einfügenden Element.

!!For
Um Elemente wiederholen zu können, wird das Control for genutzt. For unterstützt drei Arten der Iteration:

!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>
</div>
}}}

!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>
}}}

!!Interpolate
Das Control interpolate führt zum Ersetzen von Expressions in Attributen und Text-Children des aktuellen Tags:

{{{
<div control="{for: {begin: 0, end: 3, variable: 'x'}}">
	<div control="{interpolate: true}">Iteration No. {x}</div>
</div>
}}}

!!Id
Mit dem Control id kann das Attribut id gesetzt werden, sodass übergeordnete id-Attribute berücksichtigt werden, ähnlich wie bei den JSF-IDs:

{{{
<form id="form">
	<div control="{id: 'text'}">Some Text</div>
</form>
}}}

__Ergebnis:__ Das innere div-Element erhält das Attribut id="form:text".

!!CSS Style
Mit dem Attribut kann ein Style gesetzt werden. Grundsätzlich sollten Styleklassen mit dem Attribut class gesetzt werden und diese in einer CSS-Datei definiert werden. Einzelne Styles können mit dem Attribut style gesetzt werden. Manchmal werden jedoch dynamische Styles gebraucht.

Ein beliebter Kunstgriff ist, Teile der Page zunächst mit dem Style display oder visibility unsichtbar zu machen und erst nach fertiger Aktivierung anzuzeigen:

{{{
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}} }">
	[...]
</div>
}}}

!!After
Normalerweise werden zuerst die aktuellen Controls aktiviert, dann die Controls der untergeordneten Tags. Manchmal kann es erforderlich sein, dass die untergeordneten Tags bereits aktiviert sind. Dazu gibt es das Control after:

{{{
<div style="display: none;" control="{id: 'activate-test', after: {css: {display: 'block'}} }">
	[...]
</div>
}}}

__Erklärung:__ Es handelt sich um dasselbe Beispiel wie bei dem Control style, jedoch geht es hier um den Aspekt after. Das Control after enthält als Wert wieder eine Liste von Controls, die nach der Aktivierung der Children ausgeführt werden.

!!Set
Mit dem Control set können Werte im Context gesetzt werden, die allen untergeordneten Elementen zur Verfügung stehen. Maßgeblich ist dabei die Reihenfolge der Control-Ausführung:

{{{
<div control="{applyTemplate: 'some-panel', set: {templateParam: 2}}">
	<div control="{define: 'content'}">Individual Content 2</div>
</div>

<div control="{template: 'some-panel', apply: $.fn.Panel}" style="margin-top: 10px;">
	<div control="{interpolate: true}">Panel Template, Parameter: {templateParam}</div>
	<div control="{insert: 'content'}"/>
</div>
}}}

__Erklärung:__ Der Parameter templateParam wird von der Einfügestelle applyTemplate an das Template selbst übergeben. Das heißt, jede Template-Instanz kann einen unterschiedlichen Wert erhalten.

!!If
Mit dem Control if können Controls bedingt ausgeführt werden:

{{{
<div control="{if: {condition: test == 2, css: {color: '#10a010'}} }">Some Text</div>
}}}

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.

!!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:

{{{
<label control="{rendered: this.type != 'input'}">Input</label>
}}}

!!AJAX Request
Ein Server-Request kann durch das AJAX-Control durchgeführt werden:

{{{
<div control="{ajax: {url: 'http://localhost/test', variable: 'data'}, interpolate: true}">{data}</div>
}}}

__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!'}">
}}}

!!!Spezielle Controls
Diese Controls werden normaler Weise nur intern verwendet. Es macht keinen Sinn, zu versuchen, diese Controls durch das Control-Attribut eines Tags anzusteuern. Der Vollständigkeit halber sollen sie jedoch erwähnt werden.

!!Children
Dieses Control aktiviert die Children des aktuell bearbeiteten DOM-Knotens, appliziert also deren Controls und damit auch die Children der Children und so weiter.

!!Warn
Damit wird eine Warnung auf der Browser-Konsole ausgegeben, wenn ein Problem bei der Konfiguration oder Verarbeitung der Controls festgestellt wird.

!!!Eigene Controls
[Activate JS] macht das Implementieren von eigenen Controls sehr leicht. Die Controls befinden sich in $.controls und können leicht erweitert werden. Das kann explizit erfolgen, indem ein neuer Key einer Funktion zugewiesen wird:

{{{
$.controls.myControl = function(next) {
	this.element.text("Hello World!");
	next();
};
}}}

__Hinweis:__ Ein Control hat immer den Parameter next, der in der Regel am Ende aufgerufen wird. Dieser sorgt dafür, dass die nachfolgenden Controls und damit auch untergeordnete Elemente aktiviert werden.

Bei mehreren Controls kann man die bequemere Variante mit QUuery extends verwenden:

{{{
$.controls.extend({
	myControl: function(next) {
		this.element.text("Hello World!");
		next();
	},
	myControl2: function(next) {
		this.element.text("Second Control!");
		next();
	}
});
}}}

Im Aufruf des Controls wird this auf den aktuellen Context gesetzt.

!!!Context
Ein wichtiges Prinzip von [Activate JS] ist der Context, in dem nahezu alle Funktionsaufrufe stattfinden. Der Context ist ein erweiterbares Objekt, das jedoch einige grundlegende Einträge enthält:

||Key||Beschreibung
|element|Das aktuelle JQuery-Element in dem der Funktionsaufruf stattfindet.
|controls|Die aktuelle Control-Struktur, die gerade abgearbeitet wird.
|control|Der aktuelle Control-Entry, der gerade verarbeitet wird. Er besteht aus key (Name) und value (Javascript).
|root|Zugriff auf dem Root-Context. Kann für Templates und andere globale Variablen verwendet werden.
|prefix|Das aktuelle Prefix des aktuellen Id-Attributs. Dies besteht aus den Id's der übergeordneten Elemente, getrennt durch Doppelpunkte.

Der Context enthält auch eine Reihe von Funktionen, die für das Implementieren eines Controls nützlich sein können:

||Funktion||Beschreibung
|pop()|Holt das nächste Control aus der aktuellen Control Execution Chain. Das Control ist damit dauerhaft entfernt und wird nicht mehr durch den Aufruf von next() ausgeführt.
|activate(element, options)|Aktiviert die Controls an einem Element und deren Unterknoten. Normalerweise wird diese Funktion durch den Aufruf von next() automatisch ausgeführt. Programmatisch erzeugte Elemente, wie bei Iterationen, können einen expliziten Aufruf erfordern.
|interpolate(text)|Liefert den übergebenen Text, alle Variablen werden durch ihre Werte ersetzt.
|resolve(expression)|Liefert den Wert einer Variable zurück.
|warn(message)|Gibt eine Warnung auf der Konsole mit entsprechenden Kontext-Informationen und Aufrufstack aus, um Fehler leichter lokalisieren zu können.
|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.

__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.

!!!Design Richtlinien
In Activate JS gibt es einige Design Richtlinien im Verwenden des Frameworks, die die Arbeit erleichtern können:

* __Kurz halten:__ Die Parameterisierung von Controls im HTML durch das Attribut control sollte kurz bleiben. Eine komplexe Parameterisierung zeigt, dass hier ein neues Control implementiert werden sollte.