Browsed by
Month: October 2012

Bien commencer avec Azure Mobile Services sur Windows Phone

Bien commencer avec Azure Mobile Services sur Windows Phone

Nous allons voir dans ce tutoriel comment connecter une application Windows Phone 8 à Windows Azure en utilisant Azure Mobile Services. Nous allons donc créer un service mobile Azure ainsi qu’une application “To do list”  qui va stocker ses données dans le nouveau mobile service.

Voici à quoi va ressembler notre application :

 

Note
Pour réaliser ce tutoriel, vous avez besoin d’un compte Windows Azure avec la fonctionnalité Windows Azure Mobile Services d’activée.

Créez un service mobile Azure

Suivez les étapes suivantes pour créer un nouveau service mobile.

  1. Connectez-vous au Portail de Management Azure.
  2. En bas à gauche de la page, cliquez sur le bouton +NOUVEAU
  3. Sélectionnez Calcul, puis Service Mobile et enfin Créer

    Une boite de dialogue “Créer un service mobile” va alors s’afficher.

  4. Dans cette page, saisissez un nom de sous-domaine pour le nouveau service mobile dans le champ URL, puis attendez la validation de ce nom. Une fois cette validation effective, cliquez sur la flèche droite pour aller à la page suivante.

    La configuration de la base de données s’affichera.

    Note

    Vous allez créer une nouvelle base de données SQL ainsi qu’un nouveau serveur SQL. Vous pouvez réutiliser cette base et l’administrer comme vous le ferez avec n’importe quelle instance de base SQL. Si vous avez déjà une base de données dans la même région géographique que le service mobile, vous pouvez sélectionner Utiliser une base de données existante et sélectionner celle-ci. L’utilisation d’une base de données dans une région différente n’est pas recommandé car vous aurez un surcoût de bande passante ainsi qu’une latence plus importante.

  5. Dans le champ Nom, saisissez le nom de votre nouvelle base de données ainsi que le Nom de connexion qui représente le login de connexion de l’administrateur de votre nouveau serveur SQL. Enfin, entrez votre mot de passe et cliquez sur le bouton valider pour compléter le processus.

    Note

    Si le mot de passe que vous avez saisi ne correspond pas aux règles de sécurité ou quand les deux mots de passe sont différents, une alerte s’affichera. Il est fortement recommandé de sauvegarder le mots de passe ainsi que l’identifiant de l’administrateur que vous avez spécifié ; il vous sera nécessaire pour accéder au serveur SQL plus tard.

Votre service mobile est maintenant créé et peut être utilisé dans vos applications mobiles !

Créez une nouvelle application Windows Phone

Maintenant que votre service mobile est créé, vous pouvez suivre les instructions dans le portail de management Portal pour créer une nouvelle application ou modifier une application existante afin qu’elle se connecte au service mobile.

Dans cette section, nous allons créer une nouvelle application Windows Phone 8 qui se connectera à votre service mobile.

  1. Dans le portail de Management, cliquez sur Services Mobiles et sélectionnez l’instance que vous venez de créer.
  2. Sur la page de votre service mobile, cliquez sur Windows Phone 8 dans la partie Chosir une plateforme et cliquez sur le lien Créer une application Windows Phone 8

    Les trois étapes pour créer une application Windows Phone connectée au service mobile Azure s’afficheront alors.

    Si vous ne l’avez pas encore fait, téléchargez et installe Visual Studio 2012 Express pour Windows Phone ainsi que le Mobile Services SDK.

  3. Cliquez sur Créer une table TodoItem pour créer une table afin de stocker les données de votre application.
  4. Sous Télécharger et exécuter l’application, cliquez sur Télécharger. Cela va télécharger l’exemple d’application To do list qui sera connectée à votre service mobile. Sauvegardez le fichier compressé sur votre ordinateur.

Exécutez votre application Windows Phone

L’étape finale de ce tutoriel est de compiler et d’exécuter votre nouvelle application.

  1. Décompressez le fichier téléchargé sur votre ordinateur et lancez la solution (*.sln) dans Visual Studio 2012

  2. Appuyez sur la touche F5 pour lancer la compilation.
  3. Dans l’application, entrez un texte dans le premier champ et cliquez sur “Save”

    L’application va alors envoyer une requête POST au service mobile Azure. Les données de la requête sont insérées dans la table TodoItem. Les données stockées dans la table sont ensuite retournées par le service mobile et affichées dans l’application.NoteVous pouvez étudier le code qui permet l’accès au service mobile pour effectuer des requêtes et insérer des données, qui se trouve  dans le fichier MainPage.xaml.cs.

  4. Retournons dans le portail Management, cliquez sur l’onglet Données et cliquez sur la table TodoItem.

    Vous pourrez alors visualiser les données insérer par votre application.

Windows Phone 8 et la compilation dans le nuage

Windows Phone 8 et la compilation dans le nuage

Si vous ne le savez pas encore, lorsque vous téléchargez une application depuis le Store sur un Windows Phone 8, celle-ci est “compilé dans le nuage” lors de la soumission.

Quand vous soumettez votre XAP sur le dev center, MDILBinder est exécuté et crée un nouvelle librairie MDIL. Par conséquent, le XAP que l’utilisateur télécharge sur son téléphone n’aura pas le même code MSIL que celui créé par le développeur. Les binaires MDIL binaries seront alors linké aux assemblies plateform sur le téléphone à l’installation. L’utilisateur aura alors une application native et sera donc beaucoup plus performante au lancement et à l’exécution.

Tout ceci est dû à la migration de Windows Phone 8 vers CoreCLR qui permet d’utiliser NGEN (Native Image Generator).

L’outil Native Image Generator Tool (Ngen.exe) est un outil qui améliore les performances des applications managées. Ngen.exe crée des images natives, lesquelles sont des fichiers qui contiennent le code machine spécifique au processeur compilé et les installent dans le cache des images natives sur l’ordinateur local. Le runtime peut utiliser à la place des images natives du cache à l’aide du compilateur juste-à-temps (JIT) pour compiler l’assembly d’origine.

 

 

Toutefois, NGen est un assez lourd et prendrait trop de temps sur nos téléphones. Microsoft a donc eu la brillante idée de réaliser tout cela dans le cloud. Microsoft maitrise ses plateformes mobiles (processeurs, etc…), il lui est donc facile de cibler un device particulier.

Tout ceci à pour conséquence un gain assez relatif de perfomances des applications.

Mais quid de visual studio ?

En effet, comment tester avant déploiement sur le Store les performances de mon application “ngenisé” ?

En fait, lorsque vous utilisez le menu “deployer mon application”, Visual Studio “ngenise” vos DLLs avant envoie vers le téléphone. Ceci est notamment visible dans la console :

A noter, ceci est le cas quelque soit votre configuration : Debug ou Release !

Dans tous les cas ?

Non évidemment, les dlls ne sont optimisées que lorsque la cible est un Windows Phone 8, si on déploie vers un Windows Phone 7 ou un émulateur, aucune optimisation se sera faite et c’est toujours le MSIL qui sera déployé.

Comment fait-il pour déboguer le code optimisé  ?

Là ça commence à être compliqué, y’a d’un côté ngen (qui est toujours exécuté) et le niveau de l’optimisation du code. Pour retrouver des performances assez proche du Store, il faut modifier la configuration de votre visual.

Dans le menu Debug, sélectionnez le menu “options and settings…”

Allez dans l’onglet Debugging, puis Général.

Enfin décochez “Suppress JIT optimization on module load (Managed only)” ainsi que “Enable Just My Code” (car il considére le code optimisé de votre app comme n’étant pas le votre).

Vous aurez alors beaucoup moins d’informations de déboguage (notamment les onglets Locals et Auto qui seront quasi vide), mais vous pourrez déboguez des soucis qui interviendrait qu’en cas d’optimisation (rare)

Donnez une tuile 8.0 à votre application 7.5 !

Donnez une tuile 8.0 à votre application 7.5 !

Maintenir une application entre deux OS n’est pas chose aisée. Si vous souhaitez uniquement mettre à jour votre application pour Windows Phone 8 (et uniquement cela), sachez qu’il est possible pour une application 7.5 d’utiliser les nouvelles tuiles (cyclique, flip, iconic) si elle est exécuté depuis un téléphone Windows Phone 8.

Les avantages/inconvénients

Les avantages :

  • une seule application à maintenir entre windows phone 7 et windows phone 8
  • l’application tirera profit des nouvelles tuiles sous windows phone 8 (en attendant 7.8)

Les inconvénients :

  • Votre application ne tirera pas profit des nouvelles contrôles comme le panorama ou le pivot natif (plus performant)
  • Votre application sera affiché avec une bande noire avec les téléphones 720p (le HTC 8X notamment)
  • Vous ne pourrez utiliser les nouvelles fonctionnalités WP8 comme l’in-app purchase, WinPRT, etc…

Attention !

La tuile principale de votre application ne peut pas être cyclique ou iconique, seul flip est disponible. Pour vos tuiles additionnelles, vous avez accès aux trois types.

 

Comment faire ?

Maintenant que vous êtes prévenu, voyons comment profiter des nouvelles tuiles tout en gardant notre application compatible WP7.

Pour cela nous allons utiliser la reflection, en n’appelant pas directement les nouvelles méthodes, mais indirectement. Mais avant tout, testons la compatibilité avec le système.

Comment savoir si mon application tourne sous un windows phone 8 ?

Pour cela, il suffit de tester la version du système, cela se fait de la façon suivante :

public static bool IsWP8 {get{return Environment.OSVersion.Version >= new Version(8, 0);}}

Tout simplement ! Il suffira maintenant d’appeler cette fonction pour savoir si on est sur un windows phone 8.

Il reste maintenant à faire le gros du travail, en jouant avec la reflection :

Récupérons dans un premier temps le type qui nous intéresse : FlipTileData via la réflexion (cela fonctionne aussi avec IconicTileData et CyclicTileData) :

Type flipTileDataType = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");

Créons l’objet :

var mynewtile = flipTileDataType.GetConstructor(new Type[] { }).Invoke(null);

Affectons les propriétés :

SetProperty(mynewtile, "Title", title);
SetProperty(mynewtile, "Count", count);
SetProperty(mynewtile, "BackTitle", backTitle);
SetProperty(mynewtile, "BackContent", backContent);
SetProperty(mynewtile, "SmallBackgroundImage", smallBackgroundImage);
SetProperty(mynewtile, "BackgroundImage", backgroundImage);
SetProperty(mynewtile, "BackBackgroundImage", backBackgroundImage);
SetProperty(mynewtile, "WideBackgroundImage", wideBackgroundImage);
SetProperty(mynewtile, "WideBackBackgroundImage", wideBackBackgroundImage);
SetProperty(mynewtile, "WideBackContent", wideBackContent);

Enfin, mettons à jour notre tuile :

ShellTile.ActiveTiles.First().Update((ShellTileData)mynewtile);

Et c’est tout ! Le code compile sous Windows Phone 7, malgré l’absence du type FlipTileData et fonctionnera correctement sous Windows Phone 8.

Résumé

 


private static void SetProperty(object instance, string name, object value)
{
var setMethod = instance.GetType().GetProperty(name).GetSetMethod();
setMethod.Invoke(instance, new object[] { value });
}

private static Version TargetedVersion = new Version(8, 0);
public static bool IsWP8 { get { return Environment.OSVersion.Version >= TargetedVersion; } }

...

if (IsWP8)
{

Type flipTileDataType = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");
var mynewtile = flipTileDataType.GetConstructor(new Type[] { }).Invoke(null);
SetProperty(mynewtile, "Title", title);
SetProperty(mynewtile, "Count", count);
SetProperty(mynewtile, "BackTitle", backTitle);
SetProperty(mynewtile, "BackContent", backContent);
SetProperty(mynewtile, "SmallBackgroundImage", smallBackgroundImage);
SetProperty(mynewtile, "BackgroundImage", backgroundImage);
SetProperty(mynewtile, "BackBackgroundImage", backBackgroundImage);
SetProperty(mynewtile, "WideBackgroundImage", wideBackgroundImage);
SetProperty(mynewtile, "WideBackBackgroundImage", wideBackBackgroundImage);
SetProperty(mynewtile, "WideBackContent", wideBackContent);
ShellTile.ActiveTiles.First().Update((ShellTileData)mynewtile);

}

 

Dernier point, si vous souhaitez utiliser le push pour mettre à jour votre application, pensez à envoyer à votre serveur la version du système afin d’envoyer le bon XML au téléphone (7 ou 8).

Les nouvelles tuiles de Windows Phone 8

Les nouvelles tuiles de Windows Phone 8

Nouvelles tailles de tuiles

Ce n’est plus une surprise, Windows Phone 8 dispose d’un nouvel écran d’accueil et de nouvelles tuiles.

Sous Mango, nous avions à notre disposition uniquement des tuiles de 173pixels sur 173.

Maintenant sous Mango, nous avons à disposition 3 types de tuiles :

  • la petite de 159 pixels sur 159
  • la standard de 336 pixels sur 336
  • la large de 691 pixels sur 336

A noter, la tuile large n’est pas obligatoire contrairement aux deux autres, proposez là uniquement si cela à du sens, l’application native calculatrice n’en est pas disposé.

Nouveau type de tuile

En plus des différentes tailles, il existe différente type de tuiles.

Flip

Le premier type est déjà connu, il s’agit des tuiles “flip”, qui se retourne régulièrement pour laisser apparaitre la face arrière de la tuile.

Ce type d’animation n’existe évidemment pas pour la taille “petite”, il serait quasi impossible de lire le contenu de la face arrière. Il est toutefois disponible pour les deux tailles “normale” et “large”, à noter, la taille large permet d’afficher une plus grande quantité de texte mais est limité à 3 lignes.

Vous remarquerez que l’animation de la rotation est un peu plus violente qu’avant (avec un effet élastique).

A noter, le nom de l’application n’est pas visible en mode “petit”.

Iconic

Un des nouveaux types s’appelle “Iconic”, non disponible pour les développeurs tierces, mais déjà présent sous Windows Phone 7. Il est notamment utilisé par les applications natives Mail, SMS, Marketplace, etc…

Celui se compose d’un logo et d’un compteur accolé et est disponible dans les 3 tailles :

La petite et la tuile normale sont assez similaire. La tuile large ressemble à peut près à la tuile calendrier, un compteur en bas à droite avec le logo de l’application et un texte composé d’un titre et d’une description.

Pour utiliser ce genre de tuile, il faut fournir une image, correspondant au logo. Evidemment, les dimensions de ce dernier n’est pas identique aux dimensions de la tuiles, voici les dimensions requises :

  • la petite de 110 pixels sur 110
  • la standard de 202 pixels sur 202
  • la large de 110 pixels sur 110 (la même que la petite)

Cycle

Le dernier type de tuile est lui aussi connu des utilisateurs WP7, mais non accessible aux développeurs, il s’agit des tuiles cycliques. Cette tuile permet de faire défiler 9 images consécutivement comme la tuile “photo” de windows phone 7. L’effet n’est pas disponible en mode “petit”.

Une bonne nouvelle par rapport à Windows 8, est que vous n’êtes pas obligé de gérer les tuiles normales et les tuiles larges séparément, vous pouvez les gérer en un seul accès.

A savoir, si vous souhaitez activer la tuile large, alors seule les parties gauche des images seront visibles dans la tuile normale.

Voyons comment faire.

Comment créer une tuile “flip”

Au lien de créer une StandardTileData, il suffit de créer une FlipTileData :


FlipTileData TileData = new FlipTileData()
{
Title = "[titre]",
BackTitle = "[titre de la tuile arrière]",
BackContent = "[contenu de la tuile arrière]",
WideBackContent = "[contenu de la tuile arrière en affichage large]",
Count = [compteur],
SmallBackgroundImage = [fond de la petite tuile],
BackgroundImage = [font de la tuile normale],
BackBackgroundImage = [fond de la tuile arrière normale],
WideBackgroundImage = [font de la tuile large],
WideBackBackgroundImage = [font de la tuile arrière large],
};

Créer une tuile iconic

 

IconicTileData TileData = new IconicTileData()
{
Title = "Fuse",
Count = 42,
WideContent1 = "Sortie de Windows Phone 8",
WideContent2 = "le parisien - 30/10/12",
WideContent3 = "un très bon accueil par le publique",
SmallIconImage = "/assets/smallicon.png",
IconImage = "/assets/icon.png",
BackgroundColor = Color.Red
};

A noter ici, SmallIconImage sert à la fois pour l’affiche petit et large et nous avons une propriété BackgroundColor pour personnaliser la couleur de la tuile (car nous n’avons pas assez aux background contrairement aux autres).

A savoir : si le canal alpha de BackgroundColor est différent de 255, la couleur système sera utilisée.

Créer une tuile cyclique

Enfin pour créer une tuile cyclique, il suffit de créer une CycleTileData comme ceci :


CycleTileData cycleTile = new CycleTileData()
{
Title = "TVShow";
Count = 42;
SmallBackgroundImage = new Uri("/Assets/logo.jpg", UriKind.Relative);
CycleImages = new Uri[]
{
new Uri("/Assets/Tiles/lost.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/breakingbad.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/battlestargalactica.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/doctorwho.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/walkingdead.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/personofinterest.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/fringe.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/theoffice.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/sherlock.jpg", UriKind.Relative),
}
};

Attention à ne pas mettre plus de 9 images dans la liste CycleImages. Vous pouvez toutefois en mettre moins si vous le souhaitez.

Attention !!!

Une fois qu’une tuile est créé avec un type (cycle, iconic, flip), il n’est pas possible de mettre à jour la tuile avec un autre type, une exception sera alors levée. Il est donc indisposable de demander à l’utilisateur de supprimer manuellement sa tuile avant.

Gérer les différentes résolutions de Splashscreen sous Windows Phone 8

Gérer les différentes résolutions de Splashscreen sous Windows Phone 8

 

Pour les images dans votre application, pas de surprise, un simple converter va vous permettre de gérer vos différentes résolutions d’images. Mais ceci est impossible avec la splashscreen, car ce n’est pas l’app qui la gère mais le système. Alors comment gérer les différentes résolutions d’écran pour la splashscreen ?

Préambule

Contrairement à Windows Phone 7, la splashscreen n’est plus mise par défaut dans les projets de base. Pourquoi ? Car les apps se chargent très rapidement, elle n’est donc plus indispensable. C’est pour cela qu’elle n’apparaitra plus dans les Template visual studio par défaut.

Toutefois, vous pouvez toujours l’ajouter manuellement, si votre application le nécessite.

La taille par défaut

Jusqu’à maintenant, la taille de celle-ci était de 800 sur 480, la résolution native des téléphones Mango. Avec l’arrivée de Windows Phone 8, de nouvelles résolutions arrivent, alors quelle taille doit faire ma splashscreen ?

Par défaut, il est recommandé d’utiliser une image SplashScreenImage.jpg de résolution 768 × 1280, celle-ci s’affichera au ratio 1:1 sur les écrans WXGA et WVGA. Pour le 720p, une bande noire sera visible en haut, comme le montre cette capture :

 

A gauche la splashscreen affiché sur un écran 720p (HTC 8X), à droite sur un écran WXGA (lumia 920)

Je souhaite avoir une splashscreen spécifique pour chaque résolution

On vient de voir la méthode simple : une seule image, le système gérant le reste. Maintenant voyons la méthode plus complète où chaque résolution aura sa propre splashscreen, il suffit de les nommer ainsi :

  • SplashScreenImage.Screen-WVGA.jpg (480×800)
  • SplashScreenImage.Screen-WXGA.jpg (768×1280)
  • SplashScreenImage.Screen-720p.jpg (720×1280)

Ces fichiers doivent être mis en Content et à la racine du projet.

 

Et c’est tout !

Comment charger proprement une page web sans cache ?

Comment charger proprement une page web sans cache ?

Une grande majorité des développeurs Windows Phone ont surement déjà rencontré ce problème : On souhaite requêter une page web, sauf que c’est une version provenant du cache que l’on nous retourne.

Un hack très répondu et à mon sens, pas propre, est d’ajouter un paramètre variable à l’Uri de sa requête comme par exemple :


var request = WebRequest.CreateHttp("<a href="http://www.feelmygeek.com/rand.php?s">http://www.rudyhuyn.com/?rand="+new</a> Random().Next());

ou encore


var request = WebRequest.CreateHttp("<a href="http://www.feelmygeek.com/rand.php?s">http://www.rudyhuyn.com/?rand="+DateTime.Now.Ticks</a>);

Personnellement, je ne trouve pas ça élégant, on est assez proche de MacGyver qui souhaite réparer sa voiture grâce à un trombone.

Le protocole de test

Pour effectuer mes tests, j’ai développé un petit script php:


<?php

header("Cache-Control: max-age=31536000");

header("Expires: Sun, 27 Oct 2013 14:50:11 GMT");

echo rand() . "n";

echo rand() . "n";

echo time();

?>

 

et un client Windows Phone :


var request = WebRequest.CreateHttp("http://www.feelmygeek.com/rand.php");
request.BeginGetResponse((iar) =>{
var response=request.EndGetResponse(iar).GetResponseStream();
var val = new StreamReader(response).ReadToEnd();
Deployment.Current.Dispatcher.BeginInvoke(() => {
MessageBox.Show(val);
});
}, null);

 

Si deux requêtes consécutifs retourne le même résultat, on pourra donc en déduire que le cache a été utilisé.

Alors comment le faire élégamment ?

 Cache-Control :no-cache ?

Ajoutons donc  la ligne suivante à notre test :


request.Headers[HttpRequestHeader.CacheControl] = "no-cache";

Logiquement, cela devrait fonctionner, mais… non, le message affiché est bien toujours le même, il faut donc trouver une autre solution.

Cache-control : max-age=0 ?


request.Headers[HttpRequestHeader.CacheControl] = "max-age=0";

Non plus… de toute évidence, Windows Phone ignore cette instruction.

Contournons donc le problème

Vu que cache-control ne semble pas pris en compte, trouvons une autre solution.

Au lieu de dire “n’utilise pas le cache”, nous allons plutôt dire, “retourne moi une nouvelle page si elle a été modifiée depuis 1970”.

Sachant qu’internet a été inventé en 1973, on devrait être tranquille.

Voici comment le faire :


request.Headers[HttpRequestHeader.IfModifiedSince] = DateTime.MinValue.ToString();

Note :

Si vous cherchez bien sur internet, vous trouverez probablement ce genre de solution :


request.Headers[HttpRequestHeader.IfModifiedSince] = DateTime.UtcNow.ToString();

Cette solution est a éviter et à bannir. Pour peu que votre serveur gère correctement le header http IfModifiedSince, il vous retournera très probablement un code 304 (not modified) car littéralement vous lui demandez :

Retourne moi la page, uniquement si elle a été modifié entre maintenant et maintenant

Ce qui n’est pas le plus efficace.

Conclusion

Si vous souhaitez éviter tout problème de cache, voici donc la méthode la plus élégante pour cela :


var request = WebRequest.CreateHttp("http://www.feelmygeek.com/rand.php");
request.Headers[HttpRequestHeader.IfModifiedSince] = DateTime.MinValue.ToString();
request.Headers[HttpRequestHeader.CacheControl] = "no-cache";
request.BeginGetResponse((iar) =>{
var response=request.EndGetResponse(iar).GetResponseStream();
var val = new StreamReader(response).ReadToEnd();
Deployment.Current.Dispatcher.BeginInvoke(() => {
MessageBox.Show(val);
});
}, null);

 

Un dernier point : pourquoi avoir laissé “CacheControl : no-cache” ?

Tout simplement pour éviter que des proxys vous retourne une ancienne version de la page entre le téléphone et le serveur !

Et nos amis de Windows 8 ?

Une petite note pour nos amis WinRT, HttpWebRequest dispose d’une propriété IfModifiedSince de type DateTime, sauf que ma solution ne fonctionne pas avec eux car comme l’indique la documentation :

Si la propriété IfModifiedSince a la valeur DateTime.MinValue, l’en-tête HTTP If-Modified-Since est supprimé de la propriété Headers et de WebHeaderCollection.

La solution est donc de contourner tout cela en écrivant :


request.IfModifiedSince = DateTime.MinValue.AddSecond(1);

Voilà !

NavigationService en Windows 8 ?

NavigationService en Windows 8 ?

Je vois régulièrement dans les applications Windows 8 que j’aide des “faux” NavigationService, un exemple d’implémentation par mon camarade Joost van Schaik, mon camarade MVP : http://dotnetbyexample.blogspot.fr/2012/06/navigationservice-for-winrt.html

Je trouve ça très sympa de s’inspirer de Windows Phone, mais tout ceci n’est pas nécessaire, car il est très simple d’avoir accès aux fonctions de navigations où que l’on soit dans le code (viewmodel, autre). Pour cela, il suffit d’écrire :


((Frame)Window.Current.Content).Navigate(...)

et c’est tout :D.

 

Vérifier l'affichage des caractères spéciaux sous Windows 8 et plus encore

Vérifier l'affichage des caractères spéciaux sous Windows 8 et plus encore

Si vous souhaitez toucher un grand nombre d’utilisateurs, il est important de localiser votre application. Pour être efficace, il faut penser “localisation” et “globalisation” dès la création de votre projet en utilisant par exemple des fichiers ressources pour externaliser vos textes.

Toutefois parfois on a des surprises, par exemple des caractères spéciaux qui ne s’affiche pas bien dans notre UI (en général des ressources venant de l’extérieur : internet, storage local, etc…).

Pour nous simplifier la vie, il existe un outils très efficace, appelé Multilingual App Toolkit que j’ai évoqué dans un article précédent :

http://www.rudyhuyn.com/blog/2012/10/04/localisation-sous-windows-8-comme-un-pro/

Le but premier de cet outil est vous faciliter les traductions de vos ressources mais la fonctionnalité qui nous intéresse ici est la possibilité de traduire nos ressources en pseudo-langage qui auront la forme suivante.

La structure du pseudo-langage

Chaque phrase est traduite de la façon suivante :

[A5D81][!!phrase!!]

Le premier bloc entre crochets est un identifiant de la phrase, il sera ainsi possible d’identifier très rapidement les ressources qui posent problèmes.

Le second bloc entre [!! … !!] correspond à la ressource d’origine mais modifié par le toolkit pour utiliser des caractères spéciaux ressemblants ou accentués (façon leet ~ 1337)

Quelques exemples :

click here to add comment
[7A2BD][!!_ćłîĉĸ ђęŕę ťò áďď čômмêит_!!!!!!!!]

download background for tv show automatically
[D3BE4][!!_đõẅήľõáð Бàĉķģřòûйð ƒòŕ ťν śĥôẁ áµţômãţìĉàĺļў_!!!!!!!!!!!!!!]

Background Agent
[8C522][!!_Вâčĸĝѓôµηď Âğêйť_!!!!]

 

Pourquoi faire ?

Le pseudo langage va vous permettre plusieurs choses :

  • vérifier que notre application affiche les caractères spéciaux (notamment les étrangers)
  • repérer facilement les strings qui sont hardcodées
  • identifier les concaténations de string (grâce aux crochets entourant le pseudo-langage)
  • identifier les strings tronquées (car il manquera justement le ] final)

Ce pseudo langage va aussi vous permettre de tester instantanément que votre application est bien localisable et que vous n’avez pas de problème d’encodage entre UTF-8 et ISO-8859-1 (ce qui arrive trop souvent…).

Comme Lorem Ipsum  ?

Du tout, on est ici très loin du lorem ipsum qui a pour but de créer du faux latin afin que l’utilisateur ne soit pas dérangée par le contenu tout en se concentrant seulement sur l’aspect graphique. Par exemple :

ddsigfd fisdhifsh ukdsh fsdkljgh sdif

va forcément attirer votre attention, par son nombre de consonnes trop élevé, ses enchainements syntaxiquement non-logiques, etc…

Alors que :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

vous semblera plus naturel, n’attirera pas votre œil, vous pourrez donc vous concentrer plus facilement sur l’UX de votre application.

Dans le cas de notre pseudo-langage, le but n’est pas de paraitre “réel” et sembler neutre, mais plutôt de focaliser les erreurs potentielles de nos textes.

 

Comment générer mon pseudo-langage ?

Par défaut, vous devez avoir un fichier Pseudo Language (Pseudo).xlf dans le répertoire MultilingualResources.

Si ce n’est le cas, activé le toolkit en vous référant à l’article suivant :

http://www.rudyhuyn.com/blog/2012/10/04/localisation-sous-windows-8-comme-un-pro/

Faites un clic droit sur ce fichier et sélectionnez  “Generate pseudo translations” (pensez à compiler votre projet avant de générer le pseudo-langage)

Dans la console “Output” vous devriez voir :

1> 177 resource translated to Pseudo language

Double-cliquez sur le fichier afin de le visualiser :

Les phrases ont bien été traduites en pseudo-langage. Il reste maintenant une étape indispensable : lancer l’application en affichant le pseudo-langage et la langue par défaut de votre système.

Activer le pseudo-langage dans Windows 8

Pour afficher le pseudo-langage dans votre app, il faut passer votre système dans ce langage (comme on peut le faire pour un vrai langage comme l’anglais, etc…)

  • Ouvrez le panneau de configuration et sélectionnez “Ajouter un langage” (dans Horloge, Langue et région)
  • Cliquez sur le bouton “ajouter un langage”
  • Dans la partie supérieur droite de la fenêtre, tapez dans le champ de recherche : qps-ploc

 

  • Sélectionnez English (pseudo-qps) and clique sur Ajouter.
  • Assurez vous que le langage est en haut de la liste (le plus prioritaire)

Et voilà ! Il suffit maintenant de lancer votre application.

Post Scriptum

Microsoft en interne utilise aussi cette technique pour leurs sites internet, la preuve avec l’app dev Windows 8 où on peut encore voir aujourd’hui ce genre de chose :

 (merci à John T. pour la capture)

Dans l’idéal, ne faites pas comme eux, ne mettez jamais cela en production 😉

Localisation sous Windows 8 comme un pro

Localisation sous Windows 8 comme un pro

Localiser une application est parfois une étape laborieuse, surtout si on ne maîtrise pas les langues en question.

Pour nous simplifier la vie, il existe un outil très efficace, appelé Multilingual App Toolkit et disponible à l’adresse suivante :

http://msdn.microsoft.com/en-us/windows/apps/hh848309.aspx

Le but premier de cet outil est vous aider à la traduction de vos ressources, notamment en utilisant Bing Translate. Attention toutefois, je ne recommande pas d’utiliser la traduction dans l’état, il est indispensable de faire appel à une personne parlant couramment la langue pour corriger les erreurs (et y’en a évidemment). Il faut donc voir cette fonctionnalité comme une aide à la traduction, pas plus.

Mais ce ne sont pas les seuls fonctionnalités de cet outil. Il va permettre le support des fichiers XLIFF dans votre application Windows 8 ainsi que tous les avantages de type de fichier :

  • standard
  • avoir à la fois la phrase d’origine et la traduction (contrairement au resw)
  • prise en compte par les outils professionnels de localisation
  • indiquer si la ressource doit être traduite ou non (par exemple : il n’y a pas que des ressources textes dans notre resw ou encore on ne souhaite pas traduire le nom de l’app)
  • gestion de l’état : nouveau, révision nécessaire, traduire, finale, validée

Par rapport à un .resw, on est donc un cran au dessus au niveau intégration dans un workflow de développement (travaillant régulièrement avec des personnes spécialisées en wording, xliff m’apporte beaucoup).

 

 Comment le mettre en place ?

Après avoir installé le toolkit, il suffit de lancer votre application dans visual studio, d’aller dans le menu “outils” et d’activer le toolkit

Un répertoire MultilingualResources va alors être créé avec un fichier Pseudo Language (Pseudo).xlf (je reviendrais sur ce fichier dans un prochain article)

 

Pour ajouter une traduction, il suffit de faire un clic droit sur le projet et cliquer sur “Add translation languages” :

Vous pourrez alors sélectionnez les langues que vous souhaitez :

A noter, le logo “Bing translator” indique que le fichier peut être traduit automatiquement par Bing.

Il suffira maintenant de faire un rebuild de votre projet pour prendre en compte les nouvelles langues.

Attention, ceci ne fonctionne qu’avec les fichiers ressources dans les répertoires :
/Strings/<lang>/resources.resw où “lang” peut valoir : en, en-US, fr, fr-FR, etc….

 

Traduire les ressources

Très important, la traduction ne se fera pas automatiquement, il faudra la demander manuellement, l’intérêt d’une traduction automatique.

Après avoir modifié votre fichier resw, pensez à compiler votre projet pour que les fichiers *.xlf soient mis à jour.

Double-cliquez sur ces fichiers pour lancer l’outil “Editeurs d’applications multilingues”.

Vous trouverez donc trois colonnes :

  • l’état de la traduction : nouveau, révision nécessaire, traduire, finale, validée
  • la phrase d’origine
  • la traduction

et à droite les commentaires relatifs à la phrase.

Pour traduire automatiquement, cliquez sur le bouton “traduire” dans le ruban et sélectionnez “tout traduire”. La 3ème colonne sera alors mise à jour avec les résultats de Bing Translate. Bien que les résultat sont correctes, il sera indispensable de relire et de repasser dessus.

Pour résumer

Grâce à ce toolkit, votre projet aura qu’un seul fichier resw, qui va porter les éléments clés et les phrases d’origine et plusieurs fichiers XLIFF que porteront les traductions et que vous pourrez envoyer à vos traducteurs.

Je conseille donc vivement ce toolkit qui dans un workflow professionnel est idéal notamment de part le format standard des fichiers XLIFF qui vous éviteront de passer par des fichiers excel ou autres (et qui énerveront vos traducteurs professionnels ;))

La suite ?

Cet outil permet de nombreuses choses, on vient de le voir, mais il nous manque une fonctionnalité clé : le pseudo-langage. Le domaine étant trop vaste pour être intégré à cet article, vous trouverez toutes les infos sur cette fonctionnalité ici :

http://www.rudyhuyn.com/blog/2012/10/04/verifier-laffichage-des-caracteres-speciaux-sous-windows-8/