Programming a GUI

Introduction

In Matlab a Graphical User Interface (GUI) can be build with the GUI editor, which called 'Design App' and is located in the first position on the APPS tab. The old GUI building tool was the GUIDE environment, which was used frequently for experimental interfaces.

WARNING: The GUIDE environment will be removed in future releases of Matlab. Do not use this for new programs!

Getting started

The opening page of the app designer shows a blank app, two templates and a series of examples. When opening the a blank app you will enter the app in 'Design View'. You can switch to 'Code View' in order to review and edit the underlying code.

Launching the GUI

When you save the GUI and save a file by the name 'myGUIname.mlapp' it will change the classname to 'myGUIname'. When you want to lauch the GUI you can now use:

   myGUIname;

Event driven

The GUI app is a class which create the components on the canvas. Components like buttons have events, like a buttonPress. You can add a callback function for each event. The callback function will be a method of the GUI class and is automatically coupled to the event (e.g. buttonPress).

Coding functionality

The functionality can be added to any callback function.

When calling functions or object methods, this can be done directly in a callback function.

When using persistent objects they can be created best by adding a property and in the 'startupFcn' callback or passed as an app input argument. Unfortunately the 'startupFcn' callback only appears after adding an app input argument.

Example after adding an input argument, a button and a callback function:

classdef MyGUI < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
        Button    matlab.ui.control.Button
    end
    
    properties (Access = private)
        myObject1 % Description
        myObject2 % Description
    end

    % Callbacks that handle component events
    methods (Access = private)
        % Code that executes after component creation
        function startupFcn(app, myObject1)
            app.myObject1 = myObject1;
            app.myObject2 = myClassName;
        end

        % Button pushed function: Button
        function ButtonPushed(app, event)
            myObject1.doSomething;
            myObject2.doSomething;
        end
    end

    % Component initialization
      .......................
      .......................
      .......................