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);
    }
};

Ici c'est plus simple de regarder d'abord la documentation. http://docs.phonegap.com/en/1.2.0/phonegap_accelerometer_accelerometer.md.html#Accelerometer Phonegap fournit trois méthodes pour l'accéléromètre, et ce code n'en utilise que deux: watchAcceleration et clearWatch. * watchAcceleration fait en sorte qu' à intervalle régulier updateAcceleration est appelée avec les données de l'accéléromètre

• L'appel watchAcceleration retourne une variable d'identification appelée dans l'exemple accelerationWatch . Pour interrompre les mesures d'accélération, on peut appeler clearWatch(accelerationWatch)
• On voit que la fonction toggleAccel déclenche la mesure de l'accélération la première fois qu'elle est appelée. A l'appel suivant elle interrompt la mesure, et à l'appel d'après elle le remet en marche etc...

exercices

1. Cette application n'utilise pas la fonction de la boussole (Compass). Ajoutez un bouton qui indique l'angle que fait le téléphone avec le nord. Afficher la valeur de l'angle avec la fonction notification.alert fournie par phonegap.
2. Ce n'est pas pratique d'avoir le nord que quand on appuie un bouton. Modifiez la fonction pour qu'elle affiche l'angle à intervalle régulier, d'une manière similaire à toggleAccel. Phonegap ne fournit pas de fonction qui déclenche une mesure régulière, mais le même effet peut être obtenu en utilisant la méthode javascript setInterval.