Première exécution de l’app .NET MAUI

Mais pour que notre application puisse fonctionner, il nous reste deux points à aborder : l’initialisation de l’app et surtout, gérer son état d’exécution.

Initialisation de l’app

Pour chaque plateforme ciblée (iOS, Android, …), chaque application .NET MAUI sera initialisée depuis un seul point d’entrée via la méthode CreateMauiApp() située dans le fichier MauiProgram.cs. C’est ici que l’on configurera tout ce dont a besoin l’app pour fonctionner comme on le souhaite : les services Web, les dépendances externes, ou bien encore les polices de caractères spécifiques.

Gestion de l’état de l’app

Mais on aura aussi besoin de quoi définir l’état actuel de notre application (quelle page afficher, que faire si l’application est arrêtée, …). Et pour ça on a justement une classe Application déclarée dans le fichier App.cs.

Lancement de l’app

Allez, il est temps de faire tourner l’application ! Choisis donc la plateforme que tu souhaites cibler, puis clique sur le bouton encadré en rouge pour démarrer le projet:

Dans un premier temps, tu verras ton projet être compilé avec la configuration choisie (c’est l’étape du build):

Puis tu verras ton application se déployer automatiquement vers la plateforme choisie (ici, une simulation de l’iPhone 13, iOS 15.5).

Et voilà le résultat !

La page d’accueil

Ce que tu vois pour le moment, c’est la page d’accueil dont le contenu est spécifié dans le fichier HomeView.cs. Il s’agit là d’une ContentPage (littéralement une page avec du contenu) qui est le type de page le plus courant.

Et comme tu peux le voir, ce qu’elle définit est très simple:

Nom du fichier :HomeView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

public HomeView()
{
    BackgroundColor = Colors.Black;

    Content = new VerticalStackLayout
    {
        Children =
        {
            NightClubImage,
            EnterButton
        }
    }.CenterVertical();
}

C’est une page avec un arrière-plan noir et dont le contenu est défini par une image et un bouton qui sont empilés verticalement dans un VerticalStackLayout.

Et si tu veux savoir comment sont définis ces deux composants, il te suffit de regarder un peu plus bas dans le code de la page :

Nom du fichier :HomeView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

#region Controls

Image NightClubImage => new Image
{
    // .NET MAUI convertit les fichiers SVG au format PNG.
    Source = "night_club.png"
};

Button EnterButton => new Button
{
    Text = "ENTER",
    TextColor = Colors.White,
    BackgroundColor = Colors.Magenta,
    CornerRadius = 10
} .Bold() .Paddings(50, 2, 50, 2) .CenterHorizontal();

#endregion

Rien de très complexe à ce stade:

• On définit l’image du composant NightClubImage via la propriété “Source”,

• Et pour le bouton, on définit quelques propriétés de base comme le texte, la couleur, … mais tu aurais peut-être remarqué qu’on applique des fonctions au composant EnterButton :

  • Bold() pour mettre en gras le texte du bouton,

  • Paddings() pour rajouter un peu d’espace autour du texte, notamment à gauche et à droite du texte,

  • Et enfin, CenterHorizontal() pour positionner le texte au centre du bouton.

Tout juste ! Et on va voir comment déclencher l’exécution de code en cliquant sur ce bouton, mais pas n’importe comment. En effet, nous allons appliquer ce merveilleux patron de conception qu’est le Model-View-ViewModel (MVVM).

Plus d’articles dans la même série:

Ma toute première app en .NET MAUI
Installation du projet .NET MAUI
Première exécution de l’app .NET MAUI
Le MVVM, pour une application réussie
Naviguer vers une nouvelle page en .NET MAUI
Agencer les éléments d'une page .NET MAUI
Affichage du lecteur MP3 - Durée d'écoute
Affichage du lecteur MP3 - Contrôles de lecture
Affichage du lecteur MP3 - Volume
Écouter de la musique en .NET MAUI avec MediaElement
Contrôler la tête de lecture avec MediaElement
Contrôler le volume avec MediaElement
Télécharger un fichier audio en .NET MAUI
Écouter une playlist avec MediaElement
Créer des animations avec .NET MAUI pour une ambiance disco