MATLAB est un puissant outil qui permet de saisir des instructions sous-forme de lignes de commandes, de façon interactive. Il permet de developper des algorithmes complexes, d'analyser et visualiser des données; il est aussi utilisé pour la simulation, la modélisation, le calcul numerique, scientifique et technique. MATLAB est commercialisé par la société Mathworks.
En plus du noyau, MATLAB possède des blibliothèques de fonctions et d'autres outils de développement sous forme de "toolbox" adaptés à chaque domaine scientifique.

Développer une interface graphique utilisateur, n'est souvent pas chose aisée pour une personne non expérimentée en informatique.
Sous MATLAB les interfaces graphiques utiliseurs peuvent être créer de façon simple et conviviale, null besoin d'avoir des connaissances approfondies en langage de programmation C++, grâce à la souplesse d'utilisation de l'outil App Designer.

Nous nous proposons de présenter dans cet article, sous forme de tutoriels simples, les premiers pas dans App Designer.

Présentation de App Designer

Pour développer une interface utilisateur, on peut procéder de deux manières:

• De façon interactive avec App Designer,
• Ou par programmation à l'aide des fonctions MATLAB.
  
  

App Designer est un riche environnement interactif proposé dans MATLAB depuis
la version R2016a. Avant cette date, les interfaçes graphique utilisateurs
étaient construites à l'aide de GUIDE et les deux outils ont toujours cohabités ensemble. Mais d'après Mathworks, GUIDE ne sera plus proposé dans les futures version MATLAB.

App Designer apparaît désormais comme l'environnement recommandé pour développer des interfaces graphiques interactives dans MATLAB.

Dans App Designer, la face avant de l'interface graphique et le code source
associé fonctionnent de façon interactive, à savoir que, tout changement sur
l'un entraîne des changements sur l'autre. Cet outil possède une vaste
bibliothèque de symboles graphiques, largement suffisante, pour débuter dans la
programmation d'interfaces graphiques.
Si vous le souhaitez, il est possible de s'initier gratuitement à App Designer, sans avoir de licence Matlab, ni même d'installer le logiciel dans votre ordianteur, grâce à "matlab online". Pour cela il faudra d'abord créer un compte chez Mathworks, et avec ce compte vous disposez de 5 Go d'espace de stockage dans le Cloud Matlab (au moment où ces lignes sont rédigées), pour enregistrer et exécuter vos programmes.

L'environnement App Designer

Pour lancer App Designer, il faudra démarrer MATLAB:

Dans la fenêtre des commandes MATLAB, taper simplement

>>appdesigner

Ou dans l'onglet APPS, cliquer sur Design App.

En cliquant sur Blank App, on obtient:

Parmi les trois onglets au dessus:

DESIGNER : permet la gestion des fichiers, le partage des interfaces créées et l'exécution du programme.

CANVAS : ici se trouvent différents outils de mise en forme de la face avant de l'interface graphique.

VIEW : ici se trouvent différents outils pour activer la grille, faire un zoom, rendre "responsive" l'interface graphique, ou pour des repères d'aide au placement des composants.

Par défaut l'environnement App Designer est composé de trois fenêtres principales:

1. 1. La bibliothèque de composants,
   2. La face avant de l'interface graphique,
   3. L'explorateur de composants.

Dans la bilbliothèque de composants: se trouvent tous les symboles graphiques nécessaires pour construire l'interface graphique utilisateur.

La face avant possède deux onglets:
L'interface graphique utilisateur (Design View): c'est la zone de création de la face avant, les composants seront placés ici.

Le code source (Code View) : contient le code source de l'interface graphique. Dans App Designer, les figures sont des classes dans lesquelles les objets sont les composants crées sur la face avant. Chaque composants possèdes ses propriétés, et des méthodes qu'on peut lui appliquer.

Dans l'explorateur de composants se trouve la liste de tous les objets
composants crées ou placés sur la face avant, ainsi que leurs propriétés.

Créer ma première interface graphique

Nous allons créer une interface graphique, qui affiche le message "Hello World!" lorsque l'utilisateur va cliquer sur un bouton "Afficher".

Outils nécessaires:

• • • MATLAB version R2023b;
    • APP Designer.

Après avoir ouvert MATLAB, il faut lancer App Designer dans la fenêtre de commandes ou par l'onglet APP.

Cliquer sur  "Blank App", puis placer un champ d'affichage de texte, puis un bouton.

renommer le bouton en cliquant sur son étiquette (label). Puis, enregistrer puis exécuter le programme.

On constate que rien ne se passe. Il faut donc créer une fonction qui se lance automatiquement lorsque l'usager va cliquer sur le bouton. Dans MATLAB, ce type de fonctions s'appelle un "Callback".

Pour créer le Callback du bouton, cliquer sur le bouton droit de la souris, puis sur Callback.

Le curseur de la souris sera placé à l'endroit du code où il faudra écrire les instructions qui vont être exécutées pour ce Callback. Il faut remarquer que les zones à fond gris ne sont pas modifiables.

Alors il suffit de compléter la zone réservée pour le code:

Le message "Hello World!" sera envoyé dans le champ d'affichage ici ce sera l'objet EditField. On va donc appliquer la méthode d'écriture d'une valeur Value à cet objet; tout objet d'une figure sera précédé de "app" dans App designer; soit

app.EditField.Value = "Hello World!";

Il suffit d'enregistrer et exécuter pour obtenir ceci lorsque l'usager clique sur "Afficher":

Ci-dessous la vidéo relative à cet article.

Grâce à son environnement riche et moderne, nous avons réalisé faciliement notre première interface graphique avec de App Designer, en utilisant le mode de création interactif.