Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jquery. Andy Gup, Lloyd Heberlie

Transcription

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

2 Agenda Getting to know PhoneGap jquery overview jquery and ArcGIS API for JavaScript Putting it all together Additional information

3 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

4 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

5 Further reading

6 App Lloyd Heberlie

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

8 PhoneGap architecture PhoneGap Plugins PhoneGap Application Code Native App

9 PhoneGap Plugins

10 PhoneGap Plugin options

11 Setup a developer machine Code quality and verification web server Source Control

12 Preparing for PhoneGap

13 Installing PhoneGap and Apache Cordova

14 Check versions of PhoneGap and Apache Cordova

15 Updating PhoneGap and Apache Cordova

16 Creating your first PhoneGap CLI project phonegap create path/to/my-app "com.example.app" "My App"

17 Hello PhoneGap Lloyd Heberlie

18 PhoneGap Apps

19 Featured Apps

20 Featured Apps: Tripcase, Untappd

21 jquery overview Lloyd Heberlie

22

23 data-attributes

24 Selections and filtering

25 Events

26 Dynamic content

27 jquery Mobile page lifecycle

28 LifeCycle Phone OS Application 3 rd Party JS Map Layers

29 jquery and ArcGIS API for JavaScript Andy Gup

30 Jquery Mobile + ArcGIS Single page map app Multiple page map app Testing use cases

31 Single Page view Page Structure Apply CSS, roles and themes

32 Single Page Map - HTML

33 Single Page Map - HTML

34 Single Page Map - HTML

35 Single Page Map - CSS

36 Single page app Andy Gup

37 Multi Page View Set up additional pages Set up page navigation Additional CSS

38 Multi Page View

39 Multi Page View

40 Multi Page app Page 2 HTML

41 Multi Page app Page 2 HTML

42 Multi Page app Page 2 HTML

43 Multi Page app Page 2 HTML

44 Multi Page app Page 2 CSS

45 Multi-page map app

46 Page Transitions & Orientation Change Page and Orientation life cycle Map destruction and resizing

47 Page Transitions Page 1 Page 2 ~250 ms

48 HTML/CSS jquery ArcGIS API for JavaScript ~250 ms ~250 ms ~250 ~250 ms ms ~250 ms animation

49 Events: leaving page pagebeforechange pagechange pagechangefailed

50 Events: entering page pagebeforeshow pageshow pagechangefailed

51 Page Transitions & Orientation Change Page 1 Page 2 Page 2

52 Page Transitions & Orientation Change Page 1 Page 2???

53

54

55 The following won t work in all use cases: map.reposition(); map.resize();

56 Use Case - Recenter the map

57 jquery Helper library Page rotation landscape/portrait Recentering Multiple views var helper = new jqueryhelper(map);

58 Auto-recenter after orientation change

59 Multiple page app Map Life Cycle Listen for helper-map-loaded event

60 Putting it all together PhoneGap + jquery + ArcGIS Andy Gup

61 PhoneGap + jquery + Arcgis

62 assets/www/

63 Host JS libs locally (if possible)

64 Set PhoneGap config.xml

65 Native wrapper home view

66 Putting it all together Andy Gup

67 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)

68 What does offline JavaScript mean? Take map tiles offline Storing/syncing feature edits Storing/syncing attachments - TBD These work in browser and with PhoneGap!

69 Offline Demo trailyelper

70 GPS Best Practices When viewing non-map pages - Do not write points to map - Cache points in localstorage (if needed)

71 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

72 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

73 Working with GPS

74 Working with other libraries github.com/esri sencha-touch-map-checkin-js bootstrap-map-js jquery-mobile-map-js dojo-bootstrap-ui

75 Questions? Andy Gup Developer Evangelist Lloyd Heberlie JavaScript API

76