App Designer basics in MATLAB

Introduction

App Designer helps you build interactive apps with a visual interface. You can create buttons, plots, and controls easily without writing all the code from scratch.

You want to make a simple tool to analyze data with buttons and graphs.

You need to share a data visualization app with others who don’t know coding.

You want to create a user-friendly interface for your MATLAB functions.

You want to test ideas quickly with interactive controls like sliders and dropdowns.

Syntax

MATLAB

classdef MyApp < matlab.apps.AppBase
    properties (Access = public)
        UIFigure matlab.ui.Figure
        Button matlab.ui.control.Button
    end

    methods (Access = private)
        function ButtonPushed(app, event)
            disp('Button clicked!')
        end
    end

    methods (Access = public)
        function app = MyApp
            createComponents(app)
        end

        function createComponents(app)
            app.UIFigure = uifigure('Name', 'My App');
            app.Button = uibutton(app.UIFigure, 'push', 'Text', 'Click Me');
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
        end
    end
end

App Designer apps are MATLAB classes that inherit from matlab.apps.AppBase.

UI components like buttons and figures are properties of the app class.

Examples

Create a figure window and add a push button with label 'Press'.

MATLAB

app.UIFigure = uifigure('Name', 'Simple App');
app.Button = uibutton(app.UIFigure, 'push', 'Text', 'Press');

Assign a simple callback function to the button that prints a message when clicked.

MATLAB

app.Button.ButtonPushedFcn = @(src,event) disp('Button pressed!');

Define a callback function that shows a popup alert when the button is clicked.

MATLAB

function ButtonPushed(app, event)
    uialert(app.UIFigure, 'Hello from App Designer!', 'Greeting');
end

Sample Program

This app creates a window with a button. When you click the button, a popup message appears.

MATLAB

classdef SimpleApp < matlab.apps.AppBase
    properties (Access = public)
        UIFigure matlab.ui.Figure
        Button matlab.ui.control.Button
    end

    methods (Access = private)
        function ButtonPushed(app, event)
            uialert(app.UIFigure, 'You clicked the button!', 'Info');
        end
    end

    methods (Access = public)
        function app = SimpleApp
            app.UIFigure = uifigure('Name', 'Simple App');
            app.Button = uibutton(app.UIFigure, 'push', 'Text', 'Click Me');
            app.Button.Position = [100 100 100 30];
            app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);
        end
    end
end

% To run the app, create an instance:
app = SimpleApp;

Important Notes

Use uifigure to create the app window.

Assign callback functions to UI controls to respond to user actions.

App Designer apps are saved as class files and run by creating an instance.

Summary

App Designer lets you build interactive apps visually and with code.

Apps are MATLAB classes with UI components as properties.

Callbacks handle user actions like button clicks.

Practice

1. What is the main purpose of uifigure in MATLAB App Designer?

easy

A. To add a button to the app

B. To create the main window for the app

C. To display text labels

D. To plot graphs automatically

Solution

1. Step 1: Understand the role of uifigure

   uifigure creates the main window or figure where the app components appear.

2. Step 2: Differentiate from other components

   Buttons and labels are added inside this window but are created with uibutton and uilabel.

3. Final Answer:

   To create the main window for the app -> Option B

4. Quick Check:

   Main window = uifigure [OK]

Hint: Remember: uifigure = app window [OK]

Common Mistakes:

• Confusing uifigure with uibutton or uilabel
• Thinking uifigure creates buttons or labels
• Assuming uifigure plots graphs automatically

2. Which of the following is the correct syntax to create a button in App Designer?

easy

A. btn = uibutton(uifigure, 'Text', 'Click Me');

B. btn = uibutton(uifigure, 'Click Me');

C. btn = uibutton('Text', 'Click Me');

D. btn = uibutton('Click Me');

Solution

1. Step 1: Recall uibutton syntax

   In App Designer, uibutton requires the parent figure as the first argument, then property name-value pairs.

2. Step 2: Check each option

   btn = uibutton(uifigure, 'Text', 'Click Me'); correctly uses uibutton(uifigure, 'Text', 'Click Me'). Others miss the parent or property name.

3. Final Answer:

   btn = uibutton(uifigure, 'Text', 'Click Me'); -> Option A

4. Quick Check:

   Button needs parent + 'Text' property [OK]

Hint: uibutton needs parent and 'Text' property [OK]

Common Mistakes:

• Omitting the parent figure argument
• Passing text without 'Text' property name
• Using wrong argument order

3. What will be the output when the following code runs in App Designer?

fig = uifigure;
lbl = uilabel(fig, 'Text', 'Hello');
lbl.Position = [100 100 100 22];

medium

A. No label appears because uilabel needs a callback

B. An error because Position is not a valid property

C. A label appears but text is empty

D. A label with text 'Hello' appears at position (100,100)

Solution

1. Step 1: Understand label creation

   The code creates a figure, then a label with text 'Hello' inside it.

2. Step 2: Position property sets label location

   Setting Position = [100 100 100 22] places the label at x=100, y=100 with width 100 and height 22.

3. Final Answer:

   A label with text 'Hello' appears at position (100,100) -> Option D

4. Quick Check:

   uilabel + Position sets label location [OK]

Hint: Position sets label location and size [OK]

Common Mistakes:

• Thinking Position is invalid property
• Assuming label text is empty by default
• Believing callback is needed to show label

4. Identify the error in this App Designer code snippet:

fig = uifigure;
btn = uibutton('Text', 'Press');
btn.Position = [50 50 100 30];

medium

A. Missing parent figure argument in uibutton

B. Position property cannot be set for buttons

C. Text property should be set after creating button

D. uifigure must be called after uibutton

Solution

1. Step 1: Check uibutton creation syntax

   uibutton requires the parent figure as the first argument to attach the button to the window.

2. Step 2: Identify missing parent

   The code calls uibutton('Text', 'Press') without specifying fig as parent, causing an error.

3. Final Answer:

   Missing parent figure argument in uibutton -> Option A

4. Quick Check:

   uibutton needs parent figure first [OK]

Hint: Always pass parent figure first to uibutton [OK]

Common Mistakes:

• Forgetting to specify parent figure
• Thinking Position can't be set for buttons
• Calling uifigure after uibutton

5. You want to create a button that changes a label's text to 'Clicked!' when pressed. Which code snippet correctly sets up the callback in App Designer?

hard

A. btn = uibutton(fig, 'Text', 'Press'); btn.Callback = @(btn,event) lbl.Text = 'Clicked!';

B. btn = uibutton(fig, 'Text', 'Press', ButtonPushedFcn, @(btn,event) lbl.Text = 'Clicked!');

C. btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!';

D. btn = uibutton(fig, 'Text', 'Press', 'Callback', @(btn,event) lbl.Text = 'Clicked!');

Solution

1. Step 1: Understand callback property name

   In App Designer, the button's callback is set using the ButtonPushedFcn property, usually assigned after creation.

2. Step 2: Check syntax correctness

   btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!'; correctly creates the button then assigns ButtonPushedFcn with an anonymous function to change label text.

3. Final Answer:

   btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!'; -> Option C

4. Quick Check:

   Set ButtonPushedFcn after button creation [OK]

Hint: Assign ButtonPushedFcn after creating button [OK]

Common Mistakes:

• Using 'Callback' instead of 'ButtonPushedFcn'
• Trying to set callback inside uibutton arguments
• Using wrong property names for callback