Phonegap sample project

Ce projet est une bonne démonstration des fonctionnalités auxquelles phonegap permet d'accéder. Le projet se trouve sous H:/callback-phonegap-9f0856d/Android/Sample. Il faut le copier sous H:/work.

exécuter l'application

exécuter dans l'émulateur ripple

Ouvrir chrome à cette adresse: file:///H:/work/Sample/assets/www/index.html. Un click droit ouvre un menu avec Emulator, choisir enable.

importer le projet dans eclipse

1. File>New>Other
2. Android>Android project
3. name: Sample, (x) Create project from existing source, Location: H:/work/Sample
4. next version Android 4.0, next minimum SDK 10(10 Android 4.0), finish
5. il y a des erreurs de compilation
6. dans l'arborescence Sample>libs>phonegap-1.1.0.jar, click droit Build Path>Add to Build Path
7. L'erreur de compilation disparait

exécuter sur un téléphone android

1. installer le driver usb pour adb de l'appareil
2. le brancher le téléphone sur usb
3. (si on a rooté son appareil, on peut travailler sans usb avec l'app adbWireless)
4. autoriser le débogage sur le téléphone: Réglages>Applications>Développement>Débogage USB
5. dans eclipse, click droit sur Sample, Run As>1 Android Application
6. l'application démarre sur le téléphone

examiner l'exemple

Les fichiers de l'application sont sous Sample/assets/www/ index.html

• inclut les autres fichiers: phonegap.js, main.js, master.css
• appelle des fonctions javascript dans body onload et a onclick

main.css

• définit les styles des éléments

main.js

• contient les fonctions javascript appelées dans index.html

main.js

Le code javascript utilise des objets javascript créés par phonegap.js comme device, navigator.accelerometer. Ces objets ne sont disponible qu'après l'initialisation de phonegap, qui est signalée par l'événement deviceready

La fonction init, appelée au chargement d'index.html fait en sorte que la fonction deviceInfo n'est appelée que quand phonegap est prêt. La fonction deviceInfo lit des propriétés de l'objet device, comme device.platform etc...

function init() {
    document.addEventListener("deviceready", deviceInfo, true);
}

Les autres fonctions, comme beep, sont appelées lorsqu'on clique sur un bouton.

<a href="#" class="btn large" onclick="beep();">Beep</a>

  toggleAccel
    navigator.accelerometer.watchAcceleration
    navigator.accelerometer.clearWatch
  getLocation (c'est du html5, marche aussi avec browser)
  call: pas de javascript <a href="tel:411" class="btn large">Call 411</a>
  beep, vibrate
    navigator.notification.beep, vibrate
  show_pic
    navigator.camera.getPicture
  get_contacts
    navigator.contacts.find
  check_network
    navigator.network.connection.type