A must see A to Z mobile web primer. If you still only have one website built for desktop then you need to review this presentation. Examples are about mapping but the concepts apply to everyone!

1. Esri Southwest User Conference
September 17-19, 2012 | Denver, Colorado
Building Mobile Applications with
the ArcGIS API for JavaScript
Andy Gup

2. Agenda
Goal: You’ll get an A to Z mobile web primer
Why build mobile map apps?
3 Approaches
Frameworks
CSS3 & HTML5
Hybrid Map apps

3. Who am I?
Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
Email: agup@esri.com
Twitter: @agup

4. Who are you?

5. Why mobile?

6. Demo

8. X

10. Mobile usage stats for my website?
Web Server logs
Web analytic tools

11. Sample web-site stats from esri.com

12. Your 3 Approaches
Web app
1. +
Native mobile app
Web app
2. +
Web mobile app
(a.k.a Hybrid)
3. Web app only

13. Many different screen sizes and pixel densities
1920x1080

14. Wait…how do I pan and zoom the map??

15. Hmmm…how many map layers do I load?
VS.
1 GB RAM 16 GB RAM

16. How come my map loads so slooow?
VS.
Mostly connected Always connected

18. My survey crews use GPS heavily…
VS.
Limited battery Unlimited power

19. arcgis.com
1440 x 900 480 x 800 hdpi

20. resources.arcgis.com
1440 x 900 480 x 800 hdpi

21. Mobile app – flip view port easily
Portrait Landscape

22. Desktop app on smartphone

23. ArcGIS API for JavaScript - Compact
http://esriurl.com/compactJS
<script type="text/javascript"
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact">

24. Library Size vs. Download vs. Parse
Compact
Full

25. Many mobile frameworks, such as…
The challenge

26. Mobile frameworks help with…
Views
Visual Components
Themes

27. Views
Image courtesy Dojo

28. Views
<div id="mapView" dojoType="dojox.mobile.View“
style="width:100%;height:100%;">
<h1 dojoType="dojox.mobile.Heading"
back="Back" moveTo="mainView">
5 + 10 minute Drive Times
</h1>
<div id="map“ style="width:100%; height:100%;“/>
</div>

29. Visual Components
<div dojoType="dojox.charting.widget.Chart2D"
theme="dojox.charting.themes.Claro" id="viewsChart"
style="width: 550px; height: 550px;">
<!-- Pie Chart: add the plot -->
<div class="plot" name="default" type="Pie"
radius="200" fontColor="#000" labelOffset="-20"></div>
<!-- pieData is the data source -->
<div class="series" name="Last Week's Visits"
array="chartData">
</div>
</div>

30. Themes
<!--Legend Dialog-->
<div data-role="dialog" id="legendDialog"
data-theme="f">
<div data-role="header">
<h1>Legend</h1>
</div>
<div data-role="content" >
<div id="legendDiv"></div>
</div>
</div>

31. The view port

32. Setting the mobile view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>

33. Setting the mobile view port
Minimum view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>
Zoom level on page load
Force map to scale - not the page

34. No viewport With viewport

35. Map touch events
No Change!
function init() {
var map = new esri.Map(...);
dojo.connect(map, "onClick", myClickHandler);
}

36. Styling via resolution & rotation
CSS3 Media Queries

37. CSS3 Media Queries
Target specific devices by screen width
@media screen and (min-device-width:768px) and (max-device-width:1024px) {
/* styles go here */
}
Apply styles by device orientation
@media (orientation: landscape) {
/* styles go here */
}
Target high density screens such as iPhone 4
@media (-webkit-min-device-pixel-ratio: 2) {
/* high resolution device styles go here */
}

38. Listen for device rotation
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent =
supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent,
dojo.hitch(this,function(){
//... TODO
this.orientationChanged = orientationChanged;
}), false
);

39. Demo
Putting it all together

40. Hybrid Web Apps
Android SDK
+ HTML +
Mobile JavaScript
=
Java Project
Framework

41. Hybrid Web Apps

42. Hybrid Web Apps
Direct access to:
GPS
Camera
SD Card

43. Examples of Hybrid Web Apps
http://www.phonegap.com/app

44. Hybrid Web App Platforms

45. build.phonegap.com

46. build.phonegap.com

47. Scan the QR code to install

48. Hello-World PhoneGap Map

50. Remote debugging

51. HTML5
HTML + CSS3 + JavaScript
HTML5 Logo by W3C

52. HTML5 APIs
• Several new APIs
- Drag and drop API
- FileSystem API(s)
- Geolocation API
- Web Storage: localStorage/sessionStorage
- Web Workers (threaded JavaScript!)
- Cross-Origin Resource Sharing (CORS)
- Browser History

53. Web Storage API
• 5 MB limit vs. 4 KB per regular cookie
• Stores key/value pairs
• localStorage and sessionStorage
// Put the object into storage
localStorage.setItem(“address”, someAddress);
// Retrieve the object from storage
var userAddress = localStorage.getItem(“address”);
// Save data to a the current session's store
sessionStorage.setItem("username", "John");
// Access some stored data
var userName = sessionStorage.getItem("username"));

54. Geolocation API
• Provides user’s approximate location
• Opt-in only!
navigator.geolocation.getCurrentPosition(
zoomToLocation, locationError
);
watchId = navigator.geolocation.watchPosition(
updateLocation, locationError
);

55. Geolocation API

56. Understanding browsers
!= !=

57. caniuse.com

58. Feature detection pattern
useLocalStorage = supports_local_storage();
function supports_local_storage() {
try {
return 'localStorage' in window &&
window['localStorage'] !== null;
}
catch( e ){
return false;
}
}
function doSomething() {
if(useLocalStorage == true){
//write to local storage
}
else {
//degrade gracefully
}
}

59. Test on different devices

61. Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
agup@esri.com
http://blog.andygup.net
@agup