1°) Création de la page de configuration :
Pour dessiner la page, l’éditeur web Rapid Interface Builder est très bien adapté car il permet de produire du code jQuery mobile.
Récupérez ensuite grâce à la fonction import dans le fichier zip produit le fichier index.html Editez le fichier et remplacez le code entre les balises <head> et </head> par le code suivant :
<head>
<title>Titre de votre page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
Ou bien récupérez dans le zip les répertoires src et lib et placez les dans le répertoire www de votre serveur. Il est possible que l’image ajax-loader.gif ne soit pas présente dans le répertoire /src /css /images, utilisez l’utilitaire http://loadergenerator.com/ pour en créer une.
Pour la partie collecte des informations, la page ne doit pas contenir de formulaire. Placez deux boutons ‘ok’ et ‘cancel’. Remplacez dans le code généré les paragraphes relatifs aux boutons.
Replace :
<div class="ui-block-a">
<a data-role="button" data-mini="true">Ok</a>
</div>
<div class="ui-block-b">
<a data-role="button" data-mini="true">Cancel</a>
</div>
Par :
<div class="ui-block-a">
<button type="submit" data-theme="d" id="b-cancel">Cancel</button></div>
<div class="ui-block-b">
<button type="submit" data-theme="a" id="b-submit">Submit</button></div>
Placer avant la balise </body> le code suivant :
<script>
function saveOptions() {
var options = {
'fr': $("#fr").is(':checked'),
//....récupérations des options
}
return options;
}
$().ready(function() {
$("#b-cancel").click(function() {
console.log("Cancel");
document.location = "pebblejs://close";
});
$("#b-submit").click(function() {
console.log("Submit");
var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
console.log("Warping to: " + location);
console.log(location);
document.location = location;
});
});
</script>
Modifier le code du paragraphe var options = { en fonction des contrôles de la page.
Pour un bouton : ‘id’ : $(« #value »).is(‘:checked’)
Pour une saisie de texte : ‘name’: $(« #name »).val()
2°) Récupération de la config sous Pebble Javascript :
Dans le code la récupération de la configuration se fait en définissant l’appel à l’url de config :
Pebble.addEventListener("showConfiguration", function() {
console.log("showing configuration");
Pebble.openURL('http://votre_site/votre_fichier_config.html');
});
Puis en récupérant les valeurs :
Pebble.addEventListener("webviewclosed", function(e) {
console.log("configuration closed");
var options = JSON.parse(decodeURIComponent(e.response));
console.log("Options = " + JSON.stringify(options));
//Exemple Options = {"fr":true,"ffr":true,"NDC":"fr","LUDC":"ues","LDDC":"den"}
//Alors récupération donne :
console.log("Valeur option langue = " + options.fr);
});
3°) IOS et XHR :
When i run the app on devices with the newly iOS 7, some of the functionality doesn’t work. after long debugging, i have managed to isolate the reason. Javascript AJAX has a request API with the constructor method open :
XMLHttpRequest.open(method,url,async)
‘asynch’ argument is false if the call should be blocking and true otherwise. the problem on iOS 7 safari only is that this method throws exception if ‘async’ is false.
so, hope this would help to any of you encountering the same problem, and if anyone can shad a light about this bug or way to work around it it would be great
Andro Pebble 
Votre commentaire