ict.ken.be

Delivering solid user friendly software solutions since the dawn of time.

PhoneGap - Cordova

Categories: Mobile

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