Activate JS ist eine JQuery basierende Templating Engine.
Inhalt#
Aktueller Status#
Activate JS befindet sich noch in der Entwicklung. Für die Nutzung einer Beta-Version nehmen Sie bitte
Kontakt zu uns auf.
Design Anforderungen#
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
- Erweiterbarkeit: Activate JS soll einfach erweitert werden können
- Behandlung neuer Control-Strukturen
- Instantiierung von JQuery-Komponenten
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.
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:
<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'}"/>
</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>
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".
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: {style: {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: {style: {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.
Mit dem Control if können die verbleibenden Controls bedingt ausgeführt werden:
<div control="{if: test == 2, style: {color: '#10a010'}}">Some Text</div>
Hinweis: Die If-Condition wird während des Parsens des Javascript-Code ausgeführt, was in vielen Fällen zu früh sein kann.
Um auf Ergebnisse anderer Controls zugreifen zu können, kann die Condition auch eine Funktion sein:
<div control="{if: function() {return this.test == 2}, style: {color: '#10a010'}}">Some Text</div>
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.
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 (function). |
| root | Zugriff auf dem Root-Context. Kann für Templates und andere globale Variablen verwendet werden. |