On n’y échappera pas… Après avoir présenté MAUI il est temps de sacrifier à la tradition du Hello World
Salut !
Le Hello World est une sorte de rite de passage ou une coutume à laquelle on ne peut pas échapper, quel que soit le langage de programmation…
L’intérêt est de montrer rapidement sans contexte applicatif à expliquer la structure minimale d’une application qui se compile et fonctionne. Cela permet aussi de parler de certains aspects indispensables à la base de toute application écrite avec la plateforme. Ici nous allons nous prêter bien volontiers à cette tradition et nous lancer dans un Hello World en bonne et due forme !
Préliminaires
Je vais supposer ici que vous disposez bien de la dernière version de Visual Studio 2022 ou que vous savez vous servir du Visual Studio Installer pour mettre tout ça en place.
On y va !
Pas très galant ces préliminaires express mais ça fait gagner du temps. Les bourrins du code ne pourront pas rouspéter !
Vous ouvrez Visual Studio, et vous demandez la création d’un nouveau projet (mon VS est en anglais pas habitude des mauvaises traductions françaises et surtout du confort que cela procure pour faire des recherches sur le web et appliquer facilement les réponses trouvées).
Ce n’est pas compliqué, suivez la flèche…
Je vous ferai grâce de dizaines de captures d’écran vous saurez vous débrouiller j’en suis certain. Après l’écran ci-dessus il faudra choisir un projet MAUI, il suffit de taper MAUI dans la zone de recherche pour restreindre la liste (impressionnante) de types de documents et d’applications que VS propose aujourd’hui !
Ce qui nous intéresse ici c’est « .NET MAUI App », on ne veut pas faire du Blazor (en tout cas pas aujourd’hui) ni faire une DLL.
Un écran de configuration suit votre choix, c’est là que vous entrez le nom de votre projet et sa localisation.
Voilà. Visual Studio a créé pour vous toute la structure d’un projet par défaut.
Rien bien complexe puisque tout se joue maintenant dans un seul et unique projet… Qui contient donc un App.Xaml et son code behind, comme une App Xamarin.Forms. On retrouve forcément une MainPage.xaml et son code behind, seule page du projet par défaut. On voit aussi des répertoires. Properties est connu, Resources contient les ressources partagées : fontes, images, Splash screen… et Platform contient ce qui est spécifique à une plateforme donnée. Plus besoin d’un projet entier rien que pour ça, MAUI se charge de prendre en compte les contraintes des uns et des autres à la compilation.
Ce qui va vraiment vous changer, si vous venez des Xamarin.Forms c’est l’App de base qu’on voit dans la capture précédente sous le nom de MainProgram.cs.
Ce code contient principalement une classe statique et une méthode statique. La classe est MauiProgram et la méthode s’appelle CreateMauiApp() qui retourne une MauiApp ce qui semble assez logique.
Le contenu de cette méthode montre la construction du cœur de votre App, cela tourne autour du HostBuilder, exactement de la même façon que sous ASP.NET CORE. Le principe était bon, il a été étendu à toutes les Apps MAUI qu’il s’agisse d’App console, d’iOS, de Android, WinUI…
Le créateur utilisé est lui personnalisé selon le cas (une App ASP Core n’appellera pas le même builder par exemple). Ici c’est MauiApp qui appelle sont CreateBuilder().
Une fois le builder créé et stocké dans une variable locale on voit la syntaxe « fluent » utilisée pour personnaliser ce builder notamment le UseMauiApp<App> qui englobe notre classe App.xaml.cs dans un contexte Maui. Puis suivent d’autres appels qui dépendront des besoins de l’App. Par exemple ici on trouve un ConfigureFonts() avec une lambda interne qui définit les fontes ajoutées au projet.
Et à la fin ce code retourne la variable builder qui est donc de type MauiApp.
Ce mécanisme est simple, clair, complet, et valable pour toute App MAUI ou ASP Core. Même cet aspect là a été unifié. Merci Microsoft !
App
Quant à la classe App.xaml.cs, ouvrez-là et vous verrez qu’elle ne contient pas grand-chose. Elle ne fait que définir la variable MainPage en créant une nouvelle MainPage()… Le nom de la propriété de App (MainPage) étant le même que nom de la page par défaut (MainPage.xaml) mais c’est une coïncidence heureuse du projet par défaut. En fait ici on retrouve la même chose que dans une application Xamarin Forms…
Resources
Les ressources sont l’une des améliorations significatives de MAUI. L'AppIcon, l'image et le dossier de polices seront disponibles partout dans le cadre du projet MAUI et il ne s'agit que d'un seul SVG ! Donc vectoriel, donc adaptable à toutes les résolutions. Maui se chargera automatiquement de générer toutes les différentes tailles d'icônes pour différents appareils. Rien que ça c’est un gain de temps et de tracas énorme !
L’exécution
Pour l’instant nous sommes d’accord, nous n’avons rien fait du tout. Nous avons juste pris le projet par défaut pour regarder un peu sous le capot.
Donc ne reste plus qu’à l’exécuter sous différentes plateformes. Le choix de cette dernière s’effectue dans la barre d’exécution en haut de l’écran de VS :
Ici on choisit un émulateur Android (si aucun n’est installé suivez la procédure décrite dans la doc officielle, lien dans la conclusion. Le modèle proposé par défaut est un Pïxel 5). Le programme sera donc compilé en natif pour cette cible bien précise, l’émulateur sera monté et l’App sera lancée…
Et nous y voilà… Un magnifique Hello World, même un peu plus complexe que ne l’exige la tradition puisqu’on y trouve un bouton qui compte les clics et les affiche (tout cela est le code dans MainPage.Xaml que je vous laisse regarder, reprendre le contenu ici serait très rébarbatif pour le lecteur d'autant que votre Visual Studio pourra recréer le projet tout seul...).
Conclusion
Ça y est, nous avons respecté la tradition, qu’en dire de plus… que ce n’est pas bien sorcier mais qu’on vient juste de gratouiller la surface… Et qu’il nous reste beaucoup à voir !
Si, une dernière chose, MAUI évolue tout le temps, la doc aussi. Pour un Hello World totalement à jour et pour les explications intermédiaires que je n’ai pas données ici par souci de concision (notamment la création d’une device Android sur l’émulateur par exemple), vous pouvez jeter un œil à la doc officielle « build your first App ».
Pour le reste…
Stay Tuned !