Migrating GUIDE Apps to App Designer

App Designer is the recommended environment for building apps. Migrating your GUIDE apps (GUIs) to App Designer allows you to take advantage of features that GUIDE does not offer. For example, App Designer provides:

  • An enhanced UI component set and design environment

  • A robust programming editor and workflow

  • The ability to create and share a standalone desktop or web app (requires MATLAB® Compiler™)

If you have existing apps that you developed in GUIDE, consider migrating them to App Designer using the GUIDE to App Designer Migration Tool for MATLAB on mathworks.com.

Features of the Migration Tool

The migration tool helps you convert your apps by reading in a GUIDE .fig file and automatically generating the App Designer equivalent components, layout, and code in an .mlapp file. This semi-automated code conversion also a creates a migration report that suggests next steps for any manual code updates that may be needed. Some features of the tool are described in the table below.

Migration Tool FeaturesDescription
File ConversionRead in a GUIDE .fig file and associated code and then generate an App Designer .mlapp file.
Components and App Layout
  • Convert components and property configurations to App Designer equivalents.

  • Preserve the layout of the apps.

Callback Code
  • Retain a copy of the GUIDE callback code and user-defined functions in the .mlapp file.

  • Provide suggestions for manual update.

App Designer uses new components and object-oriented code. Interactions or behaviors that you programmed in your old GUIDE-style code need to be manually migrated to App Designer-style code.

Migration Report
  • Summarize actions successfully completed by the migration tool.

  • List any limitations or unsupported functionality, with workarounds if available.

  • Provide steps for updating callbacks to make them compatible with App Designer.

Aids for Migrating GUIDE Code to App Designer

App Designer and GUIDE have different code structures, callback syntaxes, and techniques for accessing UI components and sharing data. Understanding these differences is useful when migrating code. The table below summarizes some of these differences.

DifferenceGUIDE App DesignerMore Information
Using Figures and Graphics

GUIDE calls the figure function to create the app window.

GUIDE calls the axes function to create axes for displaying plots.

All MATLAB graphics functions are supported. There is no need to specify the target axes.

App Designer calls the uifigure function to create the app window.

App Designer calls the uiaxes function to create axes for displaying plots.

Most MATLAB graphics functions are supported. You must specify the target axes.

Displaying Graphics in App Designer
Using Components

GUIDE creates most components with the uicontrol function. Fewer components are available.

App Designer creates each UI component with its own dedicated function. More components are available, including Tree, Gauge, TabGroup, and DatePicker.

App Designer Components
Accessing Component Properties

GUIDE uses set and get to access component properties, and uses handles to specify a component.

For example,
name = get(handles.Fig,'Name')

App Designer supports set and get, but encourages the use of dot notation to access component properties, and uses app to specify a component.

For example,
name = app.UIFigure.Name

Write Callbacks in App Designer
Managing App Code

The code is defined as a main function that can call local functions. All code is editable.

The code is defined as a MATLAB class. Only callbacks, helper functions, and custom properties are editable.

Managing Code in App Designer Code View
Writing Callbacks

Required callback input arguments are handles, hObject, and eventdata.

For example,
myCallback(hObject,evendata,handles)

Required callback input arguments are app and event.

For example,
myCallback(app,event)

Write Callbacks in App Designer
Sharing Data

To store and share data between callbacks and functions, use the UserData property, the handles structure, or the guidata, setappdata, or getappdata functions.

For example,
handles.currSelection = selection;
guidata(hObject,handles);

To store and share data between callbacks and functions, use custom properties to create variables.

For example,
app.currSelection = selection

Share Data Within App Designer Apps

Related Topics