PhoneGap.com
- Developed by Nitobi which was bought by Adobe who renamed it to Cordova
- One solution development for iOS, Android, Windows Phone 7, Blackberry, ...
- Native shell -> Browser -> Packaged HTML App
- Supports: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage
Use when building a simple application
- Where native feel isn't important
- You want to re-use your html and javascript skills
- Deploy to multiple devices and app store in one go
- You need offline data and function not available to the web
- You deploy to more then 2 platforms
- You don't need the maximum performance of the device
- You don't need some of the more device specific features
Getting started
- Install Windows Phone Sdk
- Download PhoneGap and copy CordovaStarter-2.0.0.zip from lib/windows into %userprofile%\Documents\Visual Studio 2010\Templates\ProjectTemplates\
Request the needed priviledges for your application in the WMAppManifest.xml file
<Capabilities>
<Capability Name="ID_CAP_IDENTITY_DEVICE" />
<Capability Name="ID_CAP_IDENTITY_USER" />
<Capability Name="ID_CAP_LOCATION" />
<Capability Name="ID_CAP_NETWORKING" />
<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
<Capability Name="ID_CAP_APPOINTMENTS"/>
<Capability Name="ID_CAP_CAMERA"/>
<Capability Name="ID_CAP_CONTACTS"/>
<Capability Name="ID_CAP_ISV_CAMERA"/>
<Capability Name="ID_CAP_MEDIALIB"/>
<Capability Name="ID_CAP_MICROPHONE"/>
<Capability Name="ID_CAP_PHONEDIALER"/>
<Capability Name="ID_CAP_PUSH_NOTIFICATION"/>
<Capability Name="ID_CAP_SENSORS"/>
<Capability Name="ID_HW_FRONTCAMERA"/>
</Capabilities>
Use shims to emulate in normal browser
Use a mobile design library
Using jQuery mobile
- Do not use cdn, but add full jquery and jquery mobile + css
- Use jQuery mobile Metro to emulate native graphics
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
Hello <div id="user"></div>
<a href="#newpage" data-role="button">new page</a><br />
<ul data-role="listview" data-theme="b" data-filter="true">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<a href="#dialogpage" data-rel="dialog" data-icon="plus">Add something</a>
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
<a href="#home" data-icon="delete">cancel</a>
<h1>New Page</h1>
<a href="#home" data-icon="save">save</a>
</div>
<div data-role="content">
<label for="name">What is your name?</label>
<input type="text" name="name" id="name" value="" />
<a id="savebutton" href="#newpage" data-role="button">save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div id="dialogpage" data-role="page">
<div data-role="header">
<h1>dialog</h1>
</div>
<div data-role="content">
this is a dialog
</div>
</div>
PhoneGap API
var wId = navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 1000 });
var wId3 = navigator.geolocation.watchPosition(onSuccessG, onErrorG, { frequency: 1000 });
var wId2 = navigator.camera.getPicture(onSuccessC, onErrorC, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
var wId4 = navigator.notification.alert("You clicked me", onSuccessA, "The title", "OK");
PhoneGap Build
PhoneGap plugins