Notre série de 5 articles sur la création d’un « projet
zéro » réaliste qui dépasse le Hello World continue avec la gestion des
Vues et le Shell…
Cet article fait partie d’une série de 5 épisodes dont voici les liens (apparaissant au fur et à mesure des parutions au début de chaque article) :
1- https://www.e-naxos.com/Blog/post/un-projet-zero-maui-realiste-partie-1-5-creation-du-projet-et-mvvm.aspx (Création du projet et MVVM)
2 - https://www.e-naxos.com/Blog/post/un-projet-zero-maui-realiste-partie-2-5-les-tests-unitaires.aspx (Les tests unitaires)
3 - https://www.e-naxos.com/Blog/post/un-projet-zero-maui-realiste-partie-3-5-modele-services-et-injection-de-dependances.aspx (Modèle, Services et injection de dépendances !)
4 - https://www.e-naxos.com/Blog/post/un-projet-zero-maui-realiste-partie-4-5-les-vues-et-le-shell.aspx (Les Vues et le Shell)
Ranger la Vue
Il faut bien faire une pause de temps en temps… Et en effet
aujourd’hui vous n’aurez pas des tartines à lire, on va faire bien plus court
que les précédents épisodes. Mais la tâche à effectuer est tout aussi
importante et il faut bien en parler, à part, parce que la mélanger au reste
n’aurait pas de sens.
Notre App « zéro » n’est pas très sophistiquée,
elle ne possède qu’une Vue, MainPage.xaml.
Mais celle-ci est placé à la racine du projet. Si cela ne
pose aucun problème pour une App minuscule ce n’est pas le cas pour une App
plus habituelle qui peut compter des tas de Vues ! Donc autant prendre les
bonnes habitudes tout de suite, les Vues, comme le reste, doit être rangé
correctement.
Pour ce faire il faut créer un sous-répertoire
« Views » dans le projet. La nouvelle structure du projet devient
ainsi :
Ensuite nous allons déplacer la Vue MainPage.xaml (avec son
code-behind) pour la déposer dans ce nouveau répertoire.
Ce qui déclenchera deux dialogues auquel nous répondrons par
l’affirmative :
Toutefois, au moins avec ma version de Visual Studio, même
en répondant oui à la dernière question je m’aperçois que les namespaces ne
sont pas mis à jour. Ne pas oublier de vérifier et d’ajuster à la main si
nécessaire (le namespace de la Vue doit être maintenant
« <nomApp>.Views »).
L’opération doit être effectuée aussi bien dans
MainPage.xaml.cs que dans la vue Xaml. Si vous disposez de Resharper, ce que je
ne peux que vous conseiller, un changement l’adaptation du namespace au
répertoire courant ainsi que la modification du fichier Xaml se fait en une
seule opération. Gain de temps et pas de risque d’oublier ou de se tromper.
On n’oubliera pas non plus d’ajouter le namespace des Vues à
MauiProgram.cs. Ainsi que dans AppShell d’ailleurs. Ça fait beaucoup à se
rappeler. Autant créer le répertoire Views dès le début du projet et d’y créer
directement les vues à l’intérieur.
<?xml
version="1.0" encoding="UTF-8" ?>
<Shell x:Class="RealisticHelloWorld.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:RealisticHelloWorld"
xmlns:views="clr-namespace:RealisticHelloWorld.Views"
Shell.FlyoutBehavior="Disabled">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate views:MainPage}" Route="MainPage" />
</Shell>
VS pose la question de l’ajustement mais n’en tient
visiblement pas compte du tout ! Où se situe l’arnaque ? Loupons-nous
quelque chose ou faisons-nous face à une farce ? Un gros bogue ? Je
ne saurais le dire, mais ça ne marche pas. Remboursez ! … hmmm oui en
général les gens utilisent la version gratuite… En tout cas tant que cela ne
marche pas comme prévu vérifiez bien tout cela. Encore une fois Resharper sait
le faire et le fait partout où cela est nécessaire. Je dis ça, je ne dis
rien 😊(j’ai horreur quand les gens utilisent cette
expression, mais ne le répétez pas je ne veux vexer personne !).
Au passage on peut voir ci-dessus le code du Shell (qui est
ajusté lui aussi). C’est à 95% le code du projet de base créé par Visual
Studio, je reviendrais sur le Shell plus en détail dans d’autres papiers. Par
défaut ce code est très simple et certaines Apps peuvent s’en suffire. Mais en
réalité il est plus que fréquent de l’abonder pour y ajouter tous les accès aux
différentes parties de l’App, l’About, l’Aide…
On note l’utilisation d’un DataTemplate pour contenir la
MainPage au lieu de l’instancier directement. Cette méthode est plus subtile et
fait partie des bonnes pratiques sous MAUI et même sous Xamarin.Forms qui
contient aussi le composant Shell.
Conclusion de la partie 4/5
Je l’avais dit, ce papier ne serait pas aussi long que les
précédents, mais il aborde un sujet important, un autre aspect des bonnes
pratiques. Le sujet méritait d’être présenté seul et non noyé dans les autres
parties qui n’ont rien à voir.
Mais le prochain risque d’être plus long !
Stay Tuned !