JavaScript-Clients mit Dojo – Seite 1

JavaScript-Clients mit Dojo

Der klassische Fat-Client ist tot! Immer mehr Anwendungen setzen stattdessen auf Web-Clients, welche sich kaum noch von her-kömmlichen GUIs unterscheiden. Das Dojo Toolkit soll die Entwick-lung solcher Clients vereinfachen und beschleunigen. Der folgende Artikel stellt die Bibliothek vor und bietet einen Einstieg in die Arbeit mit Dojo.

Das Dojo Toolkit ist eine umfangreiche Open-Source-Bibliothek (BSD/Academic Free License) für die Entwicklung JavaScript-basierter Clients. Das Projekt gibt es seit 2004 und ist momentan in der Version 1.10 verfügbar. Entwickelt und ver-trieben wird Dojo unter der Schirmherrschaft einer gleichnamigen Stiftung. Außerdem erhält es Unterstützung von namhaften Unternehmen wie IBM und AOL.

Das Toolkit ist in drei Namespaces gegliedert (siehe Abbildung 1). Der Teil "Dojo" enthält grund-legende Funktionen wie Ajax-Kommunikation oder das Arbeiten mit Arrays.

In "Dijit" werden häufig benötigte GUI-Kom-ponenten (Buttons, Kalender, etc.) bereitgestellt, welche durch ein Baukastensystem zu einer Oberfläche zu sammengesetzt werden können.

Der dritte Teil ("DojoX") enthält unterschiedlichste, teilweise experimentelle Funktionalität und soll in einer zukünftigen Version aufgelöst werden.

Dojo und seine Widgets

Der Einstieg in die Entwicklung mit Dojo ist ein - fach und schnell nachvollzogen. Am besten geht das mit einem Webserver, von dem Dateien nach-geladen werden können.

In einem ersten, einfachen Beispiel wollen wir ein Kreisdiagramm (siehe Abbildung 2) erstellen. Dafür müssen wir als erstes Dojo einbinden und konfigurieren (siehe Zeile 2 des Listing 1 auf Seite 2). ►

Abbildung 1:

Zusammensetzung

des Dojo Toolkits

Abbildung 2:

Kreisdiagramm mit Dojo

Tutorial Examples

Dojo no fica on exampleDojo no fica on example

hp://localhost:8080

14,3 %

55,9 %

29,8 %

Seite 2

Die Konfiguration des Frameworks wird über ein Dojo-Attribut vorgenommen. Über solche At- tri bute können viele Features von Dojo genutzt werden. Durch das async:true werden Module erst dann geladen, wenn sie benötigt werden. Um ein Diagramm darstellen zu können, benöti-gen wir drei Module aus dem Dojo Toolkit:

• dojox/charting/Chart

welches grundlegende Funktionen für die Er stellung von Diagrammen bereitstellt (z. B. Datenserien hinzufügen)

• dojox/charting/themes/Claro

für das Styling der Anzeige mittels eines Theme

• dojox/charting/plot2d/Pie

um die Form des Diagramms festzulegen (Kreisdiagramm)

Diese Module laden wir mithilfe der require-Funk-tion von Dojo (siehe Listing 1, Zeile 4 ff.).

Die Namen der Module repräsentieren für Dojo Pfade im Dateisystem. Zum Beispiel wird bei dojox/charting/Chart die JavaScript Datei dojox/charting/Chart.js genutzt.

Nachdem die Module geladen wurden, werden die Instanzen an die anonyme Funktion im zwei-ten Parameter übergeben. In diesem Beispiel werden nur die ersten drei Module weiterverwen-det. Das domReady-Modul sorgt dafür, dass die Funktion erst ausgeführt wird, wenn der gesamte DOM-Baum der Seite geladen wurde.

In der Funktion selbst wird dann ein Chart-Objekt erstellt und an das div-Element mit der ID exampleChart gehängt. Neben dem Theme, wel-ches gesetzt wird, definieren wir auch den Plot, der das Zeichnen des Diagramms übernimmt. Das Chart-Modul erwartet immer einen default Plot, an dem wir noch andere Parameter des Dia-gramms festlegen können. Die Daten, die wir in dem Diagramm darstellen wollen, werden über addSeries hinzugefügt und können entweder ►

1. …

2. <script src="dojo/dojo.js" data-dojo-config="async:true"></script>

3. <script>

4. require(["dojox/charting/Chart",

5. "dojox/charting/themes/Claro",

6. "dojox/charting/plot2d/Pie",

7. "dojo/domReady!"], function (Chart, theme, PiePlot) {

8. var pieChart = new Chart("exampleChart");

9. pieChart.setTheme(theme);

10. pieChart.addPlot("default", {type PiePlot,

11. labelOffset : -25,

12. radius : 250

13. });

14. pieChart.addSeries("Example", [2131, 546, 1134]);

15. pieChart.render();

16. });

17. </script>

18. …

19. <div id="exampleChart"></div>

20. …

Listing 1:

"Hello world" in Dojo

JavaScript-Clients mit Dojo – Seite 3

uninitializedestroy-

Descendantsdestroy-

Rendering

postMix-InProperties

build-Rendering

post-Create startuppostscriptconstructor

Anzeige

aus einem einfachen Zahlen-Array bestehen oder aus einem JSON-Objekt-Array für weitergehende Konfigurationen. Damit haben wir unsere erste kleine Dojo-Anwendung erstellt. Yeah! Nachdem wir nun wissen, wie man Module verwendet, beginnen wir jetzt unser eigenes, wiederverwend-bares Widget zu erstellen.

Ein Hinweis-Widget selbst gebaut

HTML krankt schon seit der ersten Version daran, dass es praktisch keine Wiederverwendbarkeit von eigenen GUI-Komponenten gibt. Erst durch HTML 5 und die darin definierten Web-Com-ponents können mehrfach verwendbare Kompo-nenten erstellt und genutzt werden. Jedoch beherrschen bisher wenige Browser diesen Stan-dard vollständig.

In Dojo erstellte Widgets können diese Lücke füllen. Ausgangspunkt für die Entwicklung eigener Widgets sind so genannte Dojo-Module, die wir schon im Diagramm-Beispiel erfolgreich ver-wendet haben.

Die Grundlage für Dojo-Module bereitet die Asyn - chronous Module Definition (AMD), eine Java-Script-Schnittstelle, über die Module definiert und Modulabhängigkeiten asynchron geladen werden können. Dies ermöglicht es, nur die Codefragmente zu laden und zu übertragen, welche benötigt werden. Die Anwendung weist so einen ver hältnis-mäßig geringeren Footprint auf. Ein Modul in Dojo entspricht in etwa einer Java-Klasse. Über so genannte Mixins ist es möglich, Funktionalität von anderen Modulen in das eigene Modul zu über - nehmen (vergleichbar mit Mehrfachvererbung).

Abbildung 4 (rechts):

Zusammenspiel der Widget-

Bauteile

Wiederverwendbare GUI-Elemente werden Wid-gets genannt und basieren ebenfalls auf Modulen. Die Grundlage für eigene Widgets ist das Modul dijit/_WidgetBase, welches vor allem Funktionen des Lebenszyklus bereitstellt.

Der Lebenszyklus eines Widgets ist in Abbildung 3 zu sehen. Für uns Nutzer sind dabei die Funk - tionen postCreate und startup besonders inte-ressant. In postCreate wurden die DOM-Elemente schon erstellt und können noch weiter angerei-chert werden, zum Beispiel mit Event-Handlern. In der Funktion startup wurden die Widget- Elemente zum DOM-Baum der Seite hinzugefügt. An dieser Stelle bieten sich Layout-Operationen an, da nun der zur Verfügung stehende Platz genau ermittelt werden kann.

Dojo ermöglicht eine gute Trennung zwischen Lo- gik und Markup bei der Erstellung solcher Widgets. Das bedeutet, dass JavaScript (Logik), HTML (Widget-Struktur) sowie CSS (Styling) in unterschiedlichen Dateien abgelegt werden können (siehe Abbildung 4).

Eine solche Trennung hilft, den Überblick zu behal-ten. Das HTML-Template für unser Widget wird von Dojo geladen und an den JavaScript-Teil unseres Moduls übergeben. Dort können wir weitere Ma-nipulationen an den HTML-Elementen vornehmen, z. B. Event-Handler registrieren oder Platzhalter ersetzen. Um mit Widget-Temp lates arbeiten zu kön - nen, wird das Modul _Temp latedMixin be nötigt. Dieses Modul sorgt unter anderem für das Anrei-chern des Templates mit Platzhalterwerten.

Nach der grauen Theorie wollen wir jetzt ein eigenes Widget erstellen. In unserem Beispiel soll ein Notification Widget entstehen. Dabei handelt es sich um eine kleine Box, die am unteren Web-seitenrand Fehler- oder Hinweismeldungen aus-geben kann (siehe Abbildung 5, Seite 4). ►

Abbildung 3:

Lebenszyklus eines Dojo-

Widgets

HTML-Ausgabe CSSJavaScript

HTML-Template

Seite 4

Listing 2:

Markup eines einfachen

Notification Widgets

In Listing 2 wird das HTML-Template für dieses Widget gezeigt. Dieses speichern wir unter dem Pfad buschmais/NotificationWidget.html.

In einem Widget sollte stets nur ein Root-Ele - ment vorhanden sein. Dieses wird automatisch von Dojo mit weiteren Attributen und Werten ange-reichert. So wird zum Beispiel eine generierte ID gesetzt. Die Notification besteht aus zwei Wer - ten, einer Fehlereinstufung (info, warn oder error) und dem eigentlichen Hinweistext. Mittels ${...} kann auf JavaScript-Properties des Widgets zuge-griffen werden.

Die Property baseClass enthält den Namen einer CSS-Klasse, um das Widget stylen zu können ohne in Konflikt mit anderen GUI-Elementen zu kommen.

Nun wird noch eine JavaScript-Datei benötigt, um das Markup mit Inhalt zu füllen und anzuzei-gen (siehe Listing 3 auf Seite 5).

1. <div class="${baseClass}-${notification.severity}" style="position: fixed;

2. left: bottom: 20px; right: 20px; width: 300px;">

3. <div class="${baseClass}-severity">${notification.severity}</div>

4. <div class="${baseClass}-text">${notification.text}</div>

5. </div>

Statt dem require aus Listing 1 wird bei der De- finition von Modulen die Funktion define ver-wendet. Der größte Unterschied für den Nutzer ist, dass die Callback-Funktion von define() einen Wert zurückgeben muss. Dieser Rückgabe-wert ist das neue Modul bzw. Widget.

Um das Widget-Objekt zu erzeugen wird die Funktion declare() benutzt. Diese Funktion erzeugt das Modul aus den Mixins und registriert es in der Dojo-Registry.

Als ersten Parameter im Listing 3 wird eine Liste von JavaScript-Objekten übergeben, die erweitert werden sollen (_WidgetBase, _TemplatedMixin). Im zweiten Parameter wird ein JSON-Objekt kon-struiert. In diesem sind widget-spezifische Funk- tionen und Properties hinterlegt. Dabei können auch Werte überschrieben werden. So wird zum Beispiel der Template-String aus _TemplatedMixin neu gesetzt. Das Template selbst wird über das Modul dojo/text geladen und bereitgestellt (siehe Zeile 2). Die Funktion postCreate ist an den Widget-Lifecycle gebunden (siehe Abbildung 3) ►

Abbildung 5:

Beispiel Infomeldung mit

dem Notification WidgetDojo no�fica�on exampleDojo no�fica�on example

h�p://localhost:8080

Show Info Show Warning Show Error

INFO

Hey! A wild Info no�fica�on appears.

JavaScript-Clients mit Dojo – Seite 5

und sorgt dafür, dass die Meldung in den DOM-Baum (body-Element) eingehängt wird. Möchte man auf diesen Aufruf verzichten, muss beim Be - nutzen des Widgets entschieden werden, wo es platziert wird. Das ergibt für unser Beispiel aber keinen Sinn, da Notifications immer fix am unteren Bildschirmrand angezeigt werden sollen. Damit ist das Modul fertig.

Zur Benutzung unserer Notifications muss das Modul, wie in dem Diagrammbeispiel, in der HTML-Datei geladen und erzeugt werden (siehe Listing 4). Über den Konstruktor können Pro- perties eines Widgets überschrieben werden. Der Hinweistext und -status kann al so für jede Meldung individuell gesetzt werden. Nach dem

Aufruf der Seite wird unser Hinweis auf der Seite angezeigt. Wir haben ein eigenes Dojo-Widget erstellt und verwendet.

Das Beispiel kann bei Bedarf noch vielseitig er - wei tert werden. Um den DOM-Knoten mit der Meldung wieder zu entfernen, rufen wir NotificationWidget#destroy() auf. Diese Funk- tion wird von _WidgetBase geerbt und ist somit für alle eigenen Widgets verfügbar. Durch ein wenig CSS und die Verwendung des Dojo Effekt-Modules (dojo/fx) kann das Widget noch weiter auf gehübscht werden. Soll während der Anzeige der Text verändert werden, können wir nicht mehr mit ${...} arbeiten. Dieser Zugriffsmecha-nismus darf nur bei un veränderlichen ►

Listing 3:

JavaScript Definition des

Notification Widgets in

buschmais/NotificationWid-

get.js

Listing 4:

Verwendung des Notification

Widgets in index.html

1. require(["buschmais/NotificationWidget", "dojo/domReady!"],

2. function(NotificationWidget) {

3. new NotificationWidget({notification:

4. {severity: "info",

5. text: "Hey! A wild info notification appears."}

6. });

7. }

8. );

1. define(["dojo/_base/declare",

2. "dijit/_WidgetBase",

3. "dijit/_TemplatedMixin",

4. "dojo/_base/window",

5. "dojo/text!./NotificationWidget.html"],

6. function(declare, _WidgetBase, _TemplatedMixin, win, template){

7. return declare([_WidgetBase, _TemplatedMixin], {

8. notification: {

9. severity: "info",

10. text: "Example text"

11. },

12. templateString: template,

13. baseClass: "notification",

14. postCreate: function(){

15. this.placeAt(win.body());

16. }

17. });

18. });

Seite 6

Störend fand ich die Kleinteiligkeit der Module. Anstatt ein Modul für DOM-Operationen bereitzu - stellen, gibt es separate Module für das Finden von DOM Knoten (dojo/dom), das Auslesen oder Setzen von Attributen (dojo/dom-attr) und das Erstellen und Platzieren von DOM Knoten (dojo/dom-construct). Für Anwendungen, bei denen Bandbreite gespart werden muss, kann dies sicher-lich hilfreich sein. Schließlich müssen so nur die tatsächlich benötigten Funktionen übertragen werden. Für alle anderen wäre das Arbeiten einfacher, wenn es Module gäbe, die Funktiona-lität bündeln würden. Das hätte darüber hinaus auch den Vorteil, dass die Aufrufe von require() und define() einfacher zu schreiben und über-sichtlicher wären.

Dojo lässt dem Entwickler viele Freiheiten. So muss Layout und Code nicht so streng getrennt werden wie in unserem Beispiel. Es können auch alle Dom-Elemente über JavaScript erzeugt und verarbeitet werden. Das kann zu Code füh-ren, bei dem es zu einer unschönen Vermischung von Zuständigkeiten kommt. Dojo fordert also viel Disziplin von den Entwicklern, um den Code wartbar zu gestalten.

Ein gewichtiger Vorteil von Dojo ist auf jeden Fall die aktive Community und die stetige Weiter - entwicklung. In der Hoffnung, dass es mit diesem Support im Rücken nicht so schnell eingestellt wird, lohnt ein Blick auf das Dojo Toolkit allemal. ■ Peter Herklotz

Werten genutzt werden, da kein Databinding stattfindet, sondern die Werte einmalig ersetzt werden. Möchten wir Werte neu setzten oder auslesen, müssen so genannte Attach-Points ge - nutzt werden. Über Attach-Points kann einfach auf bestimmte DOM-Elemente des Widgets zu- gegriffen werden. Dafür werden die HTML- Elemente mit dem Attribut data-dojo-attach-point='attachPointName' markiert, auf die ein Zugriff erfolgen soll. Dojo stellt diese Elemente dann über eine Property mit gleichem Namen zur Verfügung. Im Widget selbst kann also mit this.attachPointName auf das DOM-Element zugegriffen werden. Das komplette Widget inkl. Beispiel wird auf GitHub bereitgestellt.

Vor- und Nachteile: ein Fazit zur Arbeit mit Dojo

JavaScript-Frameworks gibt es wie Sand am Meer. Was unterscheidet Dojo von den vielen an-deren Bibliotheken wie z. B. jQuery oder Googles Polymer? Zum einen hat das Dojo-Framework einen beeindruckenden Umfang, der viele Be-reiche abdeckt. Egal ob es um das Handling von JavaScript-Arrays, mobile Entwicklung oder das Layout von Webseiten geht, vieles ist mit Dojo möglich.

Zum anderen fällt der Einstieg in die Entwick-lung mit Dojo dank der sehr guten Dokumen-tation leicht, denn man findet schnell benötigte Module samt Beispielen.

Peter Herklotz ist Berater bei der

buschmais GbR. Seine fach-

lichen Schwerpunkte liegen in der

Konzeption und Entwicklung

neuer, sowie Erweiterung bestehen-

der Java-Applikationen.

Kontakt

buschmais GbR Leipziger Straße 9301127 Dresden

Tel 0351 3209230Fax 0351 32092329E-Mail info@buschmais.comWeb www.buschmais.de

Copyright © 2015 buschmais GbR Alle Rechte vorbehalten. "buschmais" ist eine eingetragene Marke der buschmais GbR. Ihre Verwendung im Geschäftsverkehr ist nur bei ausdrücklicher, schriftlicher Erlaubnis der buschmais GbR statthaft.