Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery - PowerPoint PPT Presentation

Loading...

PPT – Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery PowerPoint presentation | free to download - id: 6d36c1-ZDE5M



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery

Description:

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery Andy Gup, Lloyd Heberlie ... Android GPS Best Practices - iOS GPS Best Practices ... – PowerPoint PPT presentation

Number of Views:66
Avg rating:3.0/5.0
Slides: 37
Provided by: esr73
Learn more at: http://proceedings.esri.com
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery


1
Building Native Apps with ArcGIS API for
JavaScript Using PhoneGap and jQuery
  • Andy Gup, Lloyd Heberlie

2
Agenda
  • Intro to PhoneGap
  • Esri PhoneGap Quickstart
  • Putting it all together
  • Native build environment
  • Additional information

3
Why PhoneGap?
  • Mobile cross-browser access to these and more
  • SDCard
  • Camera
  • Accelerometer
  • Contacts
  • Battery status
  • Ability to put JavaScript app in Google Play, App
    Store and Windows Phone Store

4
Basic PhoneGap app
  • Lloyd Heberlie

5
What is PhoneGap?
  • Application container technology
  • Core engine is 100 open source
  • Web view container, plus JS API
  • HTML5, CSS3, JS Native App

PhoneGap
6
PhoneGap architecture
PhoneGap Plugins
PhoneGap
Application Code
Native App
7
Setup a developer machine
8
PhoneGap Quickstart
  • Lloyd Heberlie

9
Debugging
10
Putting it all together PhoneGap, jQuery and
ArcGIS API for JavaScript
  • Andy Gup

11
Single Page view
  • Set up page structure
  • Apply CSS, roles and themes
  • https//github.com/Esri/quickstart-map-phonegap
  • https//github.com/Esri/jquery-mobile-map-js

12
Single Page Map - HTML
13
Single Page Map - HTML
14
Single Page Map - HTML
15
Single Page Map - CSS
16
Single page app
  • Andy Gup

17
Auto-recenter after orientation change
18
jQuery Helper library
  • Recentering on device rotation
  • Multiple view mapping apps
  • var helper new jQueryHelper(map)
  • https//github.com/Esri/jquery-mobile-map-js

19
Auto-recenter after orientation change
20
A quick look Android native build environment
21
assets/www/
22
Host JS libs locally (if possible)
23
Set PhoneGap config.xml
24
Native wrapper
25
Putting it all together
  • Andy Gup

26
GPS Best Practices - Android
27
GPS Best Practices - Android
28
GPS Best Practices - iOS
29
GPS Best Practices Windows Phone
30
Geolocation API same as always!
31
Requirements for offline?
  • App usage in areas of intermittent or no
    internet
  • Ability to reload or restart app in areas of
    intermittent
  • or no connectivity
  • Lightweight cross-browser functionality
  • Github.com/esri/Offline-editor-js

32
Offline JS Use Cases
  • Viewing simple maps
  • Lighweight data collection
  • VGI
  • Simple editing
  • Devices
  • laptop
  • smartphone / tablet

33
Need a full featured, robust offline solution?
  • ArcGIS Runtimes for iOS, Android, Qt and .NET!
  • Includes integrated support for offline editing
    and synchronization.
  • Also fully supports related tables, sub-types,
    domains and much more.

34
Offline Demo trailyelper
35
Questions?
  • Andy Gup
  • Developer Evangelist Team
  • agup_at_esri.com
  • _at_agup
  • Lloyd Heberlie
  • JavaScript API Team
  • lheberlie_at_esri.com
  • _at_lheberlie

36
(No Transcript)
About PowerShow.com