How to use WinJS resources with a Cordova App

If you need to use WinJS resources in a cordova app, you have to load them manually and that is very simple !

You only have to read the ‘good’ resjson (the file that matches your language) before you call WinJS.UI.processAll  and set the global « strings » variable.

In our apps we use this method to load resources:

var loadLocalRessources = function (language) {
   language = language || 'en';
    return new WinJS.Promise(function (complete, error) {
        var url = './strings/' + language + '/resources.resjson';
        console.log('trying to load resources from ' + url);

        WinJS.xhr({ url: url }).then(function (res) {
            console.log('resource ok for ' + language);
            try {
                window.strings = JSON.parse(res.responseText);
            } catch (exception) {
                console.error('resource parse error ' + exception.message);
            }
            complete(window.strings);
        }, function (err) {
            console.error('resource load error for ' + language + ' ' + err.statusText);
            if (language != 'en') {
                data.loadLocalRessources('en').then(complete, error);
            }
            else {
                error(err);
            }
        });
    });

}

Universal Windows app et Cordova avec WinJS

L’architecture que je conseil pour cibler les trois (quatres) plateformes, c’est de partir principalement d’un projet natif Universal app (Windows 8.1/ Windows Phone) en HTML5 et de créer un projet Cordova à l’aide du plugin Visual studio.

Ensuite pour brancher l’application Cordova avec le projet shared, il faut écrire un script (robocopy) à exécuter avant le build pour copier les fichiers du projet shared vers le projet cordova:

(robocopy ..\UniversalApp.Shared\ . /E /XF UniversalApp.Shared.*)^& IF %ERRORLEVEL% LEQ 1 exit 0

Et modifier le fichier de projet (jsproj) pour lancer cette exécution:

<Target Name= »BeforeBuild »>
<Message Text= »### BeforeBuild ### » Importance= »high » />
<Exec Command= »prebuild.bat » />
</Target>

Mais pour pouvoir débugguer les fichiers copiers, il faut aussi créer la structure des dossiers et ajouter les fichiers en as link.

Pour ajouter WinJS à vos projets vous pouvez passer par nuget (qui ne marche pas avec les projets shared pour le moment) ou récupérer directement la dernière version stable disponible depuis le repo github. Vous pourrez ensuite ajouter les fichiers WinJS.js, css ui-light.css ou ui-dark .css ainsi que la typo Symbols.ttf dans le dossier scripts du projet shared (cette version de WinJS sera aussi utilisée avec les Universel Apps)

Enfin il reste à inclure les références dans les fichiers default.html et index.html. Votre projet est ainsi prêt et on peut lancer le développement de notre application cross-plateforme.

Note importante: l’initialisation de l’application est différente en WinRT et en Cordova. Sous Windows on va conserver le fichier default.js, et pour le projet Cordova, on va modifier le fichier équivalent, index.js, pour initialiser correctement notre application.

Un exemple de solution est disponible ici

WinJS dans une application cross plateforme Cordova

Depuis avril 2014, WinJS le Framework SPA de Microsoft est devenu libre (disponible sur github) et  surtout cross-platform.
C’est avec ces nouvelles possibilités qu’on peut maintenant l’utiliser sur d’autres plateformes que Windows 8/Phone 8.1.

Dans cette série de posts, je vais donc aborder le développement multiplateforme d’application avec WinJS.