Dans le tutorial précédent, on a réalisé la page d’une « track » dans notre application Windows 8 Metro:
Windows Metro – Clouder! (8) – Chargement des commentaires depuis l’API SoundCloud
Si vous avez fait vous même le tutorial, vous avez pu remarquer que cela a été assez laborieux car à chaque test, vous deviez attendre le retour de l’API SoundCloud, qui met quelques secondes parfois. Pour éviter de perdre en productivité, on va introduire un mode « local » qui va charger un fichier JSON depuis le disque et pas depuis internet.
Je crois que cela peut s’apparenter à un « mock » ou un « stub » lorsque l’on fait du test unitaire (ce que je ne fais pas ici). A noter que je pourrais très bien mettre le contenu JSON en dur dans mon code mais cela vous apprend au passage comment charger un fichier avec les API WinJS pour Windows 8.
Création du fichier JSON
Très simple, je console.log le résultat d’un appel XHR et je met cela à l’intérieur d’un fichier « hotness.json » de mon projet (à la racine)
Télécharger le fichier hotness.json
La méthode simple
Comme souvent, j’ai trouvé la méthode complexe avant la méthode simple. La méthode simple est en fait de modifier l’URL pour non pas pointer vers SoundCloud mais vers le répertoire applicatif. Pour cela, il suffit en fait d’utiliser le préfixe « ms-apps:/// »:
if (SoundCloudService.LOCAL) {
url = "ms-appx:///hotness.json";
}
// error callback passed as second parameter
// http://msdn.microsoft.com/en-us/library/windows/apps/hh868282.aspx
WinJS.xhr({ url: url })
Voici la documentation:
Package.InstalledLocation | installedLocation property
Voilà, pour le fun, j’ai quand même mis la méthode plus complexe qui n’apporte aucun avantage par rapport à ce raccourci :)
Chargement d’un fichier JSON avec Windows.Storage.FileIO (méthode complexe)
Pour charger un fichier, on va utiliser la méthode getFileAsync de l’API File fournie par WinJS. On commence par récupérer une référence vers le répertoire applicatif par Windows.ApplicationModel.Package.current.installedLocation. Cela nous renvoie en fait une référence de type StorageFolder:
http://msdn.microsoft.com/en-us/library/windows/apps/br227230.aspx
Sur cet objet StorageFolder, on utilise la méthode getFileAsync qui prend en paramètre le nom du fichier à charger:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.storagefolder.getfileasync.aspx
La méthode getFileAsync renvoie une promise (une IAsyncOperation) que l’on peut chaîner avec un done(…) pour placer nos callback success / error:
var localFileName = "hotness.json";
var localFolder = Windows.ApplicationModel.Package.current.installedLocation;
var that = this;
localFolder.getFileAsync(localFileName).done(function (file) {
}, function (e) {
console.log("erreur" + e);
});
Ensuite, pour charger notre fichier, on utilise la méthode Windows.Storage.FileIO.readTextAsync(file) qui renvoie aussi une IAsyncOperation que l’on peut chaîner avec un then vers notre callback:
var localFileName = "hottest.json";
var localFolder = Windows.ApplicationModel.Package.current.installedLocation;
var that = this;
localFolder.getFileAsync(localFileName).done(function (file) {
return Windows.Storage.FileIO.readTextAsync(file).then(that.onHottestTracks.bind(that));
}, function (e) {
console.log("erreur" + e);
});
Voilà, c’était la méthode complexe (car on doit bidouiller avec les scopes et les callback, c’est un peu la soupe ;) )
Résultat:
Conclusion
Un tutorial très court mais important. En cumulé, on va gagner de précieuses minutes pour la suite et surtout éviter d’être distrait en attendant le chargement de l’application, ce qui fait perdre encore plus de temps (d’expérience :) )