Introduction to JavaScript. Evan Caldwell & James Tedrick

Transcription

1 Introduction to JavaScript Evan Caldwell & James Tedrick

2 Agenda Getting Started - Meet the Esri API for JavaScript! - Meet Dojo! - Tools of the trade My First App JS API fundamentals How JS apps work Where we re going

3 JS Advantages (Mostly) Universal - Code once, run anywhere - Runs in mobile devices BIG Developer community - Samples abound - Tons of momentum (HTML5) C/Java-like syntax (familiar to many programmers)

4 JS Disadvantages Not as good with graphics as dedicated rich media plugins (Flash/Silverlight) Easy to break (e.g. namespace collision) Inconsistent behavior across browsers Confusion between JavaScript & Java

5 Browsers All modern browsers have development tools (yes, even IE) - Network logs - JavaScript Console - Page inspector & editor Need to test over multiple browsers - IE (multiple versions) - Firefox - Chrome/Safari (same rendering engine)

6 Code Tools

7 Getting help: ArcGIS Resource Center

8 ArcGIS API for JavaScript

9 Web Mapping APIs Allow developers to easily build custom Web applications - ArcGIS API for JavaScript - ArcGIS API for Flex - ArcGIS API for Silverlight Built on a simple architecture - Use REST services endpoint - Web services based

10 What can you do with the API? Interactive maps ArcGIS Online Basemaps ArcGIS Online Services - Find Addresses - Calculate a route Run your own tasks Load data from ArcGIS Server

11 Current version: 3.3 (January) Making the API non-geographer friendly - Accepting Lat/Long as default coordinates - Center/Zoom map creation - Easy access to basemaps Geocoding Widget Accept custom value functions for renderers

12 Esri JS API is built on top of the Dojo Toolkit Dojo is a set of tools to make it easier to build complex applications using JavaScript Automates common javascript tasks & workflows Provides user interface (layout structure, graphs, form items) Mobile app layouts

13 Essential Dojo code dojo.require(<library>) - Import statement requesting JS library of dojo class/object dojo.addonload(<function>) - Once the page is ready, run the function - Have an initial function that starts everything up, place it inside addonload Note: both these patterns are changing (see the AMD section in Advanced Session), but will be supported by Esri for the next few versions

14 Dijits Dijits are user interface pieces - Layout: Containers, Tabs, Accordions - App control: Menus, Dialogs - Forms: Validating text box, Dropdowns, Rich Text - Data Display: Charts, Grids, Gauges

15 Bring your own framework The JS API also plays well with other frameworks (jquery, Sencha, ) Esri provides a compact build of the API, minimizes the amount of Dojo loaded Recommended design philosophy: separate Esri/Dojo code from other framework code to enhance maintainability

16 My First App

17 JS API Objects

18 Map Control pan & zoom (program & manual) Show navigation InfoWindow (popup) Built-in graphics layer Access to all layers

19 Layers Map Service Layers map images from servers - Dynamic (new image for each request) - Tiled (previously created images sent) Graphics/Feature Layers Vectors & attributes - Application defined symbols

20 Tasks Query Select by attributes/location Locator Address to Location & Location to Address Geoprocessing Run a workflow Geometry Modify a shape Print Create high-quality output using ArcGIS Server

21 Esri Dijits Map surround Legend, OverviewMap Application functions - InfoWindow - Geocoder - Print - Basemap Gallery Editing Functions (Editor + Editing Forms)

22 How JS apps work

23 AJAX - Asynchronous JavaScript & XML 1. Application sends a request to a server 2. Server does some stuff, sends response 3. Application reacts to response

24 Paper Airplanes! take time to make

25 This won t work myplane = boeing.make( 787 ); myplane.fly() The second line will execute immediately after the first, giving no time for the server to do anything!

26 This will work planeorder = boeing.make( 787, function(myplane){ }); myplane.fly(); The function inside the line is a callback, which will run once the server returns it s data

27 This also will work planeorder = boeing.make( 787 ); planeorder.then(function(myplane) { myplane.fly() }); The planeorder variable is a deferred, which handles the notification of server responses in Dojo. The then() method allows multiple functions to occur when the data from the server is received.

28 AJAX example

29 What s coming? Histogram time slider Forward compatibility with future Dojo (AMD) Support for geoenrichment APIs New samples

30 Getting help: ArcGIS Resource Center

31 ArcGIS API for JavaScript

32 Tuesday Evening Reception Smithsonian American Art Museum and National Portrait Gallery 6:30 PM 9:30 PM Walking distance from convention center Conference Badge needed for reception Coat check available in courtyard Serving hot hors d oeuvres and beverages

33 Wednesday Closing Session Closing and Hosted Lunch 11:30 AM 1:30 PM Ballrooms A C, Third Level Join conference attendees for lunch and closing session Closing Speaker Todd Park, U.S. CTO Wrap-up and request for feedback with Jack Dangermond.

34 Upcoming Events esri.com/events Date Event Location March 21, 2013 MeetUp ArcGIS Platform Washington, DC April 18, 2013 MeetUp Location Analytics Washington, DC March 23 26, 2013 Esri Partner Conference Palm Springs, CA March 25 28, 2013 Esri Developer Summit Palm Springs, CA July 6 9, 2013 Esri National Security Summit San Diego, CA July 8 12, 2013 Esri International User Conference San Diego, CA

35 Thank You Please complete a session evaluation form. #FedGIS