Please activate JavaScript!
Please install Adobe Flash Player, click here for download

arcAKTUELL 2.2015 - Städte und Dörfer

Abbildung 1: Ordnerinhalte einer exportierten Web-Applikation Web AppBuilder for ArcGIS – Developer Edition Ein eigenes Widget entwickeln Seit einigen Monaten gibt es den Web AppBuilder for ArcGIS. Damit können Anwender von ArcGIS Online und Portal for ArcGIS eigene Web- anwendungen erstellen, ganz ohne Programmierkenntnisse. Hierzu stellt der AppBuilder verschiedene Layouts (Themes) und eine umfangreiche Bibliothek an GIS-Funktionsbausteinen (Widgets) zur Verfügung. Doch was tun, wenn diese nicht ausreichen? Für diesen Fall gibt es die Deve- loper Edition des Web AppBuilder for ArcGIS. Das ist eine eigenständi- ge Version, die per Download zur Verfügung steht. Sie bietet Entwick- lern ein umfangreiches Framework, um eigene Widgets und Themes zu entwicklen. Struktur einer Web AppBuilder Anwendung Zum Einstieg wird die Struktur einer fertigen Web AppBuilder Anwen- dung betrachtet. Diese erhält man, indem man eine bereits konfigurierte App downloadet. Der Export enthält einen Ordner mit verschiedenen Dateien und Unterordnern. Kopiert man diesen auf einen eigenen Web- server, ist die Anwendung dort lauffähig. Die Anwendung soll zunächst noch erweitert werden, daher ein Blick auf die Struktur dieses Ordners. Die Unterordner dynamic-modules, jimu.js und libs enthalten die Kern- funktionalität der Anwendung. Sozusagen die Magic, um aus den ein- zelnen Bausteinen eine lauffähige Anwendung zu machen. Diese Ord- ner sollten deshalb, bis auf wenige beschriebene Ausnahmen, möglichst nicht bearbeitet werden. Hierzu zählen auch die JavaScript-Dateien im Stammverzeichnis. Images und Themes sind für das Layout der Anwen- dung verantwortlich. Die oben erwähnten GIS-Funktionsbausteine fin- det man im Ordner widgets. Die im Builder konfigurierten Einstellun- gen für die einzelnen Widgets sind im Unterordner configs abgelegt. In der im Stammverzeichnis befindlichen Datei config.json sind die Ein- stellungen der Anwendung beschrieben. Eine Erläuterung dieser Kon- figurationsdateien findet man in der Datei config-readme.txt. Zudem ist eine ausführliche Online-Dokumentation vorhanden (» Abbildung 1). Bestandteile eines Widgets Im Builder werden unter client\stemapp\widgets\samplewidgets eini- ge Templates zum Entwickeln eigener Widgets mitgeliefert. Einstiegs- punkt ist das CustomWidgetTemplate. Es wird in den Widget-Ordner der Anwendung kopiert und passend benannt. Jetzt muss das Widget noch in die Anwendung eingebunden werden, indem es in der Datei config.json zum widgetPool hinzugefügt wird. Beim Betrachten der Bestandteile des Templates fällt auf, dass – wie auch im Rest der Applikation – Seitenaufbau, Layout und ­Funktiona­lität getrennt sind. Eine HTML-Datei (Widget.html) definiert Platzhalter in Form von

-Containern, die zwar die Bestandteile der Benutzer- oberfläche grob definieren, jedoch üblicherweise keine sichtbaren In- halte enthalten. Das Aussehen aller UI-Elemente wird über Stylesheets (Unterordner css) definiert. Die eigentliche Logik findet sich in den Java­ Script-Dateien wieder, wobei der Einstiegspunkt die Datei widget.js ist. Die Internationalisierung der Inhalte wird umgesetzt durch das Modul i18n des JavaScript-Frameworks Dojo . Die dazugehörigen Tabellen be- finden sich im Unterordner nls. Außerdem lassen sich Konfigurationseinstellungen auf Widget-Ebene in der Datei config.json ablegen. Die Datei manifest.json ist zur An- gabe von Metainformationen gedacht, wie dem Namen des Widgets, dem angezeigten Label, einer Versionsnummer oder Angaben zum Au- tor. Die beiden Dateien sind vor allem wichtig, wenn das Widget nicht nur in einer Anwendung integriert werden soll, sondern auch dem Buil- der zur Wiederverwendung in anderen Apps zur Verfügung gestellt wird (» Abbildung 2). Widget.js – der Lebenszyklus Für die Entwicklung steht die komplette Bandbreite des ArcGIS API for JavaScript und des Dojo Toolkits zur Verfügung. Auch externe JavaScript- Bibliotheken lassen sich problemlos einbinden. Wichtig ist nur, dass ein Widget immer von der Klasse BaseWidget ableiten muss. Die Grundstruk- tur dieser Klasse entspricht dem Lebenszyklus eines Widgets: Die Funkti- onen postCreate() und startup() sind dafür gedacht, einige Komponenten beiderEntwicklungeinesWidgetszuregeln.SokönnenzumBeispielGUI- Elemente instanziiert und im HTML-Code platziert werden – noch un- sichtbar für den User. Für den weiteren Lebenszyklus des Widgets lassen sich Funktionen definieren, die in bestimmten Situationen ausgeführt werden: onOpen() wird automatisch beim Öffnen des Widgets ausge- löst. Hier können Aktionen abgefahren werden, die direkt im Anschluss an das Öffnen geschehen sollen – beispielsweise Animationen, die der User zu Beginn sehen soll, oder das Starten einer Mediendatei. Wei- tere Standardsituationen werden durch onMaximize(), onSignIn() oder onClose() abgedeckt. Abbildung 2: Aufbau eines Widgets 37S of t w a r e

Seitenübersicht