Organiser son code XAML

WindowsStoreHeader

Développer des interfaces utilisateurs en XAML dans une application Windows Store n’est pas complexe, en revanche, les vues (les fichiers .xaml) peuvent rapidement contenir des centaines de lignes de code XAML.

J’ai eu l’occasion de travailler sur plusieurs projets de développement d’applications Windows Store (C# et XAML) et j’avoue être tombé sur des fichiers .xaml illisibles et d’un kilomètre de longueur (big up à ceux qui ont vécu la même chose que moi lol !).
L’objectif de ce topic est de présenter quelques astuces pour mieux organiser son code XAML dans une application Windows Store (C# et XAML) car en entreprise plusieurs personnes sont amenées à travailler sur le même projet et par conséquent sur les mêmes fichiers.

Les commentaires

Ah les commentaires !!…Une vraie bénédiction !!… Y a pas mieux que de tomber sur un fichier XAML commenté. Donc je vous le dit et redit, COMMENTEZ VOTRE CODE XAML.

Un commentaire doit être de préférence écrit en majuscule, court et concis. Son objectif est d’expliquer le contenu d’un bloc.

Il permet de faciliter la compréhension du code XAML mais aussi de mieux retrouver les blocs à modifier en cas de dysfonctionnement de l’interface utilisateur.

Par exemple :

Comment

 Les chaines de caractères

Pour faciliter la maintenabilité d’un fichier XAML, les chaines de caractères ne doivent pas être écrites en dur.

Pour éviter de le faire, Visual Studio 2013 possède un type de fichier où l’on peut stocker toutes les ressources (chaines de caractères) de l’application. Il s’agit du fichier Ressources File (.resw). Pour pouvoir l’intégrer dans votre projet, effectuer les étapes suivantes : Clique droit sur le projet > Ajouter > Nouvel élément > Sélectionner Resources Files (.resw) > Clique sur le bouton « Ajouter »

Le fichier Ressources n’est qu’un tableau à 3 colonnes (voir figure ci-dessous) :

Ressources2

Name : Contient la clé de la ressource

Value : Contient la valeur de la ressource

Comment : Contient le commentaire relié à la ressource

Il y a plusieurs manières d’exploiter ce fichier afin de faciliter la maintenabilité des chaines de caractères dans une application Windows Store.

  1. La directive x :Uid

La directive x :Uid, permet d’identifier un élément objet dans le code XAML. Le mapping qui existe entre cette directive et le fichier Ressources est que dans la colonne Name de celui-ci on intègre la propriété de l’objet dont on souhaite lui appliquer une Value.

Par exemple pour éviter de mettre le texte « Vous allez être redirigé vers le site officiel de Mortal Kombat X » en dur dans la propriété Text du TextBlock, je lui ajoute la directive x :Uid en affectant comme valeur  Redirect :

Ressources3

Ensuite dans le fichier Resources.resw je rajoute ces valeurs :

Ressources4

L’avantage de cette approche est que pour modifier le texte en dur de toutes les propriétés « Text » des éléments graphiques de l’application Windows Store dont la directive x :Uid est « Redirect », il suffit de mettre à jour la value de Redirect.Text.

L’inconvénient en revanche, se trouve dans le cas où nous avons des TextBlocks et boutons par exemple qui contiennent le même texte en dur.

La difficulté de ce scénario est que les boutons ne contiennent pas de propriété Text mais plutôt Content à la place

2. Mise en place d’une Class Library

Pour palier aux limites de la directive x :Uid, l’approche de la création d’une librairie de classe qui contient toutes les ressources de l’application est préférable.

Pour ce faire, effectuer les étapes suivantes :

  • Ajouter un projet un type Class Library dans la solution

Ressources5

Etant donné que mon projet principal se nomme MortalKombat, je vais donc nommé ma librairie de classe : MortalKombat.Localization

  • Ajouter la référence « MortalKombat.Localization » dans le projet MortalKombat
  • Ajouter le fichier Ressources resx dans le projet MortalKombat.Localization
  • Ajouter la classe cs dans le projet MortalKombat.Localization

Dans la classe LocalizedStrings, rajouter le code suivant, ne surtout pas oublier de mettre la classe StringResources     en public :

Ressources6

  • Dans le fichier StringResources.resx rajouter ces valeurs

Ressources9

  • Dans le fichier XAML rajouter cette ligne

Ressources8

A l’exécution de l’application, vous remarquerez que le résultat à l’affichage est le même que celui utilisé avec la directive x :Uid.

Mieux encore, nous pouvons mettre le même contenu de la propriété Text dans la propriété Content d’un bouton sans aucune erreur générée.

 Les styles, datas templates, animations, couleurs,…

Pour que le code XAML soit plus épuré dans une page, il est nécessaire d’externaliser les ressources (styles, datas templates, animations, couleurs…) dans des fichiers externes.

Dans le meilleur des mondes, les fichiers App.xaml et les vues ne contiennent aucun data template, aucune ressource, aucun code couleur ou taille de la police,…

Le fichier App.xaml ne doit contenir que le lien vers un fichier qui contient toutes les ressources de l’application.

Voici un exemple du fichier App.xaml :

Ressources10

Le fichier CommonStyles.xaml contient tous les styles, datas templates, animations,… utilisés dans l’application.

Pour conclure, organiser son code XAML est très important car il permet aux développeurs de mieux se retrouver dans le code. Il n’existe pas de squelette standard pour cela. En revanche il est nécessaire d’avoir une approche bien structurée et de penser aux problèmes de performances.

<< Tester fonctionnellement une application Windows Store
Publicités

Un commentaire sur “Organiser son code XAML

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s