GIS IQ Blog
  • Schule
  • Hochschule
  • Forschung
Kategorien
  • Forschung
  • Hochschule
  • Schule
Themen
ArcGIS Case Studies Digitale Bildung Dozierende eduGISchat Events GeoDev KarriereMitGIS Kartografie Lehrerhandreichungen Open Data Praktikum Projekte Ressourcen Schüler Smart Campus Smart Community Sommercamps Story Map Studierende Tutorial Unterricht Wettbewerb
  • Schule
  • Hochschule
  • Forschung
News
  • Schule

Für Entwickler: Neues bei ArcGIS API for JavaScript und Dojo 1.8

  • 18. Juni 2013
  • Team Education
Total
0
Shares
0
0
0
0
0
0
Die größten Änderungen der ArcGIS API for JavaScript Version 3.4 betreffen das JavaScript-Framework Dojo.
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.
Dieser Blog-Eintrag beschreibt die Hauptänderung in der  aktuellen Dojo-Version, die Asynchronous Module Definition (AMD). Ich stelle  die wichtigsten Änderungen beim Nutzen von AMD-Modulen vor. Dazu modifiziere  ich das Beispiel Create web map by ID  aus der Dokumentation.
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.

Es gibt im Netz viele Informationen zu dem Thema. Einige  Neuerungen in Dojo 1.8 finden sich im Blogeintrag „Dojo 1.8 released!“.  Das Arbeiten mit AMD wird natürlich auch in der Dokumentation  der ArcGIS API for JavaScript angesprochen. Darüber hinaus fasst der „Dojo  1.x to 2.0 Migration Guide“ zusammen, wie diese Neuerungen zukünftig in
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.
Die Programmierung mit AMD wird ab der Version 1.8 von Dojo  empfohlen. Mit der neuen ArcGIS API for JavaScript folgt Esri dieser  Empfehlung. Die alten Verfahren sind noch möglich; bei der Erstellung von neuen  Anwendungen sollte man aber das AMD-Verfahren nutzen. Ob man alte Anwendungen  bei einem Upgrade anpassen möchte, hängt aber ganz vom Projekt und vom Aufwand
ab.

Die dojoConfig-Variable im HTML

Die spezifischen Dojo-Konfigurationen schreibt man in die  Variable, die man vor dem Einladen der ArcGIS API for JavaScript definiert.  Dazu gehören der Pfad zu eigenen Modulen, Klassen und Dijits sowie das  parseOnLoad-Statement. Statt djConfig  sollte man nun dojoConfig schreiben.  Die Variable enthält einige neue Parameter, speziell zum Debugging. Mehr  Informationen zu dojoConfig findet ihr in einem Dojo-Tutorial.

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.

Aus ALT:
<div id=”Header”
class=”shadow roundedCorners”
data-dojo-type=”dijit.layout.ContentPane”
data-dojo-props=”region:’top'”>
wird:
<div id=”header” class=”shadow
roundedCorners” data-dojo-type=”dijit/layout/ContentPane”
data-dojo-props=”region:’top'”>

Einladen von Modulen im JavaScript-Code

In den JavaScript-Dateien werden Module nun nicht mehr zum
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:
require([“dojo/parser”,
“dojo/ready”,
“dojo/dom”,
         “dojo/on”,
         “esri/map”,
         “esri/arcgis/utils”,
         “esri/dijit/Legend”,
         “esri/dijit/Scalebar”,
         “dijit/layout/BorderContainer”,
“dijit/layout/ContentPane”],
    function(parser,
ready, dom, on, Map, arcgisUtils, Legend, Scalebar) {
        ready(function() {
            // “init” Anweisungen
        }):
        // weitere Methoden
    }
);
Dieser kleine Code-Block besteht aus drei Hauptelementen:
  •  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:

var opLayerInfos = array.map(opLayers,
function(layer, index) {
    return
{
layer: layer.layerObject,
title: layer.title
    };
});

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

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Team Education

Wir sind das Team Bildung Wissenschaft Forschung von Esri Deutschland und sind verteilt über die Standorte Kranzberg, Hannover, Berlin, Münster und Zürich.

Voriger Artikel
  • Hochschule
  • Schule

Radeln im Altenburger Land oder wie ihr selbst einen Radtourenführer erstellt

  • 11. Juni 2013
  • Team Education
Weiterlesen
Nächster Artikel
  • Forschung
  • Hochschule

GIS & Open Data (3/3): Maps und Apps mit Open Data

  • 3. Juli 2013
  • Grischa Gundelsweiler
Weiterlesen
Dir könnte auch gefallen
Titelbild zum Erdbebenbeitrag. Die Karte zeigt das Erdbeben in der Türkei und Syrien 2023 sowie die Plattengrenzen.
Weiterlesen
  • Schule

Im Unterricht: Analysiert Erdbeben mit ArcGIS Online

  • Klaus Nakel
  • 23. März 2023
Weiterlesen
  • Hochschule
  • Schule

Komm mit in den Nationalpark Wattenmeer -Sommercamp für Lehramtsstudierende 2023

  • Team Education
  • 16. März 2023
Header für den Beitrag zu den Analysen im neuen Map Viewer
Weiterlesen
  • Hochschule
  • Schule

Neuer Map Viewer in Lehre und Unterricht – jetzt auch mit Analysen

  • Klaus Nakel
  • 1. März 2023
Weiterlesen
  • Schule

Fortbildungstermine des Esri Schulteams

  • Klaus Nakel
  • 1. Januar 2023
Header des Blogbeitrags Fernerkundung im Unterricht
Weiterlesen
  • Hochschule
  • Schule

Fernerkundung im Unterricht – neues Material für Schulen

  • Klaus Nakel
  • 18. November 2022
Weiterlesen
  • Schule

Geoolympiade-Sommercamp 2022 im Schweizer Nationalpark

  • Stefan Graf
  • 27. Oktober 2022
Banner des Kurses Transkulturelles Lernen im Unterricht
Weiterlesen
  • Hochschule
  • Schule

Transkulturelles Lernen – Lehramtsstudierende erstellten interaktive Unterrichtseinheiten

  • Christina Lechthaler
  • 18. Oktober 2022
WWW2022
Weiterlesen
  • Hochschule
  • Schule

Praktikum bei Esri: Unterrichtsmaterial für die „WWW2022“

  • Gastautor
  • 7. Oktober 2022
GIS IQ Blog
  • Über uns
  • Impressum
  • Datenschutz
Lernen. Forschen. Entwickeln. Mit GeoIntelligenz!

Gib dein Suchwort ein und drücke Enter.