Advanced Development with the ArcGIS API for JavaScript Jeremy Bartley, Kelly Hutchins, Derek Swingley
Agenda FeatureLayer esri.request and Identity Manager OO JS Building your first Dijit Popups Working with WebMaps Layouts Mobile
esri.layers.featurelayer
FeatureLayer Client Side Data Web Editing Feature Selections Pagination
FeatureLayer Generalization Reduced Precision 10.1 Etag Optimization High Performance FeatureLayer
esri.request() & esri.identitymanager
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,
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
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()
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
Object Oriented JavaScript
JavaScript and Classes Avoid single-file, spaghetti code apps Modular, re-usable code Application maintenance
Dojo and Classes declare: create a class provide: tell dojo about your class require: load classes Example: search Instagram
Building your first Dijit
Dojo Dijit Collection of UI Widgets Framework for creating custom UI Widgets
Creating a Dijit Standard file structure JavaScript for custom methods and properties HTML template for layout elements Styled with CSS
The Dijit Lifecycle Set of methods that fire during dijit creation Convenient access to the widget as it is created
Custom Dijit Dashboard style display Read JSON from an ArcGIS.com webmap Provide a way to connect to a map
Popups
Info Window Title + Content Place anywhere on map - InfoWindow.show(mapPoint, anchorplacement) Shown when clicked on a graphicslayer if Graphic has defined infotemplate
Content of InfoWindow Let s go to the doc
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
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.
Popups Implementation of InfoWindowBase - Navigate through selection - Zoom and highlight - Maximize the info window
PopupMobile Inherits from InfoWindowBase Designed for small screen size - Embedded Maps - Mobile
Working with WebMaps
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
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");
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
ArcGIS.com Web application Templates create your own!
Layouts
Dojo Layout elements on page Border Container - Contains layout elements - Accordion Container - Content Pane - Stack Container - Tab Container - Nested
Border Container - Attributes Design Region - Headline - Sidebar
Grid 960
Columns 12 Column - 60 pixels wide - 10 pixel margin 16 Column - 40 pixels - 10 pixel margin
CSS Classes
Spaces Prefix, Suffix
Mobile Development
Mobile support in JSAPI Touch enabled Map control Touch enabled widgets Touch enabled move support
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
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
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.
Mobile Frameworks Native application look and feel - Animated transitions - Toolbars - Buttons - List views
jquery Mobile Announced in late 2010 Active user community Lots of samples and doc Theme Framework
Dojox.mobile Features and behavior similar to jquerymobile Good demos Poor documentation
Sencha Animations and Scrolling Native Packaging Built on HTML5 iphone, Android, Blackberry