PhoneGapWhat is PhoneGap?HistoryWith PhoneGap you canSupported featuresPhoneGap ToolsHow it works“Write once. Compile in the cloud. Run anywhere.”The PhoneGap Build serviceAPI ReferenceAPI Reference, continuedAPI Reference, class exampleAPI Reference, method exampleAPI Reference, method example cont.Hello PhoneGap: index.htmlSample app: screenshotWho uses PhoneGap?Key BenefitsLimitationsResourcesSupport PackagesFor more info & to download the framework04/03/11 presented by Lukas Jeter 1PhoneGapThe open source mobile frameworkthat supports 6 platformspresented by Lukas Jeter04/03/11 presented by Lukas Jeter 2What is PhoneGap?PhoneGap is a framework that is based on the open standards of HTML5 and allows developers to use common web technologies (HTML, CSS, and JavaScript) to build applications for multiple mobile platforms from a single code base.04/03/11 presented by Lukas Jeter 3History•Project started at an iPhoneDevCamp in San Francisco, by co-creators Brock Whitten and Rob Ellis•Won People’s Choice Award at O’Reilly Media’s 2009 Web 2.0 Conference•Initially supported iPhone, Android and BlackBerry•Currently developed by Nitobi Inc. under an MIT license04/03/11 presented by Lukas Jeter 4With PhoneGap you can•Take advantage of HTML5 and CSS•Use JavaScript to write your code•Access Native Features of the supported platforms•Deploy your app to Multiple Platforms•Take advantage of the PhoneGap Build service•Use Tools form the community•Add PhoneGap Plugins to your project•Get help from the growing community04/03/11 presented by Lukas Jeter 5Supported features04/03/11 presented by Lukas Jeter 6PhoneGap ToolsBecause PhoneGap is an open source, community-supported project, many extensions to the basic framework are available.Examples:•Plugins–Barcode Scanner–File Uploader•JavaScript libraries–Jquery Mobile–The Dojo Toolkit•Tools–Sencha Touch04/03/11 presented by Lukas Jeter 7How it works1. Install the native sdk of your target mobile platform2. Download the PhoneGap zip file3. Setup a new project in the target platform with PhoneGap parameters4. Write HTML & JavaScript mobile application5. Build & deploy using target platform’s SDKFor platform-specific step-by-step instructions see: http://www.phonegap.com/start04/03/11 presented by Lukas Jeter 8“Write once. Compile in the cloud. Run anywhere.”04/03/11 presented by Lukas Jeter 9The PhoneGap Build service•Write app using HTML, CSS or JavaScript•Upload it to the PhoneGap Build service•Get back app-store ready apps for Apple iOS, Android, Palm, Symbian, BlackBerry•Current development to also support Windows, MeeGo and Bada•PhoneGap Build service is currently in beta testing and is free to register and use•Will remain free for open source projectshttps://build.phonegap.com/04/03/11 presented by Lukas Jeter 10API ReferenceAccelerometerTap into the device's motion sensor. CompassObtain the direction that the device is pointing. DeviceGather device specific information. CameraCapture a photo using the device's camera. ContactsWork with the devices contact database. EventsHook into native events through JavaScript.04/03/11 presented by Lukas Jeter 11API Reference, continuedFileHook into native file system through JavaScript. MediaRecord and play back audio files. NotificationVisual, audible, and tactile device notifications. GeolocationMake your application location aware. NetworkQuickly check the network state. StorageHook into the devices native storage options.04/03/11 presented by Lukas Jeter 12API Reference, class exampleAccelerometerCaptures device motion in the x, y, and z direction.Me thods•accelerometer.getCurrentAcceleration•accelerometer.watchAcceleration•accelerometer.clearWatchArg um e nts•accelerometerSuccess•accelerometerError•accelerometerOptionsObje c ts (Re a d-Only)•Acceleration04/03/11 presented by Lukas Jeter 13API Reference, method exampleaccelerometer.getCurrentAccelerationGet the current acceleration along the x, y, and z axis.navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);De s c ription:The accelerometer is a motion sensor that detects the change (delta) in movement relative to the current device orientation. The accelerometer can detect 3D movement along the x, y, and z axis.The acceleration is returned using theaccelerometerSuccess2callback function.S upporte d P la tfo rm s :•Android• BlackBerry WebWorks (OS 5.0 and higher)• iPhone04/03/11 presented by Lukas Jeter 14API Reference, method example cont.Quic k E xa m ple :function onSuccess(acceleration) {  alert('Acceleration X: ' + acceleration.x + '\n' +     'Acceleration Y: ' + acceleration.y + '\n' +     'Acceleration Z: ' + acceleration.z + '\n' +     'Timestamp: '   + acceleration.timestamp + '\n');};function onError() {  alert('onError!');};navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); iP hone Quirks :• iPhone doesn't have the concept of getting the current acceleration at any given point.• You must watch the acceleration and capture the data at given time intervals.• Thus, the2getCurrentAcceleration2function will give you the last value reported from a phoneGapwatchAccelerometer2call.04/03/11 presented by Lukas Jeter 15Hello PhoneGap: index.html<!DOCTYPE HTML><html>2 <head>222 <title>PhoneGap</title>2 </head>2 <body>2 <h1>Welcome to PhoneGap</h1>2 <h2>Edit assets/www/index.html</h2>2 <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>22 2 22 <script type="text/javascript" charset="utf-8">22 2222 document.addEventListener("deviceready", function() {22222222222 alert('initialized');22 2 }, true);2 </script>2 </body></html>04/03/11 presented by Lukas Jeter 16Sample app: screenshot04/03/11 presented by Lukas Jeter 17Who uses PhoneGap?•JustOneMore b y R ib o t L im ite dDesigned to help you discover inspiring video content Just One More provides a simple, addictive interface that brings the very best of Vimeo to the iPad/iPhone. Launched on the App Store in February and built using web-only technologies this free app shows that you really can make immersive, content-rich mobile apps using the latest in HTML5, CSS3 and JavaScript. •Orbium b y B jö rn Nils s o nFast moving action/puzzle game with high quality graphics and touch screen optimized controls. The aim is for it to