Dojo Toolkit Workshop, Mai 2009

Anfang Mai luden Uxebu und SitePen zu einem Dojo Toolkit-Workshop, genauer gesagt „Intro to Dojo, Charts, Grids, and Comet“, nach Oberhaching bei München. Mayflower war mit schätzugsweise einem guten Drittel aller Workshop-Teilnehmer zahlreich vertreten.

Dylan Schiemann von SitePen, Inc. und Nikolai Onken von Uxebu führten durch das Programm, außerdem konnten die Teilnehmer bei Fragen auf das Wissen und Erfahrung von Wolfram Kriesing (Uxebu), Tobias von Klipstein (Uxebu) und Peter Higgins (Dojo Toolkit) zurückgreifen.

Nachdem das Programm im Laufe der Zeit auf einen Tag reduziert worden war, änderte sich auch das Grundkonzept der Veranstaltung. Diese sollte nun die Benutzung von einigen ausgewählten Widgets zeigen, wobei sich die Auswahl an der Anwendung Stocker orientierte.
http://persevere.sitepen.com/stocker.html

Das Backend (Persevere/CometD-basiert) wurde von Sitepen bereitgestellt. Nähere Details zum Backend bzw. zur Anwedung selbst können hier in Erfahrung gebracht werden:
http://www.sitepen.com/blog/2009/04/01/stocker-advanced-dojo-made-easy/

Die behandelten Widgets waren u.a.:
dijit.layout.BorderContainer
dijit.layout.ContentPane

dojox.grid.DataGrid (mit Anbindung an einen JSON-Store über dojo.data.ItemFileReadStore)
dojox.charting.Chart2D

Aufgrund des engen Zeitrahmens wurde auf den Dojo Parser sowie die CSS-Struktur nur insofern eingangen, als dass man sich die entsprechenden Includes kopieren/abschreiben konnte, mit der man eine Umgebung zum Ausprobieren hatte. Auch wurde nahezu ausschließlich nur das „deklarative“ Dojo-Programmierungsmodel gezeigt, sprich die Widgets wurden über Markup platziert und initialisiert, nicht programmatisch.
http://dojocampus.org/content/2009/04/15/declarative-vs-programatic/
Andererseits ist es wohl genau der Weg, den jemand beim ersten Blick auf Dojo zuallererst einschlagen würde.

Der Ablauf jedes Agenda-Teilschrittes (im Falle der Widgets) war wie folgt:

  • Vorstellung des Widgets inkl. Beispielcode
  • 15-30 Minuten Zeit, in der die Teilnehmer das zuvor Gezeigte selber ausprobieren konnte. In dieser Zeit begutachteten die Tutoren immer wieder den Fortschritt bzw. standen für Fragen zur Verfügung

Natürlich bestand die Agenda nicht nur aus Widgets – diese wurden immer wieder mit anderen Programmpunkten aufgelockert – sei es durch Interessantes von Dylan (ob Geschichte des Dojo Toolkits oder kurze Erklärung von Polling und Comet), ganz banal Mittagessen oder (am Ende) Peters beeindruckende Einblicke in plugd (Erweiterung der Dojo-Basisbibliothek).

Trotz der Ausrichtung auf Anfänger, gab es auch zwischendurch kleinere Tipps, die man auch als erfahrener Dojo-Anwender nicht unbedingt gekannt hatte, z.B.:

formatter-Funktion in dojox.grid.DataGrid:

Diese dient der Formatierung der Werte in den einzelnen Grid-Spalten.
Das Beispiel würde alle Werte in der linken Grid-Spalte in runden Klammern darstellen.
(Anm.: Folgender Code ist auf das zum Nachvollziehen Nötigste zusammengefasst)

Eine relativ bequeme Möglichkeit, JavaScript in dijit.layout.ContentPane zu laden und auszuführen:

Um einzelne Seitenbereiche dynamisch nachzuladen bzw. upzudaten, bietet sich dijit.layout.ContentPane an. Man definiert also einen solchen Seitenbereich als ContentPane:

Nach der Instanziierung kann man in JavaScript den Inhalt dieses Bereiches ganz einfach über den href-Parameter nachladen:
(Anm.: Dies geschieht dann per AJAX und unterliegt der same origin policy. Der Parameter parseOnLoad bewirkt hierbei, dass der nachgeladene Inhalt durch den Dojo Parser läuft und somit evtl. vorhandene Widgets gleich instanziiert werden. Dies ist in unserem Fall notwendig.)

Netterweise ist z.B. dijit.Dialog von dijit.layout.ContentPane abgeleitet, d.h. die gleiche Vorgehensweise existiert auch da.

Dabei wird man jedoch auf folgendes Problem stoßen. Man wird vielleicht geneigt sein, im nachgeladenen Content nicht nur HTML und CSS auszuliefern, sondern auch JavaScript-Code, z.B.:

Jeglicher JavaScript-Code wird aber in diesem Fall entfernt werden. Ein möglicher Ausweg aus dieser Situation ist die Benutzung von dojox.layout.ContentPane, welche (richtige Parameter vorausgesetzt) das Nachladen von JavaScript erlaubt.
http://dojocampus.org/content/2008/07/30/executing-javascript-inside-content-panes/

Eine andere Möglichkeit besteht, JavaScript aus dem nachgeladenen Inhalt zu extrahieren und an die <head>-Node anzuhängen.
Um sich nicht selber um Extraktion etc. kümmern zu müssen, verpacken wir den JavaScript-Code in ein eigenes Widget, woraus er dann beim Parsen extrahiert wird und an die richtige Stelle im DOM wandert. Das Widget nennen wir z.B. dojo.Script

Das vorige Beispiel würde dann wie folgt aussehen:

Das Widget dojo.Script kann man z.B. auf die Schnelle durch folgenden Code im Programmfluss deklarieren, sobald dojo zur Verfügung steht.
(Anm.: Der folgende Code stammt von Peter Higgins)

Somit muss man sich zum einen nicht selber um nachgeladenes JavaScript kümmern und kann zum anderen immer noch auf dijit.layout.ContentPane und alle Widgets, die davon abgeleitet sind, zurückgreifen. Im Falle von dojox.layout.ContentPane z.B. müsste man sich erst einmal eine eigene Version von dijit.Dialog ableiten, sofern man dieses Widget mit JavaScript benutzen möchte.

Fazit: Der Besuch der Veranstaltung hat sich gelohnt! An dieser Stelle ein großes Dankeschön die Jungs von Uxebu und Sitepen.

Für neue Blogupdates anmelden:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.