Jede Version der ArcGIS API for JavaScript API enthält eine neue Version des Dojo-Frameworks und erweitert diese mit GIS-typischen Modulen, wie zum Beispiel für die Karte, für die Layer und Dienstetypen oder für die verschiedenen GIS-Funktionen. Eine Liste der Dojo-Versionen, die in der jeweiligen JavaScript API verwendet werden, findet ihr hier.
Die Versionsnummern einer Anwendung erhält man in der Browserkonsole mit den Befehlen: esri.version und dojo.version. Die ArcGIS API für JavaScript 3.5 basiert auf der Dojo Version 1.8.3.
Den hier besprochenen Code könnt ihr unter meinem Github-Account herunterladen.
Asynchronous Module Definition (AMD)
Schon in der Dojo Version 1.7 hat die Dojo Foundation den AMD-Mechanismus eingeführt, um auch in Zukunft komplexe und schnelle Webanwendungen zu erstellen. Grob gesagt handelt es sich dabei um das nebenläufige Nachladen von zusätzlichen Modulen während der Laufzeit der Anwendung –das hat nichts mit dem Chip-Hersteller AMD zu tun ;-). Ohne AMD werden alle Module beim Start der Website von den verschiedenen Layouts, den Tabellen, von der Karte usw. geladen. Mit AMD habt ihr die Möglichkeit, diese erst dann nachzuladen, wenn sie wirklich benötigt werden, und damit die Ladezeiten etwas zu verteilen.
Speziell wenn ihr eigene Module oder Widgets baut, wird die Arbeit mit AMD wichtig sein. Aber auch bei der Nutzung der Esri API for JavaScript könnt ihr ab jetzt so eure Anwendungen schreiben.
Dojo 2.x umgesetzt werden. Und schließlich beschreibt die Dokumentation der ArcGIS API for JavaScript nun für jede Klasse sowohl die AMD- als auch die Legacy-Nutzung. Ihr könnt im oberen Teil der Seite zwischen Legacy Module Require und AMD Module Require umschalten, zum Beispiel bei der Karte.
ab.
Die dojoConfig-Variable im HTML
Notation von Dijits im HTML-Markup
Die bisherigen DIV-Elemente, die auf Dojo Dijits basieren, wie zum Beispiel ein Content Pane, werden nun nicht mehr über die Punktnotation angesprochen, sondern über Slashes. Auch die Attributbezeichnungen haben sich geändert.
class=”shadow roundedCorners”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
roundedCorners” data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”region:’top'”>
Einladen von Modulen im JavaScript-Code
Beispiel über dojo.require(esri.map);
eingebunden, sondern über einen anderen Mechanismus. Auch der Aufruf der
Hauptmethode über dojo.addOnLoad()
fällt weg. Ein typisches Beispiel mit Modulen für das Design der Webseiten und den Esri Modulen sieht folgendermaßen aus:
ready, dom, on, Map, arcgisUtils, Legend, Scalebar) {
- require:
Hier lädt man über die neue Notation die notwendigen Module. In diesem Fall
sind es zehn Module, einige grundlegende Dojo-Module, zum Beispiel für das
Design (u. a. ContentPane, BorderContainer) und die typischen Esri Module Map, ArcGIS
Utils, Legend, Scalebar. - function():
Die Hauptfunktion beinhaltet alle weiteren Funktionen. Als Parameter können die Namen der Module festgelegt werden, die der Reihenfolge der Module entsprechen.
So dient die Variable Parser beispielsweise zum Aufruf von parser.parse(); der Entsprechung des parseOnLoad Parameters von dojoConfig. Über die Variable dom werden wir später DOM Elemente suchen (vormals über dojo.byId, jetzt über dom.byId).Esri hat eine Namenskonvention herausgegeben, wie die einzelnen Module im Code benannt werden sollen. Diese ist hier
verfügbar. - ready:
die Ready-Anweisung mit der internen Funktion entspricht der bisherigen init-Methode und dem Aufruf über dojo.addOnLoad. Die Variable ready wurde als Parameter mitgegeben und
kommt aus dem dojo/ready-Modul. In dieser Funktion befindet sich also der Code, der zu Beginn ausgeführt werden soll, wie zum Beispiel das Parsen der Dijits (parser.parse();), die Events oder das Initialisieren der Karte.
Weitere Methoden oder globale Variablen werden innerhalb der ersten Funktion eingefügt.
Weitere Änderungen
Mit Dojo 1.8 gibt es weitere Änderungen in der Syntax und der Verwendung. Viele sind noch rückwärtskompatibel mit den alten Aufrufen nutzbar.
Zugriff auf DOM-Elemente
Vormals konnte mit dojo.byId() für DOM Elemente auf das HTML Markup zugegriffen werden (bzw. dijit.byId() für Dijits). Dies war ein browserübergreifender Shortcut für document.getElementById(). Mit Dojo 1.8 lautet der Zugriff dom.byId(), wobei die Variabel dom als Parameter aus dem dojo/dom-Modul definiert ist.
dom.byId(“title”).innerHTML =
response.itemInfo.item.title;
Events
Der bisherige Mechanismus mit dojo.connect() wird durch dojo/on ersetzt, zum Beispiel für ein Doppelklick-Event
auf ein DIV mit der ID rightPane:
var rightPaneHandle = on(dom.byId(“rightPane”),
“dblclick”, show);
Das Doppelklick-Event wird hier auf die Variable rightPaneHandle
geschrieben, um es eventuell später mit rightPaneHandle.remove();
zu entfernen (vormals: dojo.disconnect). Die Variable on wurde als Parameter der Funktion aus dem Modul dojo/on mitgegeben. Wie bei dojo.connect ist der erste Parameter das entsprechende DOM-Element. Die Events werden nun ohne den on-Namensbezug angegeben.
Aus onDlbClick wird dblclick. In diesem Beispiel verweist show auf eine Funktion mit diesem Namen.
array.map
Ein oft genutztes Feature von Dojo ist das Verarbeiten der
Elemente eines Arrays und die Rückgabe eines neuen modifizierten Arrays über
die dojo.map()-Methode. In Dojo 1.8 wird dies nun über das Modul dojo/_base/array durchgeführt. In
unserem Beispiel ist dies über die Variable array
festgelegt, so dass der Code zum Beispiel so aussehen kann:
function(layer, index) {
{
Zusammenfassung
Durch die Änderungen im Dojo Framework 1.8 ändert sich in der ArcGIS API for JavaScript Version 3.4 an einigen Stellen die Syntax und die Verwendung von Komponenten. Viele dieser Neuerungen lassen sich noch über die alten Methoden verwenden, so dass nicht an jeder Stelle der bisherige Code umgewandelt werden muss. Für neue Anwendungen empfiehlt sich das neue Vorgehen, da es Vorteile in der Nutzung des leistungsstarken Dojo-Frameworks und damit der ArcGIS API for JavaScript mit sich bringt.
Autor: Axel Schaefer
