Update figure-Based Apps to Use uifigure

The recommended way to programmatically build apps in MATLAB^® is to create a figure window for the app using the uifigure function and then populate the app using UI component functions, such as uibutton and uidropdown.

Previously, a common way to build apps was to create a figure window using the figure function, and then populate the app using UI controls created with the uicontrol function. You can continue to run and edit apps created in this way, but they do not take advantage of the latest app building functionality in MATLAB.

If you are developing existing figure-based apps or apps that use uicontrol, consider updating the apps to use uifigure and UI components.

Benefits of Updating Your App

Some benefits of updating your app to adopt the latest app building functionality include:

• Additional component types — Use additional app building components, such as:

  • Trees

  • Spinners

  • Hyperlinks

  • Instrumentation components, such as gauges and switches

  • HTML UI components that let you embed third-party visualizations in your app

• Modern layout and resize options — Simplify app layout code by using grid layout managers or component auto-resize behavior. This functionality provides an alternative to manually specifying the Position property or writing resize code in a SizeChangedFcn callback.

• Additional capabilities for existing components — Components such as tables and containers support additional customization options, including:

  • Making containers scrollable

  • Displaying table array data in table UI components

  • Styling individual table cells with different colors and fonts, icons, and formatted text

To see a list of all UI components, see App Building Components.

Overview for Updating Your App

To update your figure-based app to take advantage of the newer capabilities, follow these steps:

1. Update UIControl Objects and Callbacks — Replace calls to uicontrol with analogous UI component functions, and update component properties and callbacks.

2. Update App Figure and Containers — Replace calls to figure with uifigure, and update the properties of the Figure object and other app containers, such as Panel and TabGroup objects.

3. Update Dialog Boxes — Replace calls to dialog box functions, such as errordlg and warndlg, with dialog box functions configured for app building, such as uialert.

Differences Between figure-Based and uifigure-Based Apps

The major differences between figure-based apps and uifigure-based apps are due to differences in the underlying Figure object configuration. Understanding these differences helps you update your figure-based app and UIControl objects to use uifigure and UI components.

Differences in Default Configuration

Figures created using the figure function are configured for data exploration and visualization, while figures created using the uifigure function are configured for app building. This table lists the major differences in the default configurations of Figure objects created using the figure and uifigure functions.

Category	figure Configuration	uifigure Configuration	Explanation for Difference
Window grouping	The figure is docked in a figure container, and you can navigate between different figures using tabs or by tiling figures in the figure container. The WindowStyle property is 'docked'.	The UI figure is undocked as its own standalone window without a figure container. The WindowStyle property is 'normal'.	The figure container provides a way to manage, edit, and lay out multiple figure windows to compare data and graphics. This functionality is less relevant for apps.
Figure tools	The figure has a toolstrip with common data exploration functionality by default.	The UI figure does not have a toolstrip, toolbar, or menu bar by default.	The functionality that the figure toolstrip provides is more relevant for data exploration than for apps. In UI figures, you can create a custom toolbar and menu by using the uitoolbar and uimenu functions.
Figure size	The figure is a larger size by default.	The UI figure is a smaller size by default.	The figure is sized to provide a good starting point for the types of tasks it is designed for. You can modify the size of a figure by setting its Position property.
Ability to become current figure	The HandleVisibility property is 'on' by default. The figure and the objects it contains can become the current object.	The HandleVisibility property is 'off' by default. The UI figure and the objects it contains cannot become the current object.	The HandleVisibility property controls whether the figure or the objects it contains can become the current object (for example, using gcf or gca). Many graphics functions implicitly use gcf or gca to determine the target for operations such as plotting data. The HandleVisibility property of a UI figure is 'off' by default so that functions do not make unwanted changes to the app interface.
Resize behavior	The AutoResizeChildren property is 'off' by default. Resizing the figure window has no effect on the size of controls and containers that use pixel units by default, such as Table and UIControl objects.	The AutoResizeChildren property is 'on' by default. MATLAB automatically resizes UI components in the UI figure window whenever the window is resized.	Resizing UI components when a user resizes a UI figure window enables app use at any window size. The auto-resize behavior in UI figures provides a lightweight default behavior in addition to other resize management options, such as grid layout managers.
Container location, size, and units	Panel, ButtonGroup, and TabGroup objects parented to the figure occupy the full size of the figure window, and have Units set to 'normalized'.	All containers and UI components parented to the UI figure have a set default location and size, and have Units set to 'pixels'.	Most data exploration functionality uses normalized units, whereas most app building functionality uses pixel units. In an app, if you want to automatically resize containers or components based on the size of their parent in a UI figure, create a grid layout manager using the uigridlayout function.