Source Image : illustration créée par vectorjuice – www.freepik.com
Le développement d’applications multiplateformes voit sa popularité augmenter au fur et à mesure que les études mettent en évidence des usages qui évoluent : des besoins de fonctionnalités en mobilité différents de l’usage au bureau sur son pc. On cherche mieux qu’avant à cibler une distribution des fonctionnalités différentes suivant les plateformes tout en gardant une grosse base commune.
Bien sûr, il y a des considérations UX différentes suivant les facteurs de forme mais il n’est plus nécessaire d’avoir des développements front différents suivant la plateforme cible. De nouveaux environnements multiplateformes arrivent sur les plateformes de développement tel que .Net MAUI sur Visual Studio.
En concurrence avec Avalonia, Microsoft développe lui-même son framework portable : MAUI qui fonctionne sur Windows, macOS, Android, iOS (mais pas Linux). Et utilise XAML et C#.
Nous allons donc voir ce qu’est .Net MAUI et comment ce type d’application fonctionne.
C’est quoi .Net MAUI ?
L’interface utilisateur d’applications multiplateformes .Net (.Net MAUI) est une infrastructure multiplateforme permettant de créer des applications mobiles et de bureau natives avec C# et XAML.
.Net MAUI permet le développement d’applications qui peuvent s’exécuter sur Android, IOS, MacOs, Windows à partir d’une base de code partagée unique.
Il existe cependant la possibilité de faire du code spécifique pour chaque plateforme dans l’espace ressource de la plateforme choisie. Nous pouvons donc combiner code partagé et code spécifique afin de créer notre application.
Avec le multi-ciblage, les builds deviennent plus intelligents et savent produire des exécutables pour chaque plateforme concernée, tout en gardant la santé mentale dans la base de code.
Comment est organisée une application .Net MAUI ?
Capture d’écran 1 : Dossier composant MAUI
L’ensemble des dossiers et fichiers sont générés lors de la création du projet.
Nous allons faire un tour rapide de chacun d’entre eux avant de rentrer plus dans le détail des principaux fichiers/dossiers à modifier pour votre application :
- Dépendances est un dossier réunissant toutes les dépendances natives de l’application.
- Properties est un dossier qui contient les informations sur l’environnement dans lequel l’application a été compilée la dernière fois.
- Platforms est un dossier qui contient les dossiers de code spécifique pour chaque environnement cible.
- Ressources est un dossier permettant de joindre certains types de ressource de l’application tel que le logo de l’application.
- App.xaml est le dossier/fichier qui permet d’instancier le programme et permet de renseigner les différentes versions des logiciels supporter/utiliser par l’application.
- MauiPage.xaml est le fichier/dossier qui contient le code partagé.
- MauiProgram.cs est un fichier permettant de gérer les dépendances internes à l’application pour les interfaces et les classes les implémentant.
Nous allons voir plus en détail le dossier Platforms en prenant en exemple le dossier interne Android :
Capture d’écran 2 : Dossier spécifique Android
Les fichiers qui nous intéressent ici sont :
- AndroidManifest.xml qui est le fichier qui permet de gérer tous les droits qui sont nécessaires à votre application (point très important à ne pas négliger sur Android).
Pour ajouter un droit, il suffit de l’ajouter en xml comme par exemple : <uses-permission android:name= »android.permission.READ_EXTERNAL_STORAGE » />
Ici, nous demandons le droit de lire le stockage externe dans notre Android afin de pouvoir accéder au fichier externe à l’application. - MainActivity.cs et MainApplication.cs sont les fichiers qui permettent de coder des fonctions spécifiques à Android et seront compilés seulement si la compilation est faite à partir d’un Android.
En ce qui concerne le code partagé il est donc fait dans MainPage.xaml et le fichier C# lié MainPage.xaml.cs. MainPage.xaml permet de créer les composants visuels de l’application tels que les boutons, les zones de texte etc…
MainPage.xaml.cs est le fichier qui permet de créer les écouteurs sur les actions utilisateurs et peut agir en fonction des demandes.
Dans ce qui suit, nous vous présentons un code exemple de code partagé :
Capture d’écran 3 : Création d’un bouton du côté interface utilisateur en code partagé
Ici nous avons donc créé un bouton appelé “Click me” qui sera visible sur toutes les plateformes à partir du fichier MainPage.xaml. Mais pour l’instant, ce bouton ne fait rien car l’écouteur du click (“clicked”) n’est pas encore implémenté. Il faut donc l’implémenter dans MainPage.xaml.cs :
Capture d’écran 4 : Implémentation de l’écouteur lié au bouton “Click me”
Maintenant nous avons créé l’écouteur lié à notre bouton et qui permet de récupérer l’information d’un click utilisateur. Ici notre bouton est un compteur de click et il est lié à d’autres éléments graphiques tels que la zone de texte CounterLabel qui affiche le nombre de click.
Pour plus d’exemples, je vous invite à consulter la documentation en ligne de .Net MAUI :
Conclusion
Voilà donc une infrastructure open source qui devrait favoriser son adoption. Elle remplace WinUI propre à Windows (et utilisé dans la version 3 pour les applications Windows 11), mais est construit sur la base de Xamarin.form, conçu pour fonctionner sur tous les systèmes.
On crée facilement une application portable avec Visual Studio et on cible officiellement applications mobiles et de bureau à partir de la même base de code.
Après l’abandon de UWP, on a sans doute ici une solution d’avenir pour étendre les atouts de Xamarin aux scénarios de bureau.
Vous recherchez des compétences .NET ? Nos équipes restent également à votre écoute, n’hésitez pas à nous contacter dès aujourd’hui.
Article proposé par
Vincent Boucher
Stagiaire confirmé