Universal Windows Platform (partie 2) : Conception d’une application

par | Nov 10, 2020 | Technologie

Partagez
Tweetez
Partagez

Dans cette deuxième partie, nous allons voir comment se structure une application UWP, développée en C#. Les captures d’écran et les chemins d’accès mentionnés sont tirés de la version 2019 de Visual Studio, dans sa version entreprise. Attention, Visual Studio présente des différences d’interface et de fonctionnalités entre ses versions.

I – Initialisation d’une application utilisant l’architecture UWP

Dans Visual Studio, créez un nouveau projet. Dans les filtres mis à disposition, sélectionnez le langage C# dans la première liste déroulante, puis sélectionnez UWP dans le dernier filtre. Ces filtres vous permettront de sélectionner un projet UWP s’appuyant sur les langages C# et xaml.
Dans la liste des projets possibles, nous trouverons des projets ayant pour tag WinUI, comme le projet en surbrillance dans la capture ci-dessous. Pour plus de détails sur les éléments graphiques WinUI, je vous invite à lire la documentation existante sur msdn. Dans cet exemple, nous allons sélectionner « Application vide (Universal Windows) », pour créer une application UWP sans utiliser les contrôles WinUI.

Après avoir cliqué sur « suivant » et renseigné les informations sur le nom et la localisation du projet, une nouvelle fenêtre vous invite à sélectionner la version cible et la version minimale.

La version cible doit correspondre à la version de Windows sur laquelle on souhaite exécuter l’application. La version minimale correspond à la version minimum de Windows pour que l’application puisse s’exécuter.

Le choix des versions influe sur les fonctionnalités disponibles dans le .Net Framework. Par exemple, en sélectionnant une version cible inférieure à « 1803 (build 17134) », on ne pourra pas utiliser WinUI durant le développement de l’application. C’est aussi vrai pour la version minimale : si nous sélectionnons une version inférieure à « 1803 (build 17134) », nous ne pourrons pas utiliser WinUI dans le développement de l’application.

Remarque :

Si vous cherchez une fonctionnalité dans le Framework .Net et que vous ne la trouvez pas, vérifiez la version de l’application.

II – Structure du projet

Nous allons maintenant nous intéresser à la structure par défaut du projet, l’image ci-dessous montre l’ensemble des dossiers et fichiers créés à l’initialisation du projet.

Assets

Le dossier Assets regroupe l’ensemble des visuels de l’application, comme le logo et les splash screens.

App.xaml

Dans cet ensemble de fichiers, on trouve la partie interface utilisateur présente dans App.xaml et la partie code dans le fichier App.xaml.cs.

Dans le fichier App.xaml.cs, on trouve l’ensemble des méthodes appelées durant les différentes phases du cycle de vie de l’application (ouverture, mise en arrière-plan, fermeture …). En ouvrant ce fichier, on peut voir la méthode OnLaunched. Cette méthode contient l’ensemble du code exécuté durant le lancement de l’application. On va aussi retrouver par défaut une méthode gérant les erreurs au moment de la navigation vers une autre page : OnNavigationFailed, et une méthode OnSuspending, qui est appelée quand l’application est dans un état suspendu, mise en arrière-plan.

MainPage.xaml

Cet ensemble (interface utilisateur et logique de la page) correspond aux éléments de la première page lancés à l’ouverture de l’application.

III – Le manifeste

La gestion des autorisations d’une application UWP ressemble à la gestion des autorisations d’une application mobile : connexion internet, réseau privée, accès à la caméra, droit administrateur, accès aux contacts, ect. Si vous souhaitez utiliser la connexion internet du périphérique pour accéder à une WebApi, par exemple, il faut déclarer cette autorisation dans le manifeste de l’application.

Pour accéder au manifeste, faites un clic droit sur Properties puis cliquez sur Ouvrir. Puis, allez dans la section application et cliquez sur le bouton Manifeste du package.

Le manifeste de l’application se compose de plusieurs éléments :

Onglet Application

On y trouve les informations relatives à l’application, son orientation d’affichage durant l’exécution de l’application, l’affichage de notification sur l’écran de verrouillage…

Onglet Actifs visuels

Ici, on trouve l’ensemble des visuels de l’application (logo et splash screen). Ces visuels doivent être présents dans le dossier Assets avant d’être intégrés dans cette partie.

Onglet Capacités

L’onglet Capacités regroupe l’ensemble des autorisations de l’application : accès à une caméra, accès internet, accès aux contacts, Bluetooth, etc. Pour activer un module, il suffit de cocher la case correspondante.

Onglet Packages

On y trouve les informations relatives au package qui seront utilisées pour le déploiement de l’application.

IV – Création d’un Hello Word

Dans cet article, afin de faire une première initiation, nous allons créer une interface avec un bouton et une ligne de texte. Quand nous cliquerons sur le bouton, le texte à l’écran affichera un nouveau message.

Création de l’interface graphique

Dans le fichier MainPage.xaml nous allons ajouter un contrôle TextBlock et un contrôle Button, qui seront en charge respectivement d’afficher un texte et de réaliser une action après déclenchement du contrôle.

Comme vu précédemment, nous allons utiliser le langage xaml pour réaliser l’interface graphique. Le langage xaml est un langage semblable, dans sa structure, à du HTML. On utilise des balises pour afficher un contrôle à l’écran.

Code (xaml) :

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Vertical">        
        <TextBlock Text="{Binding TextAffichage}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="25" />            
        <Button Content="Change texte" Tapped="Button_Tapped" Margin="10" FontSize="25" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </StackPanel>
</Page>

Nous allons maintenant détailler certains passages du code ci-dessus.

On peut remarquer que la première balise de ce code est une balise Page. Cette première balise va déterminer le type de notre interface graphique. Généralement, nous trouvons deux types d’interfaces graphiques : les pages et les contrôles utilisateur (userControl).

  • Les pages sont des éléments de navigation dans notre application.
  • Les userControl sont utilisés pour créer un contrôle personnalisé qui s’inséra dans une page.

La seconde balise que nous rencontrons est la balise qui recevra l’ensemble des balises de notre interface graphique. Il faut savoir qu’une page ou un userControl ne peut avoir qu’une seule balise enfant dans sa structure. Par défaut, à la création d’une page ou d’un userControl , on retrouve la balise Grid,qui a été modifiée ici par la balise StackPanel pour simplifier l’exemple.

La première balise enfant de la balise StackPanel est la balise TextBlock. Cette balise est utilisée pour afficher du texte. On peut remarquer que le paramètre Text a pour valeur {Binding text}. Cette notation permet à l’interface graphique d’aller chercher des propriétés, de visibilité public, présent dans la partie Back-end.

Le second contrôle présent dans la balise StackPanel est un bouton. On peut voir l’événement Tapped, qui sera appelé au clic sur le bouton. L’événement Tapped présente l’avantage de pouvoir fonctionner sur des écrans tactiles ou non.

Création d’un viewModel

Dans cet exemple, nous allons utiliser une partie du design pattern MVVM pour montrer les possibilités offertes par ce design dans ce type d’application. Nous mettons certain aspect du design pattern de côté pour simplifier l’exemple.

L’utilisation d’un viewModel va nous permettre de mettre à jour les éléments graphiques de notre interface grâce au binding (couleur de texte, contenu d’un texte, taille …). Il existe de nombreux Nugets permettant de le faire en toute simplicité en toute simplicité. Je vous conseille le Nuget MvvmLight qui est simple à mettre en place et non intrusif. Dans cet article, nous nous passerons de l’utilisation d’un Nuget pour garder un exemple simple.

Afin de créer le viewModel, nous allons créer une classe MainPageViewModel à la racine de notre projet, qui héritera de l’interface INotifyPropertyChanged.

Code (langage c#) :

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App1
{

    public class MainPageViewModel : INotifyPropertyChanged
    {
        private const string _text1 = "Le chat mange dans la cuisine";
        private const string _text2 = "Le chat dort dans la chambre";

        public event PropertyChangedEventHandler PropertyChanged;

        public string TextAffichage { get; private set; }

        public MainPageViewModel()
        {
            TextAffichage = _text1;
        }

        public void ChangeText()
        {
            if (TextAffichage == _text1)
            {
                TextAffichage = _text2;
            }
            else
            {
                TextAffichage = _text1;
            }

            OnPropertyChanged("TextAffichage");
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Dans cette classe on retrouve deux constantes contenants les deux textes possibles à afficher à l’écran.

La propriété TextAffichage, dont l’accesseur est public, sera appelée par notre interface graphique (MainPage.xaml) pour alimenter la propriété Text du contrôle Textblock. Notez que le mutateur de la propriété TextAffichage a une visibilité privée, car dans cet exemple seul le viewModel aura le droit de changer cette valeur.

Dans le constructeur de la classe, nous allons affecter la valeur par défaut de la propriété TextAffichage. La méthode ChangeText nous permet de modifier le contenu de la propriété TextAffichage, à la tape sur le bouton. À la fin de cette méthode, nous allons appeler la méthode OnPropertyChanged, avec en paramètre le nom de la propriété modifiée. L’appel à la méthode OnPropertyChanged va déclencher l’évènement PropertyChanged, qui va informer l’interface graphique de la modification de la valeur de la propriété qui a été passée en paramètre.

Code l’interface utilisateur MainPage.xaml.cs

Dans le code de la page MainPage, nous allons ajouter une variable de type MainPageViewModel qui correspond au viewModel créé juste avant.

 

Code (langage c#) :

public sealed partial class MainPage : Page
    {

        MainPageViewModel _mainPageViewModel;

        public MainPage()
        {
            this.InitializeComponent();

            _mainPageViewModel = new MainPageViewModel();

            DataContext = _mainPageViewModel;
        }

        private void Button_Tapped(object sender, TappedRoutedEventArgs e)
        {
            _mainPageViewModel.ChangeText();
        }
    }

Dans le constructeur de la classe MainPage, on retrouve l’initialisation de la variable _mainPageViewModel, ainsi que l’affection de la propriété DataContext avec pour valeur _mainPageViewModel. L’affection du viewModel dans la propriété DataContext permet d’indiquer à notre interface graphique d’utiliser les propriétés présentes dans _mainPageViewModel pour les bindings.

Dans l’événement Tapped du bouton Button_Tapped, nous appelons directement la méthode souhaitée : ChangeText.

Exécution

Pour exécuter et débuger l’application, vous devez d’abord avoir passé votre configuration Windows sur le mode Développeur. Pour ce faire, allez dans Paramètres -> Mise à jour et sécurité -> Espace développeurs, puis sélectionnez Mode développeur.

Pour exécuter notre application, nous allons cliquer sur Ordinateur local ou utiliser le raccourci F5.

En exécutant directement notre application à partir de Visual Studio, cela a pour effet d’installer l’application sur la machine sélectionnée (ici le poste utilisé pour le développement).

Voici le résultat obtenu :

Et quand on clique sur le bouton :

Plus d’articles :

Le paiement mobile

Le paiement mobile

par | 22 Sep 2022 |

Quels sont les pros et les cons de ce nouveau mode de paiement ? Quelles sont les technologies d’intelligences artificielles derrière cette révolution de paiement ? Quels enjeux envisage-t-on dans un futur proche ?