Advanced Development with the ArcGIS API for JavaScript. Jeremy Bartley, Kelly Hutchins, Derek Swingley

Transcription

1 Advanced Development with the ArcGIS API for JavaScript Jeremy Bartley, Kelly Hutchins, Derek Swingley

2 Agenda FeatureLayer esri.request and Identity Manager OO JS Building your first Dijit Popups Working with WebMaps Layouts Mobile

3 esri.layers.featurelayer

4 FeatureLayer Client Side Data Web Editing Feature Selections Pagination

5 FeatureLayer Generalization Reduced Precision 10.1 Etag Optimization High Performance FeatureLayer

6 esri.request() & esri.identitymanager

7 esri.request() Low level request method access data from a remote server Wraps - Script get via JSONP - XHR Get - XHR Post Used by all jsapi components that talk to ArcGIS Server Use it to upload files, access xml documents, csv files,

8 esri.request() is smart! Uses proxy if NEEDED and AVAILABLE Supports HTML5 CORS Integrated with the IdentityManager Provides a hook to override the request before going to the server. - esri.setrequestprecallback(callbackfunction) Returns a deferred

9 Deferred -- Promises Simple way to deal with asynchronous requests in response to a value that may not yet be available. qtdeferred = qt.execute(query); qtdeferred.then(function(queryresult){}); qtdeferred.addcallback() qtdeferred.adderrback() qtdeferred.addboth()

10 IdentityManager Work with secure ArcGIS online or ArcGIS server services with the identity manager Use when your app needs to illicit credentials from the user Seamlessly integrates with all layers, tasks, and requests routed through esri.request() Can be extended to change the user experience. Demo

11 Object Oriented JavaScript

12 JavaScript and Classes Avoid single-file, spaghetti code apps Modular, re-usable code Application maintenance

13 Dojo and Classes declare: create a class provide: tell dojo about your class require: load classes Example: search Instagram

14 Building your first Dijit

15 Dojo Dijit Collection of UI Widgets Framework for creating custom UI Widgets

16 Creating a Dijit Standard file structure JavaScript for custom methods and properties HTML template for layout elements Styled with CSS

17 The Dijit Lifecycle Set of methods that fire during dijit creation Convenient access to the widget as it is created

18 Custom Dijit Dashboard style display Read JSON from an ArcGIS.com webmap Provide a way to connect to a map

19 Popups

20 Info Window Title + Content Place anywhere on map - InfoWindow.show(mapPoint, anchorplacement) Shown when clicked on a graphicslayer if Graphic has defined infotemplate

21 Content of InfoWindow Let s go to the doc

22 Customize look of InfoWindow Simple InfoWindow can be stylized with CSS Default InfoWindow can be stylized by creating a new sprite defining the colors and then using it in your app

23 Extend InfoWindowBase to create your own InfoWindow Need to implement a few methods - Hide, show, setcontent, settitle, resize Once implemented you can set your new InfoWindow on the map API for working (show/hide) with InfoWindow will remain unchanged.

24 Popups Implementation of InfoWindowBase - Navigate through selection - Zoom and highlight - Maximize the info window

25 PopupMobile Inherits from InfoWindowBase Designed for small screen size - Embedded Maps - Mobile

26 Working with WebMaps

27 esri.arcgis.utils.createmap() Creates an instance of esri.map initialized with all layers specified in the webmap Supports: - All basemap and operational layers - Supports features stored in the map - Supports webmap defined popups Constructed from arcgis online webmap ID or by value from JSON

28 ArcGIS.com webmap popups If webmap has defined popups createmap will: - Listen for map click events and when clicked query the layer for each defined popup - Behaivor can be disabled via ignorepopups option - Selected geometry is generalized if possible You can style the InfoWindow that contains the popup using css - dojo.addclass(map.infowindow.domnode, "chrome");

29 Extending createmap s InfoWindow Uses custom InfoWindow extended form InfoWindowBase Handles paging, media (one or multiple), and supports full screen view of content Includes an actions bar that supports zoom to You can get the currently selected feature from the InfoWindow. Use it to add your own tool to the actions bar

30 ArcGIS.com Web application Templates create your own!

31 Layouts

32 Dojo Layout elements on page Border Container - Contains layout elements - Accordion Container - Content Pane - Stack Container - Tab Container - Nested

33 Border Container - Attributes Design Region - Headline - Sidebar

34 Grid 960

35 Columns 12 Column - 60 pixels wide - 10 pixel margin 16 Column - 40 pixels - 10 pixel margin

36 CSS Classes

37

38

39 Spaces Prefix, Suffix

40 Mobile Development

41 Mobile support in JSAPI Touch enabled Map control Touch enabled widgets Touch enabled move support

42 ios Best Mobile Browser Supports two finger pinch zoom on map control Create and edit geometries No access to photos/videos from the browser Browser supports - HTML5 Geolocation API - Web Storage - Offline Web Applications - Access to GyroScope

43 Android 2.2 and greater SVG is not supported on Android. - JSAPI falls back to canvas No support for two finger touch (yet) Does have access to the camera roll

44 Mobile Widgets Mobile popup Touch-aware thumbnail gallery Displays horizontal scrolling view of thumbnail images. Touch access so users can flick through the gallery to select or view items.

45 Mobile Frameworks Native application look and feel - Animated transitions - Toolbars - Buttons - List views

46 jquery Mobile Announced in late 2010 Active user community Lots of samples and doc Theme Framework

47 Dojox.mobile Features and behavior similar to jquerymobile Good demos Poor documentation

48 Sencha Animations and Scrolling Native Packaging Built on HTML5 iphone, Android, Blackberry

49