140 likes | 315 Views
PhoneGap demo. Sebastian Lopienski CERN IT. Developing for. Language: Objective-C Development: IDE: Xcode OS: Intel-based Macs only developer’s fee required for testing on a device Distribution: via App Store only prior review and approval by Apple. Developing for.
E N D
PhoneGap demo Sebastian Lopienski CERN IT
Developing for • Language: Objective-C • Development: • IDE: Xcode • OS: Intel-based Macs only • developer’s fee required for testing on a device • Distribution: • via App Store only • prior review and approval by Apple
Developing for • Language: Java • Development: • IDE: Eclipse • Distribution: • via Google Play (called Android Market before)
Developing for (mobile) Web • Language • server side (if needed): whatever you want • client side: HTML5, CSS, JavaScript • Development: • IDE: whatever you want • OS: whatever you want • Distribution: • deploy on a web server, and just advertise the URL
Web – accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline mode
Bridging Web and native together PhoneGap is a tool to create native applicationswith web technologies such as HTML5, JavaScript and CSS • http://phonegap.com • supported by Adobe • aka Apache Cordova: http://incubator.apache.org/cordova
Single code – multiple devices Hybrid applications: developed as web, packaged as native
Accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline
Commands cd ~/Projects; rm-rfpg_Timer # create a new Cordova/PhoneGap project called “Timer” cordovacreate pg_Timerch.cern.slopiens.TimerTimer cd pg_Timer # add iOS as a target platform cordovaplatform add ios # remove the default Cordova/PhoneGap app; copy Timer app rm –rf www/*; cp–r ../Timer/src/* www/ # build the app for iOS cordovabuild ios
Timer HTML5 app <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.js"></script> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <title>Timer</title> <script type="text/javascript" src="cordova.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>Timer</h1> </div> <div data-role="content"> <labelfor="length">Presentationlength [m]</label> <input type="number" name="length" id="length" value=""/> <div style="text-align: center; margin-top: 70px; margin-bottom: 80px"> Time left:<br/> <span id="left" style="font-size: 300%"></span> </div> <div data-role="controlgroup" data-type="horizontal" style="text-align: center"> <a href="#" id="buttonStart" data-role="button">Start</a> <a href="#" id="buttonStop" data-role="button">Stop</a> <a href="#" id="buttonReset" data-role="button">Reset</a> </div> </div> </div> <script lang="text/javascript"> var secondsLeft; var Timer; $("#home").on("pageinit", function(event){ $("#length").val(30) resetTime(); }); $("#length").bind("change", function(event, ui) { resetTime(); }); $("#buttonStart").on("tap", function(event){ clearInterval(Timer); //stop any existing timer Timer = setInterval(function() { updateTime();}, 1000); }); $("#buttonStop").on("tap", function(event){ clearInterval(Timer); }); $("#buttonReset").on("tap", function(event){ resetTime(); }); function resetTime() { secondsLeft = 60*parseInt($("#length").val()); updateTime(); } function updateTime() { $("#left").html( Math.floor(secondsLeft / 60) + ":" + (secondsLeft % 60 < 10?"0":"") + (secondsLeft % 60)); secondsLeft -= 1; } </script> </body> </html>