go mobile with apache cordova, zagreb 2014
Post on 28-Dec-2014
203 Views
Preview:
DESCRIPTION
TRANSCRIPT
Christian Grobmeier www.grobmeier.de
@grobmeier Freelancer and Entrepreneur
Wears his own shirts
Writes Books
Tracks time
Hires People!
1. Create a JavaScript function 2. Develop a native plugin
More?
extends CordovaPlugin
window.echo = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Echo", "echo", [str]); };
cordova create places com.opendi.places Places cordova platform add android cordova build android cordova emulate android
Starting from scratch
$> cordova serve !Static file server running on port 8000 (i.e. http://localhost:8000) CTRL + C to shut down
Testing in Chrome
<html> <body> <div id="map"></div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/mapbox-2.1.2.js"></script> <script type="text/javascript" src="js/app.js"></script> </body></html>
Single Page Apps
<body><div id=“page1“> <a href=“#page2“>...</div><div id=“page2“> <a href=“#page3“>...</div><div id=“page3“> <a href=“#page1“>...</div></body>
Single Page Apps2:30
2:30
2:30
with Roadcrew.js
<body><div id="p1" class="start page"> <button id="refresh"> Refresh </button> <ul id="list"></ul></div></body>
2:30
Refresh
var app = { initialize: function() { document.addEventListener( 'deviceready', this.onDeviceReady, false); }, onDeviceReady: function() { // Your Code } }; app.initialize();
2:30
Refresh $('#refresh').click( function() { app.refresh(); });
In onDeviceReady
Consider Touch Events!
2:30
Refresh var app = { refresh: function() { $.get("data.json", function(d) { $("#list").html(d); }); } }
Ripple Wave
...
Still JS
Beware: Caching!
var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI} function cb(uri) { $('#img').attr('src ', uri); } function fail(message) { alert(message); } navigator.camera.getPicture(cb, fail, options);
Camera
navigator.geolocation.getCurrentPosition( function(pos) { view.html( pos.coords.latitude + ',' + pos.coords.longitude); }, function (error) { console.log(error.message); });
Geolocation
Ey! That’s HTML5!!
cordova plugin add org.apache.cordova.geolocation
Icons<platform name="android"> <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> <icon src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /></platform>
config.xml:
top related