1 / 12

PhoneGap demo

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.

sine
Télécharger la présentation

PhoneGap demo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PhoneGap demo Sebastian Lopienski CERN IT

  2. 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

  3. Developing for • Language: Java • Development: • IDE: Eclipse • Distribution: • via Google Play (called Android Market before)

  4. 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

  5. Web – accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline mode

  6. 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

  7. Single code – multiple devices Hybrid applications: developed as web, packaged as native

  8. Supported platforms

  9. Accessing native features • Accelerometer • Barcode scanner • Camera • Compass • Contacts • File • Geolocation/GPS • Media • Network • Notification • alert, sound, vibration • Phone • Storage • Offline

  10. A demo

  11. 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

  12. 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>

More Related