Develop `uifigure`-Based Apps

Develop apps programmatically using UI figures designed for app building (uifigure function)

Design and edit apps programmatically by coding their layout and behavior using MATLAB^® functions. The uifigure function creates a figure that is specially configured for app building and serves as the container for your user interface. UI figures support the same types of modern graphics and interactive UI components that App Designer supports.

Functions

expand all

Containers

`uifigure`	Create figure for designing apps
`uigridlayout`	Create grid layout manager
`uipanel`	Create panel container
`uitabgroup`	Create container for tabbed panels
`uitab`	Create tabbed panel

Axes

`uiaxes`	Create UI axes for plots in apps
`axes`	Create Cartesian axes
`geoaxes`	Create geographic axes
`polaraxes`	Create polar axes

Components

Common Components

`uibutton`	Create push button or state button component
`uibuttongroup`	Create button group to manage radio buttons and toggle buttons
`uicheckbox`	Create check box component
`uicolorpicker`	Create color picker component (Since R2024a)
`uidatepicker`	Create date picker component
`uidropdown`	Create drop-down component
`uieditfield`	Create text or numeric edit field component
`uihyperlink`	Create hyperlink component (Since R2021a)
`uiimage`	Create image component
`uilabel`	Create label component
`uilistbox`	Create list box component
`uiradiobutton`	Create radio button component
`uislider`	Create slider or range slider component
`uispinner`	Create spinner component
`uitable`	Create table user interface component
`uitextarea`	Create text area component
`uitogglebutton`	Create toggle button component
`uitree`	Create tree or check box tree component
`uitreenode`	Create tree node component

Figure Tools

`uicontextmenu`	Create context menu component
`uimenu`	Create menu or menu items
`uipushtool`	Create push tool in toolbar
`uitoggletool`	Create toggle tool in toolbar
`uitoolbar`	Create toolbar in figure

Instrumentation Components

`uigauge`	Create gauge component
`uiknob`	Create knob component
`uilamp`	Create lamp component
`uiswitch`	Create slider switch, rocker switch, or toggle switch component

Extensible Components

uihtml Create HTML UI component

Component Control and Style

Styleable Components

`uistyle`	Create style for UI component
`addStyle`	Add style to UI component
`removeStyle`	Remove style from UI component

Tree Node

`expand`	Expand tree node
`collapse`	Collapse tree node
`move`	Move tree node

Context Menu

open Open context menu at location within UI figure (Since R2020a)

Scrollable Components

`scroll`	Scroll to location within component
`isInScrollView`	Determine if component is visible in scrollable container (Since R2022a)

Focusable Components

focus Focus UI component (Since R2022a)

Extensible Components

sendEventToHTMLSource Send HTML UI component event from MATLAB to JavaScript (Since R2023a)

Layout

`uistack`	Reorder visual stacking of UI components
`movegui`	Move figure to specified location on screen

Dialogs and Notifications

`uialert`	Display alert dialog box
`uiconfirm`	Create confirmation dialog box
`uiprogressdlg`	Create progress dialog box
`uisetcolor`	Open color picker
`uigetfile`	Open file selection dialog box
`uiputfile`	Open dialog box for saving files
`uigetdir`	Open folder selection dialog box
`uiopen`	Open file selection dialog box and load selected file into workspace
`uisave`	Open dialog box for saving variables to MAT-file

Properties

expand all

Containers

UI Figure Properties	Control UI figure appearance and behavior for `uifigure`-based apps
`GridLayout`	Grid layout manager UI container
`Panel`	Panel UI container
`TabGroup`	Tab group UI container
`Tab`	Tab UI container

Axes

UIAxes Properties	UI axes appearance and behavior
Axes Properties	Axes appearance and behavior
GeographicAxes Properties	Geographic axes appearance and behavior
PolarAxes Properties	Polar axes appearance and behavior

Components

Common Components

`Button`	Button UI component
`ButtonGroup`	Button group UI container
`CheckBox`	Check box UI component
`CheckBoxTree`	Check box tree UI component (Since R2021a)
`ColorPicker`	Color picker UI component (Since R2024a)
`DatePicker`	Date picker UI component
`DropDown`	Drop-down UI component
`EditField`	Edit field UI component
`Hyperlink`	Hyperlink UI component (Since R2021a)
`Image`	Image UI component
`Label`	Label UI component
`ListBox`	List box UI component
`NumericEditField`	Numeric edit field UI component
`ProgressDialog`	Progress dialog box
`RadioButton`	Radio button UI component
`RangeSlider`	Range slider UI component (Since R2023b)
`Slider`	Slider UI component
`Spinner`	Spinner UI component
`StateButton`	State button UI component
`Table`	Table UI component
`TextArea`	Text area UI component
`ToggleButton`	Toggle button UI component
`Tree`	Tree UI component
`TreeNode`	Tree node UI component

Figure Tools

`ContextMenu`	Context menu UI component
`Menu`	Menu UI component
`PushTool`	Push tool UI component
`ToggleTool`	Toggle tool UI component
`Toolbar`	Toolbar UI component

Instrumentation Components

`DiscreteKnob`	Discrete knob UI component
`Gauge`	Gauge UI component
`Knob`	Knob UI component
`Lamp`	Lamp UI component
`LinearGauge`	Linear gauge UI component
`NinetyDegreeGauge`	Ninety-degree gauge UI component
`RockerSwitch`	Rocker switch UI component
`SemicircularGauge`	Semicircular gauge UI component
`Switch`	Switch UI component
`ToggleSwitch`	Toggle switch UI component

Extensible Components

HTML HTML UI component

Component Control and Style

Style Properties

Style for table or tree UI component

Topics

Learn the Basics of Programmatic App Building

Create and Run a Simple Programmatic App
Step through the process of creating a simple app programmatically.
App Building Components
View samples of the UI components available for building modern apps.
Ways to Build Apps
Choose an app building approach that best suits your project requirements and your preferred workflow.

Customize App Appearance

Lay Out Apps Programmatically
Manage the size, location, and front-to-back order of components programmatically.
Manage App Resize Behavior Programmatically
Manage the default automatic resizing behavior for programmatic apps.
Programmatic App That Displays a Table
Create a table UI component and modify its appearance and behavior programmatically.
Format Tabular Data in Apps
Control how different data types are displayed when using table array data in an app.
Style Cells in a Table UI Component
Color cells, format text, and display icons in a table UI component.
Create HTML Content in Apps
Create an HTML file to embed HTML, JavaScript^®, or CSS content in your app that can trigger or respond to data changes.

Program App Behavior

Create Callbacks for Apps Created Programmatically
Write callbacks to control the behavior of apps you create programmatically.
Share Data Among Callbacks
Manage and share data in your app using different techniques.
Interrupt Callback Execution
Learn how to control whether callbacks can be interrupted by other callbacks.
Create Responsive Apps
Apply techniques to improve the performance and responsiveness of your apps.
Improve App Startup Time
Improve the time it takes for your app to load by populating only the content that is visible.
Debug HTML Content in Apps
Simulate how data is sent between MATLAB and JavaScript in an HTML UI component.

Related Information

Test Apps

Develop uifigure-Based Apps

Functions

Containers

Axes

Components

Common Components

Figure Tools

Instrumentation Components

Extensible Components

Component Control and Style

Styleable Components

Tree Node

Context Menu

Scrollable Components

Focusable Components

Extensible Components

Layout

Dialogs and Notifications

Properties

Containers

Axes

Components

Common Components

Figure Tools

Instrumentation Components

Extensible Components

Component Control and Style

Topics

Learn the Basics of Programmatic App Building

Customize App Appearance

Program App Behavior

Related Information

Develop `uifigure`-Based Apps