Firefox OS : Dev Tips #1
Le développement sur Firefox OS en est à ses débuts et déjà, quelques astuces arrivent :
- Comment faire une copie d’écran sur l’émulateur ?
- Comment vérifier si une application a une mise à jour ?
- Comment embarquer une carte OpenStreetMap dans une application ?
Comment faire une copie d’écran sur l’émulateur ?
Il peut arriver lorsque vous développez une application, lorsque vous avez trouvé un bogue, lorsque vous avez besoin de montrer un écran, de faire une copie d’écran de l’émulateur. Mais comment faire ?
L’astuce est d’appuyer sur le bouton Home et End en même temps. A l’heure actuelle, la barre du bas reste sur la copie d’écran, mais le bogue a été signalé (mozilla/r2d2b2g : #440).
Comment vérifier si une application a une mise à jour ?
Une application peut avoir comme fonctionnalité le fait de vérifier par elle-même si elle a ou non des mises à jour en attente au niveau du Store.
Pour cela, on récupère des informations sur l’application courante (mozApps.getSelf()) et si c’est un succès, on vérifie si il y a des mises à jour (checkForUpdate()). Si une mise à jour est disponible, on télécharge et installe la mise à jour (download()).
<html>
<head>
<script>
var getSelf = navigator.mozApps.getSelf();
getSelf.onsuccess = function() {
var self = getSelf.result;
alert("Verification des mises à jour");
var checkUpdate = self.checkForUpdate();
checkUpdate.onsuccess = function() {
if (self.downloadAvailable) {
alert("Mise à jour disponible; Telechargement et installation de la mise à jour");
self.ondownloadsuccess = function onDownloadSuccess(event) {
alert("Succes du telechargement; Fermeture de l'application pour finir la mise à jour");
window.setTimeout(function() window.close(), 3000);
};
self.ondownloaderror = function onDownloadError() {
alert("ERREUR (Telechargement) : " + self.downloadError.name);
};
self.ondownloadapplied = function onDownloadApplied() {
alert("Telechargement applique trop tot !");
};
self.download();
} else {
alert("Aucune mise a jour disponible.");
}
};
checkUpdate.onerror = function() {
alert("ERREUR (Verification des mises à jour) : " + checkUpdate.error.name);
}
};
getSelf.onerror = function() {
alert("ERREUR (getSelf()) : " + getSelf.error.name);
}
</script>
</head>
<body></body>
</html>
Comment embarquer une carte OpenStreetMap dans une application ?
Il faut d’abord l’archive sur le site d’OpenLayers (http://openlayers.org/).
On récupère les fichier « OpenLayers.js« , « theme\default\style.css » et « img\marker.png« .
On inclut le style (style.css) et le script (OpenLayers.js) dans le code HTML.
Ensuite, on inclut le script suivant commenté :
// idDiv : div contenant la Map
var map = new OpenLayers.Map('idDiv',{theme: null});
// Layer de la MAP
map.addLayer(new OpenLayers.Layer.OSM());
// Layer des marqueurs
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);
// On change l'image du marqueur
var iconSize = new OpenLayers.Size(21,25);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w*0.5), -iconSize.h);
var icon = new OpenLayers.Icon('marker.png', iconSize, iconOffset);
// On crée un objet où l'on définit la longitude et la latitude du marqueur
var lonLat = new OpenLayers.LonLat(psLontitude, psLatitude).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
// On ajoute le marqueur avec l’icône et l'objet (longitude/latitude) précédemment créés
markers.addMarker(new OpenLayers.Marker(lonLat, icon));
// On définit le marqueur comme centre de la carte
map.setCenter(lonLat, 14);
Commentaires
[…] que les premières astuces semble vous avoir bien plu, nous allons continuer sur 3 astuces développeur pour Firefox OS […]
[…] les Dev Tips #1 et #2, nous allons continuer aujourd’hui avec deux astuces sur Firefox […]
[…] les trois premiers articles de la série “Firefox OS : Dev Tips” (#1, #2 et #3), nous attaquons ce quatrième article sur Firefox OS avec ces trois points […]
Ajouter un commentaire