App Designer basics in MATLAB - Step-by-Step Execution

Concept Flow - App Designer basics

Open App Designer

↓

Create UI Components

↓

Set Properties

↓

Add Callbacks

↓

Run App

↓

Interact with UI

↓

App Responds to Events

↓

Close App

This flow shows the basic steps in App Designer: open it, add UI parts, set their properties, add code for interaction, run and use the app.

Execution Sample

MATLAB

app.Button = uibutton(app.UIFigure, 'push', 'Text', 'Click Me');
app.Button.ButtonPushedFcn = @(btn,event) disp('Button clicked');

% Run app
app.UIFigure.Visible = 'on';

This code creates a button in the app window and shows a message when clicked.

Execution Table

Step	Action	Component Created/Modified	Property Set/Callback	Output/Effect
1	Create push button	Button	Text = 'Click Me'	Button appears on UI
2	Assign callback	Button	ButtonPushedFcn = disp message	Button click triggers message
3	Show app window	UIFigure	Visible = 'on'	App window opens
4	User clicks button	Button	Callback runs	Console prints 'Button clicked'
5	User closes app	UIFigure	Visible = 'off'	App window closes

💡 App closes when user closes the window or stops the app

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
app.Button	undefined	uibutton object created	Callback assigned	Visible on UI	Callback triggered on click	Exists until app closes
app.UIFigure.Visible	'off'	'off'	'off'	'on'	'on'	'off' after close

Key Moments - 3 Insights

Why doesn't the button show up before setting app.UIFigure.Visible = 'on'?

The button is created but the app window is hidden (Visible = 'off') until step 3, so UI elements are not visible yet (see execution_table step 3).

What happens if the callback is not assigned to the button?

Clicking the button does nothing because no code runs on click (see execution_table step 2 vs step 4).

Can you create multiple UI components before showing the app?

Yes, you can create and set properties for many components before making the app visible (Visible = 'on'), so the user sees the full UI at once.

Visual Quiz - 3 Questions

Look at the execution table, what is the button's Text property after step 1?

A Empty string

B 'Click Me'

C 'Button'

D 'Push Button'

💡 Hint

Check the 'Property Set/Callback' column at step 1 in the execution_table.

At which step does the app window become visible to the user?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Output/Effect' column for when the app window opens.

If you remove the callback assignment in step 2, what happens when the button is clicked?

A Nothing happens

B The app crashes

C The button text changes

D A message is displayed

💡 Hint

Refer to the explanation in key_moments about callbacks and step 4 in execution_table.

Concept Snapshot

App Designer basics:
- Open App Designer to start
- Add UI components like buttons
- Set properties (e.g., Text)
- Add callbacks for interaction
- Run app by setting UIFigure.Visible = 'on'
- User interacts, callbacks respond
- Close app to end

Full Transcript

App Designer basics start by opening the tool, then adding UI components such as buttons. Each component has properties like Text that you set to control appearance. You add callbacks, which are pieces of code that run when the user interacts, like clicking a button. The app window is hidden by default and becomes visible when you set UIFigure.Visible to 'on'. When the user clicks the button, the callback runs and shows a message. The app closes when the user closes the window or stops the app. This flow helps beginners understand how to build simple interactive apps step-by-step.

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