Multimedia resources

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

S01E02: App Designer to create graphics interfaces, by Arthur Roué

Home›Multimedia resources›S01E02: App Designer to create graphics interfaces, by Arthur Roué

With the R2016a version, Mathworks introduced App Designer to help developers in the creation of graphics interfaces. It is designed to enable Matlab users to create professional interfaces quickly and easily with drag and drop. Over time, this new tool will replace its predecessor: GUIDE.

Since its release, App Designer has been enhanced by multiples features and components, such as uigridlayou for positioning components in a grid, compiling in Web App, table style customisation (uitable/uistyle), inserting hypertext links (uihyperlink)…

In this article, two features integrated into the App Designer will be presented:

  • addition a menu bar (R2017b)
  • creation of pop-up menus linked to graphic components (R2020a)

The menu bar, missing at the launch of the interface programming environment, has finally been reimplemented for uifigure components. Below is a simple example of menu creation, the callback function of which closes the application window:

From the R2020a version, the toolbar has also been made compatible with uifigure et is used in the same way as the previous example.

Pop-up menus also appeared in the R2020a version. The pop-up menu is a very powerful ergonomic tool that can be used with most graphic components. A right click on the object, followed by a menu selection, starts the callback function associated with the menu. Below is an example of a pop-up menu that makes it possible to export the content of an axis to a PNG file:

Mathworks documentation for these components’ properties:

The programme used for these illustrations is available below:

% 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

Consult the full saga

Share this post: