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 converts SVG files to PNG files.
    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:

Introduction
Installer le projet
Première exécution du projet
MVVM, la clé de la réussite
D’une page à l’autre
Les fondations
Le temps d’écoute
Les contrôles de lecture du média
Le niveau sonore
Écouter de la musique
Contrôler la tête de lecture