getting started with arcgis webapis - s3.amazonaws.com · dojo and the arcgis api for javascript...
TRANSCRIPT
![Page 1: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/1.jpg)
Getting Started with the ArcGIS Web APIs
Ben Ramseth, Lloyd Heberlie, Andy Gup
![Page 2: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/2.jpg)
What we want to cover
• What is Web GIS • Integration with ArcGIS Server • Look at our three Web APIs • Samples • Tips and Tricks
![Page 3: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/3.jpg)
Your Presenters for Today
• Ben Ramseth, Instructor Technical Lead, CTT+
• Lloyd Heberlie, Product Engineer, Flex API @lheberlie
• Andy Gup, Technical Lead - Web APIs, Esri
Developer Network @agup
![Page 4: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/4.jpg)
Who are you?
*Image from Microsoft Clip Art
![Page 5: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/5.jpg)
What is Web GIS? Andy Gup
![Page 6: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/6.jpg)
ArcGIS Server – Works with many different clients
Flex/Flash
Google Earth
ArcMap
PHP
iPhone
Open Street Map
Android
Microsoft Silverlight
Bing Maps
Ruby Python
.Net Java
OpenLayers ArcGIS Mobile
ArcGIS Explorer
SAP
JavaScript
ArcGIS Desktop
![Page 7: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/7.jpg)
![Page 8: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/8.jpg)
http://www.esri.com/services/disaster-response/floods/latest-news-map.html
![Page 10: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/10.jpg)
http://gis.greeleygov.com/origin/propinfo.html
![Page 12: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/12.jpg)
resources.arcgis.com
![Page 13: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/13.jpg)
ArcGIS Server - Architecture
Client APIs
Web Services
GIS Services
Data
Javascript
Flex
Silverlight
Map Services
Geoprocessing Services
Geocoding Services
Filesystems
Geodatabases
SQL
File IO
REST
SOAP JSON XML AMF KML
OGC
Mobile
![Page 14: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/14.jpg)
What is a GIS Service?
Map Service Endpoint
ArcGIS Server Map Service Edit
Use
Display
![Page 15: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/15.jpg)
ArcGIS Server – GIS Services
Mapping
Feature
Geocode
Geoprocessing
Globe
Geodata
Geometry
Image
Network Analysis
Search
http://esriurl.com/arcgisservices
ArcGIS Server
OGC
KML
![Page 16: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/16.jpg)
How do I get my data into an app? Web Services!
REST
SOAP
OGC
*Image from Microsoft Clip Art
![Page 17: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/17.jpg)
Example ArcGIS REST API Architecture
JSON, XML etc
Geodatabase
ArcGIS Desktop
lyr, msd, mxd, etc.
ArcGIS Server
ArcGIS Client API
Web Server
REST
![Page 18: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/18.jpg)
Example REST API usage
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=-127.8,15.4,-63.5,60.5&f=pjson
URL-based requests (GET or POST) Format works with all client-side application languages
![Page 19: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/19.jpg)
ArcGIS Services Directory
![Page 20: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/20.jpg)
In the browser: ArcGIS Web APIs
JavaScript
http://esriurl.com/webapis
Adobe Flex
Microsoft Silverlight
*Image from Microsoft Clip Art
JavaScript Compact Build (Mobile)
![Page 21: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/21.jpg)
ArcGIS Web API capabilities include……
Editing
FeatureLayers Time-awareness
Query
Geoprocessing
Graphics
GraphicsLayer
Routing
Map
Extents
Symbols
Geometries
![Page 22: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/22.jpg)
Why use the Web APIs?
Let’s you focus on rapid application development!
map.addLayer(basemap)
vs.
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export?bbox=-127.8,15.4,-63.5,60.5&f=pjson
![Page 23: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/23.jpg)
Why use the Web APIs?
<div id="mapDiv" style="width:800px; height:600px;"> </div>
vs.
dojo.io.script.jsonp_dojoIoScript2._jsonpCallback({"serviceDescription":"","mapName":"Layers","description":"","copyrightText":"","layers":[{"id":0,"name":"arcgis2.DBO.custinfo","parentLayerId":-1,"defaultVisibility":true,"subLayerIds":null},{"id":1,"name":"arcgis2.DBO.DenverCO_CensusTracts","parentLayerId":-1,"defaultVisibility":true,"subLayerIds":null}],"tables":[],"spatialReference":{"wkid":4326},"singleFusedMapCache":false,"initialExtent":{"xmin":-105.170917848995,"ymin":39.5124265894988,"xmax":-104.556422044239,"ymax":40.0144928617289,"spatialReference":{"wkid":4326}},"fullExtent":{"xmin":-105.13659819355,"ymin":39.55113300385,"xmax":-104.57486577945,"ymax":39.9313831191501,"spatialReference":{"wkid":4326}},"units":"esriDecimalDegrees","supportedImageFormatTypes":"PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP","documentInfo":{"Title":"","Author":"","Comments":"","Subject":"","Category":"","Keywords":"","Credits":""},"capabilities":"Map,Query,Data"});
![Page 24: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/24.jpg)
Framework for Integrating Multiple services
ArcGIS Online
ArcGIS Server
![Page 25: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/25.jpg)
ArcGIS API for JavaScript Andy Gup
![Page 26: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/26.jpg)
Agenda
• What is the ArcGIS API for JavaScript? • ArcGIS.com configurable templates • Inside the API • HTML5 and ArcGIS • Tips and tricks
![Page 27: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/27.jpg)
Why JavaScript?
• Runs natively in all web browsers – no need for a plug-in.
• Great starting place for beginners • Many different frameworks available.
- EXTJS, Dojo, jQuery, etc.
• Many development environment choices - Notepad, Notepad++, Aptana, Visual Studio, etc.
![Page 28: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/28.jpg)
Dojo and the ArcGIS API for JavaScript
• Robust JavaScript Toolkit • Active Community • Dojo Digits
- Strong widget system - Grids, charts, toolbars, trees and more
• Powerful eventing model • Rich client side graphics
![Page 29: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/29.jpg)
dojo.require("esri.map"); function showResults(featureSet) { //QueryTask returns a featureSet. Loop through features dojo.forEach(featureSet.features,function(feature){ var graphic = feature; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); });
dojo example…
![Page 31: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/31.jpg)
Other JavaScript Libraries
ArcGIS API for JavaScript works with other JavaScript libraries!
![Page 32: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/32.jpg)
Configurable Templates
• ArcGIS.com Configurable Templates • Create maps using online tools • Download template to your web server • Config files • Modify code directly
![Page 33: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/33.jpg)
ArcGIS.com
![Page 34: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/34.jpg)
Inside the ArcGIS API for JavaScript
• Look at key pieces of functionality • Talk about syntax and coding patterns • http://links.esri.com/javascript
*Image from Microsoft Clip Art
![Page 35: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/35.jpg)
Adding Map Layers
map = new esri.Map("map"); //Add the topographic layer to the map. var basemap = new esri.layers.ArcGISTiledMapServiceLayer(“http://...”); map.addLayer(basemap); <div id="map" style="border:1px solid #000;width:100%;height:100%;">
![Page 36: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/36.jpg)
Hello World
![Page 37: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/37.jpg)
Working with Feature Layers
var featureLayer = new esri.layers.FeatureLayer("http://.../FeatureServer/1", {mode: esri.layers.FeatureLayer.SNAPSHOT, outFields: ["NAME","POP2000","POP2007","POP00_SQMI","POP07_SQMI"] } ); featureLayer.setDefinitionExpression("STATE_NAME = 'South Carolina'"); map.addLayer(featureLayer);
![Page 38: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/38.jpg)
Demo – Feature Layers
![Page 39: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/39.jpg)
Geoprocessing
var gp = new esri.tasks.Geoprocessor(“http://server1.../”); var features= []; features.push(graphic); var featureSet = new esri.tasks.FeatureSet(); featureSet.features = features; var params = { "Input_Location":featureSet, "Drive_Times":driveTimes }; gp.execute(params, getDriveTimePolys);
![Page 40: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/40.jpg)
Demo – Geoprocessing
![Page 41: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/41.jpg)
HTML5 and ArcGIS
• You can use it today with our JavaScript API • HTML5 samples available in Resource Center
HTML5 Logo by W3C
![Page 42: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/42.jpg)
What is HTML5?
HTML + CSS3 + JavaScript
HTML5 Logo by W3C
![Page 43: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/43.jpg)
HTML5
• Next standard for HTML • “HTML5” used liberally across the web • Key elements
- New semantic tags (e.g. <footer>) - Improved form elements (a.k.a. markup) - Additional APIs (File API, Web Workers, Geolocation,
etc.) - Different mobile browsers support different subsets of
features
![Page 44: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/44.jpg)
ArcGIS API for
HTML5 Logo by W3C
![Page 46: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/46.jpg)
HTML5 Geolocation API
navigator.geolocation.getCurrentPosition( zoomToLocation, locationError ); watchId = navigator.geolocation.watchPosition( updateLocation, locationError );
![Page 48: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/48.jpg)
Cross-browser support
• What do your end-users use? • Laptop vs. Mobile • IE < 9 little to no support for HTML5 • Chrome Frame • Test early – test often!
*Image from Microsoft Clip Art
![Page 49: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/49.jpg)
Feature Detection
• Detect if user’s browser supports specific HTML5 feature
var useLocalStorage = supports_local_storage(); var canvasSupport = supports_canvas(); // Source for supports_local_storage function: // http://diveintohtml5.org/detect.html function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; } } // Does the browser support canvas? function supports_canvas() { return !!document.createElement('canvas').getContext; }
![Page 50: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/50.jpg)
Feature Detection Demo
![Page 51: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/51.jpg)
A word about browsers
• JavaScript Engines – major performance enhancements
• Native graphics engine improvements • Many updates per year • HTML5, CSS3 support
![Page 52: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/52.jpg)
Browser Performance Demo
http://ie.microsoft.com/testdrive/Default.html
![Page 53: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/53.jpg)
Web Browsers on esri.com
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Q1 Q2 Q3 Q42011
Other
Safari
Firefox
Chrome
IE6
IE7
IE8
IE9
Source: www.esri.com/visitorstatistics
![Page 54: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/54.jpg)
IDE Recommendations
Aptana/Aptana Plugin (v2) Notepad++ Textpad Visual Studio Dreamweaver Eclipse
![Page 55: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/55.jpg)
Getting Started Resources
• Just learning… - http://www.w3schools.com/
• ArcGIS and HTML 5 Live Training Seminar video - http://esriurl.com/arcgishtml5
• When can I use… - http://caniuse.com/
• CSS-TRICKS - http://css-tricks.com/
• Suggested reading (free!) - Eloquent JavaScript
- Dive into HTML5
- Crockford on JavaScript
![Page 56: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/56.jpg)
Suggested JavaScript Sessions
Advanced Development with the ArcGIS API for JavaScript
- Wed. 10:30am – Pasadena Room.
Building Your First JavaScript API App
- Tue. 2:45pm – Demo Theater #2
JavaScript and Feature Layers
- Tue. 4:30pm – Demo Theater #2
Using the ArcGIS for Server REST API
- Tue. 4:30pm – Primrose B
![Page 57: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/57.jpg)
ArcGIS API for Flex Lloyd Heberlie
![Page 58: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/58.jpg)
Agenda
• Getting Started and Concepts • Inside the ArcGIS API for Flex • Road Ahead • Productivity • Getting more information
![Page 59: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/59.jpg)
Desktop (AIR), Desktop Browser (Flash Player), Mobile (AIR)
Demo
![Page 60: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/60.jpg)
Sharing code across screens
![Page 61: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/61.jpg)
Getting Started and Concepts
![Page 62: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/62.jpg)
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Adobe Flash Platform
http://www.adobe.com/devnet/flashplatform.html
Flash Builder
Flex
Creative Suite
Design / Develop
Clients
Servers and Services
Framework
Flash Player AIR
Flash Catalyst
Flash Media Server
Flash Data Services
Flash Platform Services
Multiscreen Content and Applications
Flash Professional
![Page 63: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/63.jpg)
Why Adobe Flex Framework?
• Create applications that are, - Interactive, responsive - Easy to extend - Simple, yet powerful
• Consistent across browsers, desktops, devices, and operating systems
• Highly productive, open source, IDE support • Rich set of components • Strong developer community
- http://www.adobe.com/devnet/flex
![Page 64: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/64.jpg)
Flex development overview
Design
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Runtime Flash Player ** AIR *
Creative Suite
Flash Builder
Servers and Services
Flex Frameworks and SDKs 3rd Party
Develop Source Code ActionScript / MXML
Compiled Code .swf / .air
Devices * Desktop Browsers ** and Desktop Apps *
![Page 65: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/65.jpg)
Flex development for desktop browsers
• Flash Player running in desktop browsers • http://www.adobe.com/devnet/flashplayer.html • http://www.adobe.com/support/flashplayer/download
s.html - Debugger versions
• Reference Documentation - http://help.adobe.com/en_US/FlashPlatform/reference/ac
tionscript/3/index.html
![Page 66: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/66.jpg)
Flex development for Mobile and Desktop
• AIR for Desktop and Mobile • http://www.adobe.com/devnet/air.html • Build your first mobile Flex application
- http://www.adobe.com/devnet/flex/articles/twitter-trends.html
• Flex/AIR for iOS - http://www.adobe.com/devnet/air/air_for_ios.html - http://devgirl.org/2011/06/20/flexair-for-ios-development-
process-explained/
• Flex/AIR for Android - http://www.adobe.com/devnet/air/air_for_android.html
![Page 67: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/67.jpg)
What do I need to get started?
• Requirements for ArcGIS API 3.x for Flex - Access to ArcGIS Server services * - Adobe Flex 4.5 SDK or higher - Adobe Flash Player 10.2 or higher
- Debugger version for developers
• Recommendations - Adobe Flash Builder 4.6 (IDE)
• Optional - Adobe Creative Suite
![Page 68: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/68.jpg)
Release notes | Flex SDK versions
• Flex 4.5.1 or above for Mobile development - Use 4.6 for best mobile coverage
• Flex 4.5 SDK build is 4.5.0.20967 and contains: - AIR SDK 2.6.0.19120 - Flash Player 10.2.153.1
• Flex 4.5.1 SDK build is 4.5.1.21328 and contains: - AIR SDK 2.6.0.19120 - Flash Player 10.2.159.1
• Flex 4.6 SDK build is 4.6.0.23201 and contains: - AIR SDK 3.1.0.4880 - Flash Player 11.1.102.55
![Page 69: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/69.jpg)
Flash Builder Welcome
![Page 70: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/70.jpg)
Setting up your development environment
Demo
![Page 71: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/71.jpg)
Code generation / code assist
![Page 72: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/72.jpg)
What will I need to know / learn?
• MXML - Declarative XML that gets converted to ActionScript - UIComponent, Skinning and Layout
• ActionScript - Based on ECMAScript specification - Programming language for Flash Player and Flex SDK
• CSS - Styling UIComponents and Skins
• Tip: read the Flex SDK source code!
![Page 73: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/73.jpg)
ActionScript 3 (AS3) fundamentals
• Syntax - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/syntax.html
• Variables - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/variables.html
• Conditionals - http://www.adobe.com/devnet/actionscript/learning/as3-
fundamentals/conditionals.html
• www.actionscriptcheatsheet.com
![Page 74: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/74.jpg)
ActionScript 3 Data Types and Metadata Tags
• uint, int, Number • String, Boolean, Object, Date • Array, ArrayList, ArrayCollection • Dictionary • XML • [Bindable], [Event] • http://www.adobe.com/devnet/actionscript/learning/a
s3-fundamentals/data-types.html • http://help.adobe.com/en_US/flex/using/WS2db45492
0e96a9e51e63e3d11c0bf680e1-7ffe.html
![Page 75: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/75.jpg)
Tour de Flex
![Page 76: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/76.jpg)
Suggested reading
![Page 77: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/77.jpg)
Development web server
• Configure your favorite server-side environment - Apache + Tomcat - IIS + ASP.NET - Configure a Proxy page
• Installing a self-signed certificate - http + ssl = https - Helpful for testing resources over https - IdentityManager (secure ArcGIS services)
![Page 78: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/78.jpg)
Thinking about deployment
• Minimum Flash Player installation (10.2) - Wrapper streamlines process
• Uncheck enable integration with browser navigation • Use Runtime Shared Library (RSL) • Export “Release build” • Flash Player cross-domain issues
- http://www.adobe.com/devnet/flashplayer.html - http://www.adobe.com/devnet/flashplayer/articles/cross_
domain_policy.html - proxy page (for security)
![Page 79: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/79.jpg)
Placement of the crossdomain file
Web Server with application
and ArcGIS Server
Web Server with application
ArcGIS Server with
crossdomain.xml
SWF SWF
Map requests
and responses
Map requests
and responses
![Page 80: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/80.jpg)
Inside the ArcGIS API for Flex
![Page 81: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/81.jpg)
ArcGIS for Flex history
• Well Adopted • Very active forum • Community code gallery • Release schedule
Flex API Flex Viewer 2012 3.0 3.0
2011 2.3, 2.3.1, 2.4, 2.5 2.3, 2.3.1, 2.4, 2.5 2010 2.0, 2.1, 2.2 2.0 beta, 2.1, 2.2 2008 - 2009 1.0, 1.1, 1.2 and 1.3
![Page 82: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/82.jpg)
ArcGIS for Flex What is your relationship?
• ArcGIS API for Flex - Custom task focused applications - Roll your own: business logic leverage the API - http://links.esri.com/flex
• ArcGIS Viewer for Flex - http://links.esri.com/flexviewer - Extends the API - Application Builder - Viewer source code available on Github - https://github.com/ArcGIS/ArcGISViewerForFlex
![Page 83: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/83.jpg)
ArcGIS Viewer for Flex
Demo
![Page 84: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/84.jpg)
Application Builder: custom widgets
![Page 85: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/85.jpg)
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Adobe Flash Platform and ArcGIS
http://www.adobe.com/devnet/flashplatform.html
Flash Builder
Flex
Creative Suite
Design / Develop
Clients
Servers and Services
Framework
Flash Player AIR
Flash Catalyst
Multiscreen Content and Applications
Flash Professional
ArcGIS API for Flex
ArcGIS Server
![Page 86: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/86.jpg)
ArcGIS for Flex development overview
Design
AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Runtime Flash Player ** AIR *
Creative Suite
Flash Builder
Servers and Services
Esri services ArcGIS Server
Flex Frameworks and SDKs ArcGIS API
for Flex
Develop Source Code ActionScript / MXML
Compiled Code .swf / .air
Devices * Desktop Browsers ** and Desktop Apps *
![Page 87: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/87.jpg)
How do I get the API?
• Resource center - http://links.esri.com/flex-api/latest-download
• Contents - Readme, API library, samples, skins
• API Library: collection of classes and assets (“the swc”)
• Samples: same as the resource center
• Skins: look and feel of a UI component
http://resourcesbeta.arcgis.com/en/communities/flex-api/
![Page 88: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/88.jpg)
ArcGIS API for Flex Resource Center
http://resourcesbeta.arcgis.com/en/communities/flex-api/
![Page 89: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/89.jpg)
ArcGIS API for Flex download
![Page 90: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/90.jpg)
What’s in that download?
![Page 91: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/91.jpg)
How do I run the samples locally?
Optional: set the output folder url in Flex Build Path settings
![Page 93: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/93.jpg)
Binding
• [Bindable] • private myVar:String;
• <s:SomeComponent someProperty={myVar}/>
![Page 94: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/94.jpg)
Map Extent and Mouse Coordinates
Demo
![Page 95: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/95.jpg)
Event Listeners (MXML and ActionScript)
![Page 96: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/96.jpg)
Event Listeners
Demo
![Page 97: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/97.jpg)
Skinning and Styling
![Page 98: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/98.jpg)
Skinning and Styling
Demo
![Page 99: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/99.jpg)
Using graphic results in a DataGrid
![Page 100: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/100.jpg)
Looping over fields in an attribute Object
![Page 101: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/101.jpg)
Zoom to all graphics in a Graphics Layer
![Page 102: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/102.jpg)
Other Developer Summit Proceedings
http://proceedings.esri.com/library/userconf/devsummit11/tech.html
![Page 103: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/103.jpg)
Road Ahead
![Page 104: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/104.jpg)
Road ahead
• ArcGIS API 3.x for Flex - Full ArcGIS 10.1 functionality - Support for ArcGIS Online API
• ArcGIS Viewer 3.x for Flex - Custom widgets in Application Builder - Hosted applications on ArcGIS.com - Auto upgrade existing application - Thematic / Dynamic layers Widget - Integrating user contributions using Github
![Page 105: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/105.jpg)
What’s next for Adobe and Apache Flex
• Adobe Products and Runtimes - FlashBuilder - Flash Platform Runtimes (AIR, Flash Player)
- Desktops (AIR, Flash Player) and Mobile (AIR) - Adobe’s Flex Roadmap
- http://www.adobe.com/devnet/flex/whitepapers/roadmap.html - Adobe’s Flash Roadmap
- http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html
• Apache Flex - http://incubator.apache.org/flex/
![Page 106: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/106.jpg)
Productivity
![Page 107: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/107.jpg)
Flash Builder
• Flash Builder Tips and Tricks - Show line numbers - Key Bindings: Cmd(Ctrl) + Shift + L - Organize Imports: Shift + Cmd(Ctrl) + O - Fix Indentation: Cmd(Ctrl) + I - http://www.adobe.com/devnet/flash-builder/articles/tips-
tricks.html
• Code Templates • File Templates • FlexFormatter
![Page 108: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/108.jpg)
Flex Library Projects
![Page 109: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/109.jpg)
Troubleshooting development issues
• Flash Builder debugging - http://www.adobe.com/devnet/flex/articles/flashbuilder_s
hortcuts_tips.html
• Network Monitors - Fb Network tab, Charles Debugging Proxy, Wireshark,
Fiddler
• Web Browser Developer Tools - Chrome Developer Tools - Safari Web Inspector - Firefox (Firebug, Httpfox)
![Page 110: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/110.jpg)
Getting More Information
![Page 111: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/111.jpg)
Esri Training for Developers http://www.esri.com/training
• Instructor-Led Courses - Building Web Applications Using the ArcGIS API for Flex - Introduction to ArcGIS Server - Creating Effective Web Applications Using ArcGIS
Server
• Online Training Seminars - Free, one-hour presentation and demos by Esri
technical experts - Live seminar broadcast on a new topic every month
![Page 112: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/112.jpg)
Flex SDK resources
• Adobe Flex Developer Center - http://www.adobe.com/devnet/flex.html
• Adobe TV - http://tv.adobe.com/search/?q=Flex
• Flex in a week - http://tv.adobe.com/show/flex-in-a-week
• Tour de Flex - http://www.adobe.com/devnet/flex/tourdeflex.html
• Conferences - Adobe MAX - 360 Flex
![Page 113: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/113.jpg)
Additional resources
• Kuler - http://kuler.adobe.com
• Smashing Magazine - http://www.smashingmagazine.com/
• ColorPicker - Hex Color Picker (Mac) - ColorCop (Windows)
• ScreenRuler - PixelWindow
![Page 114: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/114.jpg)
2012 Developer Summit: Other sessions
• Advanced Development with ArcGIS API for Flex - Wed 2:45 – 4:00 PM Primrose A (PSCC)
• What’s New in ArcGIS API for Flex - Wed 1:00 – 2:15 PM Pasadena/Ventura/Sierra (RH)
• Configuring and Customizing ArcGIS Viewer for Flex - Thurs 10:15 – 11:30 AM Catalina/Madera (RH)
• Killer Apps: HTML5 and Flex - Wed 4:30 – 5:45 PM Catalina/Madera (RH)
• Flex the World - Wed 10:30 – 11:00 AM Demo Theater 2 – Oasis
(PSCC) PSCC (Palm Springs Convention Center) and RH (Renaissance Hotel)
![Page 115: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/115.jpg)
Summary
• Getting Started and Concepts • Inside the ArcGIS API for Flex • Road Ahead • Productivity • Getting more information
![Page 116: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/116.jpg)
ArcGIS API for Silverlight Ben Ramseth
![Page 117: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/117.jpg)
ArcGIS API for Silverlight Outline
• Getting Starting with Silverlight • Inside the ArcGIS API for Silverlight • Creating a Simple Application • Adding Toolkit Controls • Integrating Silverlight Control Events • Actions and Behaviors • Performing a Query Task
![Page 118: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/118.jpg)
ArcGIS API for Silverlight starting points
Start from scratch Templates Viewer
Resource Center
![Page 119: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/119.jpg)
Setting up the Silverlight Environment
Tools IDE Runtime
ArcGIS API for Silverlight
![Page 120: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/120.jpg)
Downloading the ArcGIS API for Silverlight Demo
![Page 121: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/121.jpg)
Assemblies
![Page 122: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/122.jpg)
Namespaces
Client assembly
Geometry namespace
Geometry classes
![Page 123: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/123.jpg)
Classes
Map class
Scale property
Map class’s properties
![Page 124: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/124.jpg)
Class Diagrams
![Page 125: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/125.jpg)
Application road map
IIS
Files
REST
Visual Studio Silverlight Tools 5 Silverlight Runtime 5 ArcGIS API for Silverlight 3.0
XAP JS HTML
Web Browser Silverlight plug-in
ArcGIS Online Map Services
REST Image files Features as JSON
Web page html file Silverlight.js file Silverlight control’s xap file
![Page 126: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/126.jpg)
Creating a Silverlight Web Mapping Application Demo
![Page 128: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/128.jpg)
Binding controls to a map
![Page 129: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/129.jpg)
Adding Toolkit Controls Demo
![Page 130: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/130.jpg)
Programming events with code behind
Button’s Click event Name of a C# function in the code behind
![Page 131: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/131.jpg)
Events have code behind
![Page 132: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/132.jpg)
ArcGIS controls have event
![Page 133: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/133.jpg)
Integrating Silverlight controls
StackPanel Rectangle
RadioButtons
![Page 134: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/134.jpg)
Integrating Silverlight Control Events Demo
![Page 135: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/135.jpg)
ArcGIS controls have behaviors and actions
![Page 136: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/136.jpg)
Adding a Behavior Demo
![Page 137: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/137.jpg)
Query task workflow
What state do you want to see?
Create query
Collect user
Inputs
Send query to server to execute
Execute task
Return results to client
Receive FeatureSet
and display results
FeatureSet
Feature
Geometry
Attributes
![Page 138: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/138.jpg)
Performing a Query Demo
![Page 139: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/139.jpg)
Getting Started Resources
• Silverlight… - http://silverlight.net - http://www.microsoft.com/silverlight - http://expression.microsoft.com
• ArcGIS API for Silverlight … - http://help.arcgis.com/en/webapi/silverlight/3.0/index.html
• ArcGIS Blog… - http://blogs.esri.com/esri/arcgis/category/developer/
![Page 140: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/140.jpg)
Suggested Silverlight Sessions
What's New in ArcGIS API for Microsoft Silverlight
Tue 2:45pm Primrose C/D (Palm Springs Convention Center) Configuring and Customizing ArcGIS Viewer for Silverlight Wed 1:00pm Primrose B (Palm Springs Convention Center)
Advanced Development with ArcGIS API for Microsoft Silverlight
Thu 8:30am Catalina/Madera (Renaissance Hotel) Programming Image Services Using ArcGIS API for Microsoft Silverlight
Wed 4:30pm Smoketree A - E (Palm Springs Convention Center)
![Page 141: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/141.jpg)
Wrap Up
![Page 142: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/142.jpg)
Key points to remember
• Three web APIs to choose from • JavaScript is native • Silverlight and Flex are plug-in based • Viewers and Application Builders • Consume resources from ArcGIS.com • http://resources.arcgis.com • Forums, Code Samples
![Page 143: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/143.jpg)
![Page 144: getting started with arcgis webapis - s3.amazonaws.com · Dojo and the ArcGIS API for JavaScript • Robust JavaScript Toolkit • Active Community • Dojo Digits -Strong widget](https://reader031.vdocuments.site/reader031/viewer/2022012918/5ede1bf7ad6a402d66696574/html5/thumbnails/144.jpg)