Blogs:
Zur Bestellung selbst:
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
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
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.
Steuerelemente werden durch Dijit um zahlreiche Funktionalitäten erweitert. Widgets können über eine einheitliche API in JavaScript angesprochen und erstellt werden. Dijit bietet auch die Möglichkeit eigene Themes zu verwenden.
Widgets können entweder deklarativ direkt im Markup definiert werden oder aber mit Hilfe von JavaScript erstellt werden. Wenn Widgets im Markup deklariert werden, darf ein Aufruf an den Parser nicht fehlen. Dieser sucht nach Elementen mit bekannten Dojo-Tags, z. B.
Zum Einstieg wurde eine Login-Seite, bestehend aus den Eingaben Anmeldename (TextBox), Passwort (TextBox) und Land (Select), erstellt. Das Land ist mehr Just For Fun auf der Seite da es im Gegensatz zum Anmeldename und Passwort keine Texteingabe, sondern eine Auswahl erfordert. Listen, bzw. Select-Widgets, können so zum Beispiel keine
Die Eingabefelder für Anmeldename und Passwort waren weniger kritisch. Damit die Eingabefelder jedoch mit den Möglichkeiten von Dojox validiert werden können, bedarf es keiner normalen dijit/form/TextBox, sondern einer dijit/form/ValidationTextBox. Darüber hinaus sind die Dojox Validierungen ebenfalls modularisiert. Eine E-Mail Validierung wird erst möglich nachdem neben dem
Das Konfigurieren der Validierung gestaltet sich an dieser Stelle aufgrund der fehlenden Dokumentation etwas umständlich. Entweder ist Reverse Engineering aus den Dojox-Sourcen erforderlich, oder aber Beispiele verraten einen bereits die notwendigen Details zur Steuerung der Schnittstelle. Die Konfiguration geschieht entweder deklarativ oder per Skript. Bei der deklarativen Schreibweise wird die Konfiguration direkt im
Das
Für diese Seite werden beim Laden bereits 87 Requests an den Webserver abgesetzt. Der Grund für die hohe Anzahl der Requests ist das Nachladen der benötigten Abhängigkeiten. Da diese hohe Anzahl der Requests in Produktivumgebungen, insbesondere bei hoher Latenz, zu einer hohen Ladezeit führt, sollten mit Dojo erstellte Projekte unbedingt das Packaging bzw. Building berücksichtigen. Dies werden wir in einem späteren Workshop ausprobieren und die Anwendung noch einmal auf ihre Geschwindigkeit untersuchen.
Folgende Teilnehmer waren anwesend: Marco Jacob, Heiko Dehmel und Thorsten Kutz.
Beim zweiten Treffen wurden weitere JavaScript-Grundlagen und ihren Entsprechungen im Dojo Toolkit durchgenommen. Leider war die Zeit durch technische Probleme etwas knapp bemessen. Die Rechner sollten vor dem Termin daher noch einmal darauf untersucht werden, ob das VS 2013/2012/2010 mit dem .NET Framework 4.5 installiert werden kann und dass die Installation erfolgreich durchgeführt wurde. Darüber hinaus bedarf es eines Git-Clients für den Zugriff auf das TFS-Projekt. Das Visual Studio 2013 besitzt bereits einen Git-Client. Frühere Visual Studio Versionen müssen entweder auf einen separaten Git-Client zurückgreifen oder entsprechende AddIns verwenden (Express-Versionen des Visual Studios sind nicht AddIn fähig).
JavaScript ist eine ebenso objektorientierte Sprache wie Java, C++ oder C#. Im Gegensatz zu vielen objektorientierten Sprachen gibt es in JavaScript keine Trennung zwischen Typdefinition und Instanzen. Dieses Konzept wird Prototyping genannt. Jede Objektinstanz in JavaScript kann daher vollkommen unterschiedliche Eigenschaften und Methoden besitzen, auch wenn diese durch dieselbe Konstruktorfunktion erstellt wurden. Eine gute Einführung in dieses Konzept bietet wie immer das MDN.
In Dojo werden Konstruktorfunktionen mit der
Das Dojo-Toolkit verfolgt das Model-View-Controller Pattern. Im weiteren Verlauf ist es daher früher oder später erforderlich im DOM zu navigieren und des zu manipulieren. Bekannte JavaScript-Bibliotheken für die DOM-Navigation und -Manipulation sind jQuery und - zu einem gewissen Teil - Prototype. Wie bereits im vorherigen Teil beschrieben, versteht sich das Dojo-Toolkit selbst als eine möglichst umfassende Werkzeugkiste. Für DOM-Navigation und -Manipulation bietet das Dojo-Toolkit eine eigene Lösung mit
Ein Vorteil der Verwendung dieser Funktionen im Gegensatz zu den im JavaScript DOM bereits vorhandenen Möglichkeiten zur DOM-Navigation und -Manipulation (z. B.
Folgende Teilnehmer waren anwesend: Marco Jacob, Heiko Dehmel, Thorsten Kutz und Christian Haarmann.
Das erste Treffen der Dojo Workshop-Teilnehmer hat stattgefunden und befasste sich zu einem großen Teil mit dem Einrichten der Entwicklungsumgebung und einigen Grundlagen.
Ziel des Dojo Workshop ist das Erlernen des Dojo Toolkit, seiner API, seinem Einsatzgebiet und Einsatzmöglichkeiten. Das autodidaktisch angeeignete Wissen soll innerhalb des Workshops in einem möglichst realitätsnahen Szenario zum Einsatz kommen.
Dazu wird ebenfalls im Rahmen des Workshops eine Wissensdatenbank entwickelt. Das Hauptaugenmerk liegt hierbei weniger auf ein ansprechendes Interface, sondern auf das geeignete Anwenden der Dojo Funktionen. Die Wissensdatenbank wird soll ein einfaches Interface zum Suchen, Ansehen, Bearbeiten und Erstellen von Artikeln verschiedenster Themen bieten.
Die im Workshop erarbeiteten Ergebnisse werden zu einem Teil nach jedem Treffen in diesem Blog festgehalten, zum anderen wird der Quellcode des Workshop-Projekts und der Beispiele auf unserem Team Foundation Server zu erreichen sein.
Grundvoraussetzung für die Entwicklung im Workshop ist das Visual Studio 2013 (2012 und 2010 sind mit dem entsprechenden Patchlevel ebenfalls möglich).
Damit eine lebensnahe Umgebung während des Workshops zur Verfügung steht, wird ein in C# entwickelter Webserver auf Basis von Nancy verwendet. Der Webserver ist ready to go und muss nicht weiter konfiguriert werden. Er dient in der ersten Phase lediglich dazu Static Content zu liefern. Im späteren Verlauf des Workshops wird der Server um Authentifizierung, Autorisierung und eine RESTful API zur Bearbeitung der Einträge der Wissensdatenbank bieten.
Das Dojo Toolkit strebt einen möglichst großen Funktionsumfang an, sodass wenig oder am gar keine weiteren JavaScript-Bibliotheken erforderlich sind. Das Toolkit besteht aus Dojo, Dijit und Dojox. Dojo bildet den Kern des Toolkits und birgt Basisfunktionalitäten wie zum Beispiel AJAX, DOM Manipulation, Data Stores, Promises, I18N. Dijit beherbergt Widgets (auch als Controls bekannt). Dojox bietet über Dojo hinausgehende Funktionalitäten in verschiedenen Reifegraden (Charting, SVG, WebGl, XML/XSLT etc.).
Einer der ersten Funktionen die im Dojo Toolkit zum Einsatz kommen sind Asynchronous Module Definitions, kurz AMD. Die Funktionalität und API dürfte Anwendern anderer AMD fähiger Bibliotheken, z. B. require.js, bekannt sein. AMD ermöglicht das asynchrone Nachladen von Javascript-Dateien. Dadurch kann JavaScript-Code modularisiert werden. Darüber hinaus können Abhängigkeiten visualisiert und externalisiert werden (Inversion of Control). Es verbessert sich auch das Speicher- und Performanceverhalten, da nur benötigte Scripte geladen, ausgeführt und im Speicher gehalten werden. Auf AMD wurde auch am TypeScript TecDay bereits eingegangen.
Darüber hinaus wurde noch kurz auf JavaScript Scoping und Funktionen im Allgemeinen eingegangen.
Folgende Teilnehmer waren anwesend: Marco Jacob, Sebastian Günther, Heiko Dehmel und Thorsten Kutz.