Windows 8 – Corriger l’erreur « Bytecode generation » du Windows App Certification Kit

Lorsque vous installez le SDK Windows 8, vous installez pas mal d’outils dont Visual Studio Express 2012 ou Blend. Vous avez aussi un autre outil, le « Windows App Certification Kit ». Celui permet de tester votre application avant soumission pour le store. C’est une étape qui est faite automatiquement lorsque votre application est vérifiée avant la mise sur le store, donc autant vous assurer que cela fonctionne en local avant.

Le « Windows App Certification Kit » (alias WACK) va vérifier pas mal de choses, notamment si votre application s’ouvre bien dans le temps imparti (5 secondes) et se ferme bien en moins de 2 secondes par exemple.

Utiliser le Windows App Certification Kit (WACK)

Pour le lancer, rendez-vous sur le menu démarrer et lancez la tuile WACK:

Choisissez ensuite « Windows Store App » si vous développez en HTML / JS / CSS.

Puis choisissez votre l’application dans la liste des applications installées:

Laissez ensuite le WACK faire, votre application va s’ouvrir et se fermer plusieurs fois. Surtout ne pas interagir avec l’application pendant les tests. Une fois les tests effectués, le WACK va générer un rapport au format XML que vous allez pouvoir ouvrir par la suite. Ce XML est en fait une page HTML quand vous l’ouvrez dans IE (merci XSL-T).

Le résultat est soit « PASSED » soit « FAILED ». Si c’est FAILED, ouvrez donc le rapport dans IE pour aller voir le détail.

Performance test : FAILED Bytecode generation

La première fois, vous allez sûrement avoir un FAILED (et oui). L’erreur n’est pas évidente, voici le détail:

Bytecode generation
•  Error Found: The bytecode generation test detected the following errors:◦This package was deployed for development or authoring mode. Uninstall the package and re-install it normally.

• Impact if not fixed: As a performance optimization to accelerate JavaScript execution time, JavaScript files ending in the « .js » extension generate bytecode when the app is deployed. This optimization significantly improves start-up and ongoing execution times for JavaScript.

• How to fix: You may need consider one or more of these steps to fix the issue:
– Ensure that event logging is enabled
– All JavaScript files are syntactically valid; otherwise exclude the respective files from the package
– Please note that you should uninstall all previous versions of the app before deploying
Otherwise exclude the respective files from the package.

WACK vous indique « This package was deployed for development or authoring mode. Uninstall the package and re-install it normally » mais pas vraiment comment procéder. Il faut en fait faire un package « release » à partir de VS 2012 et tester ce package et pas l’application en mode debug lancée depuis VS 2012.

Réaliser un package « release » pour Windows 8 avec Visual Studio 2012

Retournez donc dans Visual Studio Express 2012. Puis Store > Create App Packages…

Lire la suite

Windows 8 – [Résolu] « The parameter is incorrect » à l’assignation de MediaControls.trackName

Un petit article sur une erreur pas commune mais au moins vous serez prévenu.

Si vous avez une application comme la mienne qui utilise la fonctionnalité « Background Audio » de Windows 8, vous devrez implémenter le mécanisme des MediaControls, pour intégrer la lecture au hardware sur laquelle tourne votre application. Les boutons volume +/- de votre tablette Windows 8 par exemple.

Plus d’information sur la mise en place dans un de mes articles:

Windows Metro – Jouer de l’audio en arrière-plan (background) avec MediaControl et les Media Transport Controls

Tout se passait bien jusqu’au jour où Windows claque une exception:

0x80070057 - JavaScript runtime error: The parameter is incorrect

Le tout à l’assignation de la ligne suivante:

MediaControls.trackName = someString;

Erreur étrange puisque cela fonctionne bien pour beaucoup de valeur passées mais par pour certaines.

Après quelques recherches, il se trouve qu’il y a en fait une limite de taille à la chaîne passée. C’est indiquée dans le document

System Transport Controls Developer Guide

Je cite:

Setting the trackName and artistName on the MediaControl object sets the text in the UI. Note that metadata should be less than 127 characters.

Vous devrez donc faire un substring sur la chaîne pour la tronquer avant d’assigner la valeur de MediaControls.trackName.

Bien sûr, Windows aurait pu éviter de faire exploser l’application pour une restriction connue et pas évidente. Mais non, alors vous devrez le faire à la main :).

Windows 8 – Jouer un son pendant l’affichage d’une notification Toast

Dans le tutorial précédent, on a vu comment envoyer une notification de type Toast à partir de son application Windows 8 Metro UI:

Windows 8 – Afficher des pop-ups de type Toast

Par défaut, les applications Windows jouent un son court quand le toast est affiché. Vous pouvez annuler ce son ou bien en donner un autre, parmi le catalogue de sons fournis par Windows 8.

Ajout de l’élément audio au template Toast

Par défaut, le template XML du Toast que vous utilisez ne contient pas de balise audio. On va d’abord récupérer une référence vers le noeud « toast » puis créer une balise <audio> qui va venir accueillir nos options audio:

var toastNode = toastXml.selectSingleNode("/toast");
var audio = toastXml.createElement("audio");

Après avoir fixé les options, il vous suffira de faire:

toastNode.appendChild(audio);

Annuler la lecture du son

Pour annuler la lecture du son par défaut, il faut définit la valeur de l’attribut « silent » à true pour la balise <audio>:

audio.setAttribute("silent", "true");

Jouer un son différent parmi le catalogue des sons Windows

Pour changer le son par défaut, vous devrez choisir parmi le catalogue des sons Windows 8 Metro et fixer l’attribut « src » du tag audio à l’identifiant du son comme ceci:

audio.setAttribute("src", "ms-winsoundevent:Notification.IM");

Voici la liste complète sur le site de Microsoft:

The toast audio options catalog (Windows Store apps)

Jouez un son qui se répète (appel, alarme, …)

Vous avez dans le catalogue des sons simples (arrivée d’un email / message, etc) ou répétés (appel, alarme). Pour les sons qui se répètent, vous devrez fixer l’attribut « loop » à « true » dans la balise audio:

audio.setAttribute("loop", "true");

Attention, la répétition du son n’est disponible que pour les toast indiqué comme étant de longue durée.

Spécifier un Toast avec affichage long

Par défaut, un Toast est affiché pendant une courte période de temps. Pour indiquer à Windows que le Toast doit être affiché plus longtemps, pour prévenir l’utilisateur d’un appel entrant par exemple, vous devrez affecter la variable « duration » sur le tag <toast>:

var toastNode = toastXml.selectSingleNode("/toast");
toastNode.setAttribute("duration", "long");

 

Windows 8 – Afficher des pop-ups de type Toast

Dans une des précédents tutoriaux Windows 8 Metro en HTML5, on a vu comment afficher une fenêtre de type « alert », grâce à la classe Windows.UI.Popups.MessageDialog. Cette pop-up est modale et parfois, vous avez simplement besoin d’afficher un message en fond, sans troubler la navigation de l’utilisateur.

Pour cela, Windows a implémenté les notifications de type Toast. Celles-ci fonctionne en partie comme la mise à jour des tuiles du menu démarrer:

http://html5-tutorial.fr/windows-metro-clouder-14-modifier-la-tile-du-menu-demarrer-avec-notifications-et-tileupdatemanager/

Modification du manifest de l’application

Pour que votre application puisse afficher des Toast, vous devrez l’indiquer dans le manifest de l’application. Ouvrez donc le fichier package.appxmanifest dans Visual Studio et dans l’onglet « Application UI » vous trouverez l’option « Toast Capable (not set) ». Indiquer « Yes ». Sauvegardez.

Envoi d’une notification toast simple

On commence par ajouter un simple bouton dans notre interface:

<button id="sendNotification">Send Notification</button>

Puis on ajoute un listener en JavaScript dans le fichier JS correspondant:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {

        onSendNotification : function(){

        },

        ready: function (element, options) {
            var btn = document.getElementById("sendNotification");
            btn.addEventListener("click", this.onSendNotification, false);
        }
    });
})();

Ensuite, cela se passe un peu comme les tuiles du menu démarrer Windows 8 (Live Tile). Vous allez choisir un template prédéfini (un XML) que vous allez remplir avec vos informations (textes, images) et utiliser une méthode de WinJS pour envoyer cette notification.

Exemple simple:

    onSendNotification : function(){
        var template = Windows.UI.Notifications.ToastTemplateType.toastText02;
        var toastXml = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(template);

        var toastTextElements = toastXml.getElementsByTagName("text");
        toastTextElements[0].appendChild(toastXml.createTextNode("Titre de la notification"));
        toastTextElements[1].appendChild(toastXml.createTextNode("Message de la notification"));

        var toast = new Windows.UI.Notifications.ToastNotification(toastXml);

        var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
        toastNotifier.show(toast);
    },

Comme vous pouvez le constater, on prend le template « toastText02 » qui contient 2 textes. On récupère sa définition XML dans « toastXml » puis on récupère les balises « <text> » de cette définition. Ensuite, on met le titre de la notification dans la première et le message dans la deuxième.

On créé ensuite une Notification native de type ToastNotification à partir de notre XML rempli. On récupère une référence vers un ToastNotifier et on lui passe la notification à afficher.

Résultat:

Bien sûr, la notification va s’adapter au style graphique de votre application. Quand vous allez définir un icône pour votre application, il apparaîtra à la place du logo carré barré par défaut. Idem pour la couleur de fond, qui va reprendre celle définie dans le fichier package.appxmanifest.

Lire la suite