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 as a file by the name 'myGUI.mlapp' it will change the classname to 'myGUI'. Calling the classname of the GUI creates an instance of the GUI and lauches it:

   myGUI;

Event driven

The GUI app is a class which create the components that are put on the canvas in a private method called 'createComponents'. This method is maintained automatically by Matlab and cannot be edited.

Components like buttons have events, like a button press. You can add a callback function for each event. The callback function will be declared as a method of the GUI class and is automatically coupled to the event (e.g. button press).

Add functionality

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.

The next example uses both ways for persistent object after adding an input argument, properties for the objects, a button and a callback function for the button.

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)
            app.myObject1.doSomething;
            app.myObject2.doSomething;
            doSomethingElseFunc();
        end
    end

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

The following code creates myObject1, passes the object to the GUI and launches the GUI.

   myObject1 = myClassName;
   MyGUI(myObject1);