Building Native Apps with ArcGIS API for JavaScript Using · PDF file ·...
-
Upload
vuongquynh -
Category
Documents
-
view
230 -
download
4
Transcript of Building Native Apps with ArcGIS API for JavaScript Using · PDF file ·...
![Page 1: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/1.jpg)
Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery
Andy Gup, Lloyd Heberlie
![Page 2: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/2.jpg)
Agenda
• Getting to know PhoneGap • jQuery overview • jQuery and ArcGIS API for JavaScript • Putting it all together • Additional information
![Page 3: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/3.jpg)
Technical workshops at Dev Summit • Web
- Building Mobile Web Apps with the ArcGIS API for JavaScript
• Hybrid - You are here!
• Native - Building iOS Apps with ArcGIS Runtime SDK - Building Android Apps with ArcGIS Runtime SDK - Building Windows Store and Windows Phone Apps with ArcGIS Runtime SDK
![Page 4: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/4.jpg)
Application comparison
Web Hybrid Native
Development Cost Reasonable Reasonable Expensive
Development Time Short Short Long
App Portability High High None
Performance Fast Native speed if needed
Very Fast
Native Functionality No All All
App Store Distribution No Yes Yes
Extensible No Yes Yes
PhoneGap Day - IBM, PhoneGap and the Enterprise by Bryce Curtis
![Page 5: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/5.jpg)
Further reading
http://esriurl.com/7478
![Page 6: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/6.jpg)
Lloyd Heberlie
App
![Page 7: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/7.jpg)
What is PhoneGap?
• Application container technology • Core engine is 100% open source • Web view container, plus JS API • HTML5, CSS3, JS = Native App
PhoneGap
![Page 8: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/8.jpg)
PhoneGap architecture
PhoneGap Plugins
PhoneGap Application Code
Native App
![Page 9: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/9.jpg)
PhoneGap Plugins
![Page 10: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/10.jpg)
PhoneGap Plugin options
![Page 11: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/11.jpg)
Setup a developer machine
Source Control
Code quality and verification
web server
![Page 12: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/12.jpg)
Preparing for PhoneGap
![Page 13: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/13.jpg)
Installing PhoneGap and Apache Cordova
![Page 14: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/14.jpg)
Check versions of PhoneGap and Apache Cordova
![Page 15: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/15.jpg)
Updating PhoneGap and Apache Cordova
![Page 16: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/16.jpg)
Creating your first PhoneGap CLI project
phonegap create path/to/my-app "com.example.app" "My App"
![Page 17: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/17.jpg)
Lloyd Heberlie
Hello PhoneGap
![Page 18: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/18.jpg)
PhoneGap Apps
![Page 19: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/19.jpg)
Featured Apps
![Page 20: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/20.jpg)
Featured Apps: Tripcase, Untappd
![Page 21: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/21.jpg)
jQuery overview Lloyd Heberlie
![Page 22: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/22.jpg)
![Page 23: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/23.jpg)
data-attributes
![Page 24: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/24.jpg)
Selections and filtering
![Page 25: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/25.jpg)
Events
![Page 26: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/26.jpg)
Dynamic content
![Page 27: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/27.jpg)
jQuery Mobile page lifecycle
![Page 28: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/28.jpg)
LifeCycle Application
3rd Party JS
Map
Layers
Phone OS
![Page 29: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/29.jpg)
jQuery and ArcGIS API for JavaScript Andy Gup
![Page 30: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/30.jpg)
Jquery Mobile + ArcGIS
Single page map app Multiple page map app Testing use cases https://github.com/Esri/jquery-mobile-map-js
![Page 31: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/31.jpg)
Single Page view
Page Structure Apply CSS, roles and themes
![Page 32: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/32.jpg)
Single Page Map - HTML
![Page 33: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/33.jpg)
Single Page Map - HTML
![Page 34: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/34.jpg)
Single Page Map - HTML
![Page 35: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/35.jpg)
Single Page Map - CSS
![Page 36: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/36.jpg)
Andy Gup
Single page app
![Page 37: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/37.jpg)
Multi Page View
Set up additional pages Set up page navigation Additional CSS
![Page 38: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/38.jpg)
Multi Page View
![Page 39: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/39.jpg)
Multi Page View
![Page 40: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/40.jpg)
Multi Page app – Page 2 HTML
![Page 41: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/41.jpg)
Multi Page app – Page 2 HTML
![Page 42: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/42.jpg)
Multi Page app – Page 2 HTML
![Page 43: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/43.jpg)
Multi Page app – Page 2 HTML
![Page 44: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/44.jpg)
Multi Page app – Page 2 CSS
![Page 45: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/45.jpg)
Multi-page map app
![Page 46: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/46.jpg)
Page Transitions & Orientation Change
• Page and Orientation life cycle • Map destruction and resizing
![Page 47: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/47.jpg)
Page Transitions
Page 1 Page 2
~250 ms
![Page 48: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/48.jpg)
ArcGIS API for JavaScript
jQuery
HTML/CSS
~250 ms ~250 ms ~250 ms ~250 ms ~250 ms animation
![Page 49: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/49.jpg)
Events: leaving page
pagebeforechange pagechange pagechangefailed
http://api.jquerymobile.com/category/events/
![Page 50: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/50.jpg)
Events: entering page
pagebeforeshow pageshow pagechangefailed
http://api.jquerymobile.com/category/events/
![Page 51: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/51.jpg)
Page Transitions & Orientation Change
Page 1 Page 2 Page 2
![Page 52: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/52.jpg)
Page Transitions & Orientation Change
Page 2 Page 1
???
![Page 53: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/53.jpg)
![Page 54: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/54.jpg)
![Page 55: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/55.jpg)
The following won’t work in all use cases: map.reposition(); map.resize();
![Page 56: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/56.jpg)
Use Case - Recenter the map
![Page 57: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/57.jpg)
jQuery Helper library
Page rotation – landscape/portrait Recentering Multiple views var helper = new jQueryHelper(map); https://github.com/Esri/jquery-mobile-map-js
![Page 58: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/58.jpg)
Auto-recenter after orientation change
![Page 59: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/59.jpg)
Multiple page app – Map Life Cycle Listen for “helper-map-loaded” event
![Page 60: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/60.jpg)
Putting it all together PhoneGap + jQuery + ArcGIS
Andy Gup
![Page 61: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/61.jpg)
PhoneGap + jQuery + Arcgis
![Page 62: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/62.jpg)
assets/www/
![Page 63: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/63.jpg)
Host JS libs locally (if possible)
![Page 64: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/64.jpg)
Set PhoneGap config.xml
![Page 65: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/65.jpg)
Native wrapper – home view
![Page 66: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/66.jpg)
Andy Gup
Putting it all together
![Page 67: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/67.jpg)
Going Offline
Why? A need for editing and mapping offline Apps used in areas of limited or no connectivity Re-use JavaScript skills Cross-platform Github.com/esri/Offline-editor-js (sample library)
![Page 68: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/68.jpg)
What does offline JavaScript mean?
Take map tiles offline Storing/syncing feature edits Storing/syncing attachments - TBD These work in browser and with PhoneGap!
![Page 69: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/69.jpg)
Offline Demo – trailyelper
![Page 70: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/70.jpg)
GPS Best Practices
When viewing non-map pages - Do not write points to map - Cache points in localStorage (if needed)
![Page 71: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/71.jpg)
Enable Geolocation* STEP 1 $ cordova plugin add org.apache.cordova.geolocation STEP 2 - in app/res/xml/config.xml STEP 3 - in app/AndroidManifest.xml
![Page 72: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/72.jpg)
GPS Best Practices
When returning to map page - “helper-map-loaded” event - Turn GPS back on (or set a boolean) - Recenter map - Write cache points to map
![Page 73: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/73.jpg)
Working with GPS
![Page 74: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/74.jpg)
Working with other libraries
github.com/esri sencha-touch-map-checkin-js bootstrap-map-js jquery-mobile-map-js dojo-bootstrap-ui
![Page 75: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/75.jpg)
Questions?
Andy Gup Developer Evangelist Team [email protected] @agup Lloyd Heberlie JavaScript API Team [email protected] @lheberlie
![Page 76: Building Native Apps with ArcGIS API for JavaScript Using · PDF file · 2014-06-04Building Android Apps with ArcGIS Runtime SDK - ... phonegap create path/to/my-app "com.example.app"](https://reader030.fdocuments.us/reader030/viewer/2022012923/5ab08cc27f8b9a59478ebafb/html5/thumbnails/76.jpg)