App Designer basics in MATLAB - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this callback function?

Consider this MATLAB App Designer callback function for a button press. What will be displayed in the label after pressing the button once?

MATLAB

function ButtonPushed(app, event)
    app.Label.Text = ['Hello, ', app.NameEditField.Value, '!'];
end

A Error: Unsupported operator '+' for strings

B Hello, +app.NameEditField.Value+ !

C Hello, app.NameEditField.Value!

D Hello, John!

💡 Hint

Remember how to concatenate strings in MATLAB App Designer.

In MATLAB, the '+' operator does not concatenate strings. Use square brackets [] or strcat to combine strings.

❓ Predict Output

intermediate

What happens when this app starts?

This startup function runs when the app opens. What will be the initial text shown in the label?

MATLAB

function startupFcn(app)
    app.Label.Text = sprintf('Welcome, %s!', app.UserName);
end

A Welcome, !

B Welcome, (value of app.UserName)!

C Welcome, undefined!

D Error: app.UserName is undefined

💡 Hint

Check if app.UserName has a default value before startupFcn runs.

If app.UserName is not set before startupFcn, it is empty, so the label shows 'Welcome, !'.

🔧 Debug

advanced

Why does this button callback cause an error?

This button callback tries to update a numeric edit field but causes an error. Identify the cause.

MATLAB

function ButtonPushed(app, event)
    app.NumericEditField.Value = '123';
end

A Error because ButtonPushed is missing input arguments

B No error; the value updates correctly

C Error because NumericEditField.Value expects a number, not a string

D Error because NumericEditField does not exist

💡 Hint

Check the data type expected by NumericEditField.Value.

NumericEditField.Value must be numeric. Assigning a string causes a type mismatch error.

📝 Syntax

advanced

Which option correctly defines a property in App Designer?

You want to add a property to store a count in your app. Which syntax is correct?

A

properties
    count = 0
end

B

properties
    count;
end

C

property
    count = 0;
end

D

properties
    count = 0;
end

💡 Hint

Check the keywords and punctuation for defining properties.

Properties block uses 'properties' keyword and each property ends with a semicolon.

🚀 Application

expert

How to update UI components safely from a timer callback?

You have a timer that updates a label every second. What is the best way to update the label text inside the timer callback to avoid errors?

MATLAB

function startTimer(app)
    t = timer('ExecutionMode','fixedRate','Period',1,...
        'TimerFcn',@(~,~) updateLabel(app));
    start(t);
end

function updateLabel(app)
    % Update label text here
end

A Use app.UIFigure.UserData to store text and update label in main thread

B Directly set app.Label.Text inside updateLabel without any precautions

C Use 'drawnow' after setting app.Label.Text to force update

D Use 'app.UIFigure' handle with 'feval' to update label in main thread

💡 Hint

Timer callbacks execute in the MATLAB thread, allowing direct UI updates.

In MATLAB App Designer, timer callbacks run in the MATLAB thread, so directly setting app.Label.Text works without special handling.

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