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>

beep est une fonction très simple:

var beep = function() {
    navigator.notification.beep(2);
};

show_pic est plus compliquée, elle passe à getPicture les fonctions dump_pic et fail. fail est appelée s'il y a eu un problème.

function show_pic() {
    navigator.camera.getPicture(dump_pic, fail, {
        quality : 50
    });
}

dump_pic s'occupe de la photo en cas de succès. Elle reçoit en argument les données de la photo.

function dump_pic(data) {
    //...
    document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
}

Pour savoir exactement comment utiliser ces fonctions, on peut aussi consulter l'excellente documentation de phonegap http://docs.phonegap.com/en/1.2.0/phonegap_camera_camera.md.html#Camera

toggleAccel est la plus compliquée des fonctions de l'exemple

var accelerationWatch = null;

function updateAcceleration(a) {
    document.getElementById('x').innerHTML = roundNumber(a.x);
    document.getElementById('y').innerHTML = roundNumber(a.y);
    document.getElementById('z').innerHTML = roundNumber(a.z);
}

var toggleAccel = function() {
    if (accelerationWatch !== null) {
        navigator.accelerometer.clearWatch(accelerationWatch);
        updateAcceleration({
            x : "",
            y : "",
            z : ""
        });
        accelerationWatch = null;
    } else {
        var options = {};
        options.frequency = 1000;
        accelerationWatch = navigator.accelerometer.watchAcceleration(
                updateAcceleration, function(ex) {
                    alert("accel fail (" + ex.name + ": " + ex.message + ")");
                }, options);
    }
};

  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