App Designer basics in MATLAB - Mini Project: Build & Apply

MATLAB UI App basics

📖 Scenario: You want to create a simple MATLAB app that shows a button and a label. When you click the button, the label text changes to say "Hello, World!".

🎯 Goal: Build a basic MATLAB app programmatically with a button and a label. Clicking the button updates the label text.

📋 What You'll Learn

Create a UI figure window

Add a button with the text 'Click Me!'

Add a label with initial text 'Waiting for click...'

Write a callback function for the button to change the label text to 'Hello, World!'

💡 Why This Matters

🌍 Real World

Creating simple interactive apps helps automate tasks and build user-friendly tools in engineering and science.

💼 Career

Knowing how to build basic UI apps is useful for MATLAB developers, engineers, and researchers who build graphical interfaces for their programs.

1

Create the UI figure and add a button

Create a UI figure called app.UIFigure using uifigure(). Then add a button called app.Button to app.UIFigure with the text 'Click Me!' using uibutton().

MATLAB

app.UIFigure = uifigure();
% Your code here to add the button

Hint

Use uifigure() to create the window and uibutton() to add the button inside it.

2

Add a label to the UI figure

Add a label called app.Label to app.UIFigure with the initial text 'Waiting for click...' using uilabel().

MATLAB

app.UIFigure = uifigure();
app.Button = uibutton(app.UIFigure, 'Text', 'Click Me!');
% Your code here to add the label

Hint

Use uilabel() to add the label inside the UI figure.

3

Write the button callback function

Write the button callback using an anonymous function that changes app.Label.Text to 'Hello, World!'. Assign it to app.Button.ButtonPushedFcn.

MATLAB

app.UIFigure = uifigure();
app.Button = uibutton(app.UIFigure, 'Text', 'Click Me!');
app.Label = uilabel(app.UIFigure, 'Text', 'Waiting for click...');
% Your code here to create the callback and assign it

Hint

Use an anonymous function @(src, event) set(app.Label, 'Text', 'Hello, World!') and assign it to the button's ButtonPushedFcn.

4

Run the app and see the output

Run the app code. When you click the button labeled 'Click Me!', the label text should change to 'Hello, World!'. Modify the callback to use disp(app.Label.Text = 'Hello, World!') so the text displays in the command window.

MATLAB

app.UIFigure = uifigure();
app.Button = uibutton(app.UIFigure, 'Text', 'Click Me!');
app.Label = uilabel(app.UIFigure, 'Text', 'Waiting for click...');
app.Button.ButtonPushedFcn = @(src, event) set(app.Label, 'Text', 'Hello, World!');
% Your code here to display the label text

Hint

Modify the anonymous function callback to disp('Hello, World!') to show the changed text in the command window.

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