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.

[Build 14] – Go Mobile with C# and Xamarin

Mail de John
Vendredi 4 avril 2014 06:10
Go Mobile with C# and Xamarin
Les gens passent 86% du temps sur mobile à utiliser des applications natives contre 14% pour les applications web.

Facebook utilisait le HTML5 pour développer leurs applications mais leurs notes étaient terriblement basses. Une fois qu’ils sont repassés en natif les notes sont passées de 2 à 4 en moyenne.

C# tourne sur 2.6 milliard de devices (tout OS confondus).

 

Explication de comment fonctionne le développement multiplateforme à l’heure actuelle avec le mode en Silo en natif.
On enchaîne avec un court rappel du développement multiplateforme avec les technologies web.
Ensuite présentation de la façon de procèder avec Xamarin et de la liste des APIs disponibles par plateforme (projection des API).
Démonstration du développement d’une application native Ios (Camera, Filtres et Twitter)

 

Quelques statistiques sur le pourcentage de code commun entre les plateformes pour des applications réelles avec explication de pourquoi telle ou telle application à un meilleur pourcentage que sa voisine.

 

Pour partager du code avec Xamarin on peut utiliser des Universal Apps, des PCL simple ou PCL avancée avec NuGet (PCL ne contenant que les définitions du code comme SQLite).

Xamarin est en train de migrer complètement vers des PCL (utilisant le profil 78).
Ajout de certaines API dans Xamarin :

– Mono.Data.Sqlite
– CouchBase
– System.Drawing
– MailKit/MimeKit
– Et bien d’autres à venir
Démonstration de l’application de démo Xamarin Store
Xamarin dispose d’un store de composants accessibles depuis Xamarin Studio (par exemple un composant pour gérer les Google Glass).
Présentation de Xamarin Test Cloud, un outil permettant de tester automatiquement une application Android sur plusieurs centaines de devices.

 

John