Developing with the ArcGIS API for JavaScript and HTML5

Transcription

1 Developing with the ArcGIS API for JavaScript and HTML5

2 Agenda This seminar is designed to help you understand: 1) Getting started with the ArcGIS API for JavaScript 2) Writing your first JavaScript application 3) Enhancing your applications with HTML5 and Modern Dojo/AMD

3 Getting started with the ArcGIS API for JavaScript

4 ArcGIS API for JavaScript Web browser based API REST Many advantages Browser support Mobile devices Hosted at Esri Active development

5 Dojo Toolkit ArcGIS API for JavaScript is built on top of the Dojo Toolkit Automates common JavaScript tasks and workflows Delivers mobile app layouts Provide common UI components Works with other frameworks

6 Resources API Reference Samples Sandbox

7 The Basics The foundation of a Web mapping application Create a simple HTML document Reference the ArcGIS API for JavaScript Load modules Ensure the DOM is available Create the map Define the page content Style the page W O R K F L O W

8 Building from the foundation Add map elements Incorporate data layers Use feature layers for display and querying Map with dynamic requests Create an editing application Work with tasks and widgets

9 Demonstration I Getting started with the JavaScript API

10 Review and Questions Getting started with the JavaScript API

11 Building JavaScript Applications

12 Integrate with ArcGIS Online Utilize ArcGIS Online services Adding basemaps Geocoding addresses Adding hosted feature services Publish and share customized templates ArcGIS Online users can build applications Enable configuration settings

13 ArcGIS Online templates Many pre-configured templates built with JS API Common layouts and functionality Downloadable Ready-to-use Configurable Customizable

14 Using templates Share web apps to preview and download

15 Configuring templates Review and edit template configuration

16 Demonstration II Building from the foundations starting from an ArcGIS Online application template.

17 Review and Questions Building from the foundations starting from an ArcGIS Online application template.

18 Enhancing ArcGIS API for JavaScript applications

19 Cross domain applications Native CORS (Cross-origin resource sharing) CORS-Enabled Web Browser esri.config.defaults.io.corsenabledservers Remote Server Access-Control-Allow-Origin: * Server-side Proxy - referenced by JavaScript API Web Browser (no CORS) esri.addproxyrule(rule) or esri.config.defaults.io.proxyurl Web Server Proxy.ashx Remote Server

20 Widgets Specialized widgets created by Esri for the JS API Map surround elements Legend Overview Map Application functions InfoWindow Print Geocoder Basemap Gallery Directions Editing tools Template picker Attribute editing

21 Tasks Many out-of the box API modules for performing common tasks Identify Print Locator Route Many more Query Geoprocessing GeometryService ClosestFacility

22 HTML5 Targeted use of key Web browser capabilities to improve the user experience Geolocation API Web storage Drag and drop Web workers Web sockets Application cache (offline apps) Video playback Canvas HTML5 CORS Browser History

23 CSS3 Advanced styling with CSS3 Responsive screen size based design Rounded corners Drop shadows Web fonts Multi-column text layout Animation and transitions with events

24 Browser Compatibility Leverage existing tools and resources to workaround/detect HTML5/CSS3 feature support html5shim Modernizr.com css3generator.com caniuse.com Don't code from scratch - leverage APIs/Libraries: Dojo/Dojox (included with the ArcGIS API for JS) jquery Ext.JS many more.

25 AMD and Modern Dojo Asynchronous Module Definition dojo.require('app.module') replaced by require(["app/module"],function(module){ }) Modern Dojo Replaces many common dojo.* methods dojo.connect() replaced by dojo.on() Legacy methods continue to be supported Some API modules, and documentation/samples still in transition

26 Demonstration III HTML5/CSS3 and Modern Dojo/AMD

27 Review HTML5/CSS3 and Modern Dojo/AMD

28 Summary In this Web Seminar you learned about... 1) Getting started with the ArcGIS API for JavaScript 2) Writing your first JavaScript application 3) Enhancing your applications with HTML5 and Modern Dojo/AMD

29 Resources Finding developer resources Learning JavaScript and HTML

30 Resources Related Training Courses Building Web Applications Using the ArcGIS API for JavaScript Upcoming Web Seminars & Events Implementing the ArcGIS Workflow Manager - Aug. 22 Publishing Story Maps with ArcGIS - Sept. 26 Data Quality Control Using ArcGIS Data Reviewer - Oct. 24 twitter.com/esricanada facebook.com/esricanada