Dot.Blog

C#, XAML, WinUI, WPF, Android, MAUI, IoT, IA, ChatGPT, Prompt Engineering

Un « projet zéro » MAUI réaliste partie 4/5 – Les Vues et le Shell

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 !

Faites des heureux, PARTAGEZ l'article !

Ajouter un commentaire