3 approaches to mobile - an a to z primer
DESCRIPTION
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!TRANSCRIPT
Building Mobile Applications with the ArcGIS API for JavaScript
Andy Gup
Esri Southwest User ConferenceSeptember 17-19, 2012 | Denver, Colorado
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
Who am I?
Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
Email: [email protected]
Twitter: @agup
Who are you?
Why mobile?
Demo
X
Mobile usage stats for my website?
Web Server logs
Web analytic tools
Sample web-site stats from esri.com
Your 3 Approaches
Web app+
Native mobile app
Web app+
Web mobile app(a.k.a Hybrid)
Web app only
1.
2.
3.
Many different screen sizes and pixel densities
1920x1080
Wait…how do I pan and zoom the map??
Hmmm…how many map layers do I load?
VS.
1 GB RAM 16 GB RAM
How come my map loads so slooow?
VS.
Mostly connected Always connected
My survey crews use GPS heavily…
VS.
Limited battery Unlimited power
arcgis.com
1440 x 900 480 x 800 hdpi
resources.arcgis.com
1440 x 900 480 x 800 hdpi
Portrait Landscape
Mobile app – flip view port easily
Desktop app on smartphone
ArcGIS API for JavaScript - Compact
http://esriurl.com/compactJS
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact">
Library Size vs. Download vs. Parse
Compact
Full
The challengeMany mobile frameworks, such as…
Mobile frameworks help with…
Views
Visual Components
Themes
Views
Image courtesy Dojo
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>
Easy!
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>
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>
The view port
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no"/>
Setting the mobile view port
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no"/>
Setting the mobile view port
Minimum view port
Zoom level on page load
Force map to scale - not the page
No viewport With viewport
Map touch events
No Change!
function init() { var map = new esri.Map(...); dojo.connect(map, "onClick", myClickHandler);}
Styling via resolution & rotation
CSS3 Media Queries
CSS3 Media QueriesTarget specific devices by screen width
Apply styles by device orientation
Target high density screens such as iPhone 4
@media screen and (min-device-width:768px) and (max-device-width:1024px) {/* styles go here */}
@media (orientation: landscape) {/* styles go here */}
@media (-webkit-min-device-pixel-ratio: 2) {/* high resolution device styles go here */}
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
);
DemoPutting it all together
Hybrid Web Apps
+
Android SDKJava Project
HTML + Mobile JavaScript
Framework
=
Hybrid Web Apps
Hybrid Web Apps
Direct access to:
GPS
Camera
SD Card
Hybrid Web App Platforms
build.phonegap.com
build.phonegap.com
Scan the QR code to install
Hello-World PhoneGap Map
Remote debugging
HTML5
HTML + CSS3 + JavaScript
HTML5 Logo by W3C
• 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
HTML5 APIs
• 5 MB limit vs. 4 KB per regular cookie
• Stores key/value pairs
• localStorage and sessionStorage
Web Storage API
// Put the object into storagelocalStorage.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"));
• Provides user’s approximate location
• Opt-in only!
navigator.geolocation.getCurrentPosition( zoomToLocation, locationError);
watchId = navigator.geolocation.watchPosition( updateLocation, locationError);
Geolocation API
Geolocation API
Understanding browsers
!= !=
caniuse.com
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 }}
Test on different devices
Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
http://blog.andygup.net
@agup