Les ressources multimédia

https://www.acsysteme.com/wp-content/uploads/2021/07/menu_contextuel-750x422.gif

S01E02 : l’App Designer pour créer des interfaces graphiques, par Arthur ROUÉ

Accueil›Les ressources multimédia›S01E02 : l’App Designer pour créer des interfaces graphiques, par Arthur ROUÉ

Avec la version R2016a, Mathworks introduit l’App Designer pour assister le développeur dans sa création d’interface graphique. Il est conçu pour permettre aux utilisateurs Matlab de réaliser rapidement et facilement des interfaces professionnelles par simple glisser-déposer. À terme, ce nouvel outil a vocation à remplacer son prédécesseur : GUIDE.

Depuis son arrivée, l’App Designer a été enrichi de nombreuses fonctionnalités et composants, tels que le positionnement des composants dans une grille (uigridlayout), la compilation en Web App, la personnalisation du style des tables (uitable / uistyle), la possibilité d’insérer des liens hypertextes (uihyperlink)…

Dans cet article, on présentera deux fonctionnalités qui ont été intégrées à l’App Designer :

  • l’ajout d’une barre de menus (R2017b),
  • la création de menus contextuels associés aux composants graphiques (R2020a).

La barre de menus, absente au lancement de cet environnement de conception d’interfaces, a finalement été réimplémentée pour les composants uifigure. Ci-dessous un exemple simple de création d’un menu dont la fonction callback ferme la fenêtre de l’application :

A partir de la R2020a, la barre d’outils a elle aussi été rendu compatible avec les uifigure et s’utilise de la même façon que dans l’exemple précédent.

Les menus contextuels font aussi leur entrée dans la version R2020a. Outil ergonomique très puissant, le menu contextuel peut être utilisé sur la plupart des composants graphiques. Un clic-droit sur l’objet, suivi de la sélection du menu déclenche la fonction callback associée au menu. Ci-dessous un exemple de menu contextuel qui permet l’export du contenu d’un axe dans un fichier PNG :

Documentation Mathworks des propriétés des composants présentés :

Le code utilisé pour les illustrations est disponible ci-dessous :

	% Callbacks that handle component events
methods (Access = private)
	% Code that executes after component creation
    function tracer(app)
        % Afficher sinus et cosinus
        x  = 0:0.1:2*pi;
        y1 = cos(x);
        y2 = sin(x);
        plot(app.UIAxes, x, y1, 'b', x, y2, 'r-.', 'LineWidth', 2)
    end

    % Menu selected function: QuitterMenu
    function quitter(app, event)
        close(app.UIFigure);
    end

    % Menu selected function: ExporterenPNGMenu
    function exporter(app, event)
        [file, path] = uiputfile('*.png');
        exportgraphics(app.UIAxes, fullfile(path, file));
    end
end

Consultez la saga complète

Partager cet article :