Dojo Workshop #4 - Templates Widgets, Object Store

Ein zäher vierter Teil im Dojo Workshop. Ziel war es ein eigenes Widget mit Template zu erstellen. Idealerweise eine Liste, da dies unter anderem auch eine Schleife im Markup des Templates bedeutet hätte. Anschließend sollte das Template anhand eines Businessobjekt gerendert werden. Das Objekt sollte aus einem Object Store anhand eines Controllers bezogen werden.

Dojo erlaubt das Erstellen von Widgets mit Hilfe von Templates. Ob es sich dabei zwingend um ein einzelnes Steuerelement oder gar um ganze Seitenabschnitte halten muss, sei dahin gestellt. Mit define und dem _TemplatedMixin lassen sich eigene template-basierte Widgets definieren. Das Template ist entweder ein JavaScript String oder wurde zuvor mit require!text aus einer separaten Datei geladen.

Da mit define ein Name für den Prototype vergeben wurde, kann im eigentlichen Markup in Verbindung des data-dojo-type Attributs, an beliebiger Stelle eine Instanz des Widgets erstellt und gerendert werden. Alle im Template verwendeten Bindungen beziehen sich auf die Widget-Instanz selbst.

Der folgende Schnipsel zeigt eine Deklaration eine template-basierten Widgets in JS. Das Widget bezieht das Template aus einer externen Datei mit Hilfe der require Methode des Dojo Frameworks. Das Widget kann anschließend auf der Seite mit dem Markup <div data-dojo-type="templatedWidgetThing"><div> deklarativ verwendet werden.

require(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/TemplatedWidgetThing.html"], function(declare, _WidgetBase, _TemplatedMixin, template) {
    declare('templatedWidgetThing', [_WidgetBase, _TemplatedMixin], {
        templateString: template
    });
});

Die Suche nach der Möglichkeit andere Token als ${name} zu verwenden (z. B. Conditional- oder For-Statements) führte leider zu keinem positiven Ergebnis. Zwar sah Dojo.Dtl sehr viel versprechend aus, weigerte sich jedoch erfolgreich irgendetwas nützliches zu tun.

Der letzte Stop war ein kurzer Blick auf den Object Store. Der Store bietet eine einheitliche API zur Abfrage und Manipulation von Objekten an. Im ersten Schritt haben wir einen Memory Store verwendet. Der Store hält alle seine Objekte im Speicher. Eine Manipulation des Speichers kann somit nicht ausgeschlossen werden.

Der letzte Teil, das Beziehen von Objekten aus einem Store mit Hilfe eines Controllers war zeitlich leider nicht möglich.

Um wieder etwas aufzuholen, wird bis zum nächsten Workshop. Der Server um eine REST API zur Objektabfrage und Manipulation unter Berücksichtigung der JSON/Rest Store Möglichkeiten erstellt. Zusätzlich wird eine Templating-Engine angebunden um weitaus anspruchsvollere Templates darstellen zu können.

Folgende Teilnehmer waren anwesend: Marco Jacob, Heiko Dehmel und Christian Haarmann.