PhoneGap 1.3 compatible Windows Phone

06/01/12

PhoneGap 1.3 compatible Windows Phone

Open source et multi-OS

PhoneGap est une framework open source permettant aux développeurs mobiles de créer des applications natives sur les différents OS mobiles du marché.

Cette framework allie à la fois les technologies web (HTML,CSS et JS) et les fonctionnalités natives des mobiles comme l’accéléromètre, la géolocalisation, les contacts, la caméra, les réseaux…

Voici la liste des fonctionnalités supportées par les différentes plateformes mobiles :

Créer une application de type PhoneGap avec le SDK PhoneGap sur Windows phone

Tout d’abord, il vous faudra installer le SDK Windows Phone ainsi que la Framework PhoneGap. Copier ensuite les templates PhoneGap callback-phonegap-b81151f\Windows Phone\ PhoneGapStarter.zip dans le dossier template de Visual Studio 2010.

C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\
PhoneGap

Vous êtes maintenant prêt à créer un projet de type PhoneGap.

Architecture d’un projet PhoneGap

Un projet PhoneGap est constitué d’une dll WP7GapClassLib en référence et d’ un dossier www contenant notre projet Web :

index.html (notre page web)
master.css (notre feuille de style)
phonegap-1.3.0.js (le js PhoneGap).

Exemple de geolocalisation via PhoneGap

Voici un exemple de geolocalisation via l’API PhoneGap sur le mobile Windows Phone .

Au clic, sur le bouton Où suis-je, on appelle la méthode de géolocalisation de la framework PhoneGap navigator.geolocation.watch

Position qui nous renvoie la position actuelle de votre mobile via une Alerte Box.

Comme l’illustration ci-dessous le montre, on couple le développement Web aux fonctionnalités du mobile ici la géolocalisation et la notification par alerte.

Le code source de la page HTML

<!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" 
 media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js">
</script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
 document.addEventListener("deviceready", onDeviceReady,false);
// une fois le mobile chargé
function onDeviceReady(){
//on bind l'évènement click sur le bouton #position
$("#position").click(function(){
 navigator.geolocation.watchPosition
(geolocationSuccess, geolocationError,
 { maximumAge:3000, timeout:5000, enableHighAccuracy:true});
});
 document.getElementById("welcomeMsg").innerHTML +=
"PhoneGap est lancée version="+ window.device.phonegap;
}
function geolocationError(error){
var data ="";
if(error.code == PositionError.PERMISSION_DENIED)
 data = error.message;
else if(error.code == PositionError.POSITION_UNAVAILABLE)
 data = error.message;
else if(error.code == PositionError.TIMEOUT)
 data = error.message;
 $("#welcomeMsg").html(data);
}
function geolocationSuccess(position){
var result ='Latitude: '+ position.coords.latitude +'\r\n'+
'Longitude: '+ position.coords.longitude +'\r\n'+
'Altitude: '+ position.coords.altitude +'\r\n'+
'Accuracy: '+ position.coords.accuracy +'\r\n'+
'Timestamp: '+new Date(position.timestamp)+'\r\n';
 navigator.notification.alert(result);
}
</script>
 <style type="text/css">
 #position
 {
 height: 36px;
 width: 115px;
 }
 </style>
 </head>
 <body>
  <h1>
  Hello NSQUARE</h1>
  <button id="position">
 Où Sus je ?</button>
 <div id="welcomeMsg">
 </div>
</body>
</html>

Complète et incontournable

PhoneGap est une framework absolument incontournable pour le développement mobile Web, car elle fournit un accès des plus complets aux fonctionnalités natives de son smartphone via une interface Web.

Accessible sur la plupart des OS mobiles du marché, elle dispose aussi d’un bon support, d’une documentation détaillée et de nombreux exemples de codes sur l’utilisation des APIs de sa framework.

Le point négatif, s’il faut en trouver un, est que certaines fonctionnalités ne sont pas accessibles sur divers OS (sur IOS le compas ne dispose pas d’API).

Hormis ce point, je conseille cette API à tout bon développeur mobile Web désirant apporter à son appli mobile Web des fonctionnalités personnalisées à son mobile.