App Designer works with methods rather than functions.
The difference is that your entire GUI is an instance of a sub-class of matlab.apps.AppBase.
You can read the name of this sub-class in the first line of the code view, which, by default is:
classdef app < matlab.apps.AppBase
You can see a class as a structure that can contains both variables (called properties) and functions (called methods).
Among these methods, there will aways be one named after the GUI class itself, i.e.
app
If you look in the code view, the second to last method is basically a function having the same name of the class itself:
function app = app
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
if nargout == 0
clear app
end
end
This method is called the constructor method and it's the first method called when you open your GUI.
This method defines the variable app which contains the instance of the your GUI's class.
The main advantage of classes is that the variable app is shared among all methods (this is not the case for static methods, but let's keep it simple for the moment).
If we see this variable as a structure, you can access all the fields (called properties when talking about classes) from every function (method) that you call.
You only have to pre-define the properties inside the dedicated block:
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
end
From the default template of the App Designer, you can see the property UIFigure being initially defined.
When you open your GUI, the constructor method executes and first thing first calls the method createComponents(app)
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'MATLAB App';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
In here an uifigure object is stored in the property app.UIFigure.
This create your GUI environment where all graphical components are defined.
When you add a component, you will see this function auotmaticaly updated to add such component in the GUI.
To make our GUI execute code, you can do two things:
- you can associate a method to a callback of a certain graphical component
- you can create a method and call it from the constructor
Just remember that when you include the variable app as an input to a method, you can access every property (and its value) from inside that method.
----------------------------------------------------------------------------------------------------------------
Have a look at the example attached to this answer.
The file is named exampleApp like the sub-class itself in the first row.
You can search for the method called and you know that is the constructor.
I later added a button and a numeric field.
The constructor method calls the createComponents method which create the uifigure, the button and the numeric edit field.
In particular, when creating the button, we define the callback function of the button as:
exampleApp.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
This means that every time we push the button, the ButtonPushed method is executed.
By looking at this method, you can see as the input is the variable exampleApp which contains all graphic objects of our GUI.
It reads the value of the numeric field and it adds 1 to it.
Check also the properties block, and you will see that all graphical objects names are in there, automatically added by App Designer.
--------------------------------------------------------------------------------------------------------------------
To conclude, you can pass variable between methods by either storing them into properties, or by using additional inputs into your methods.
If this or any other answer was helpful, please remember to vote it as best answer to help other people.
