Documentation

This is machine translation

Translated by Microsoft
Mouseover text to see original. Click the button below to return to the English verison of the page.

Note: This page has been translated by MathWorks. Please click here
To view all translated materals including this page, select Japan from the country navigator on the bottom of this page.

Differences Between App Designer and GUIDE

App Designer is a design environment for building apps. Although it provides many of the same controls as GUIDE, the process for building apps is different. Most significantly, the graphics support, generated code, component access, callback coding, and plotting component are different. This table summarizes the differences.

What Is DifferentIn GUIDE In App Designer

Figure Support

Use the figure function and Figure properties.

Use the uifigure function and UI Figure properties.

Axes Support

Use the axes function and Axes properties to access all the graphics functionality available in MATLAB®.

Use the uiaxes function and UI Axes properties to display plots. Most 2-D and 3-D plots are supported.

Code Structure

Code is a series of local functions for callbacks and utility functions.

Code is a MATLAB class containing app components, callbacks, utility functions, and properties to manage and share data.

Code Editability

All code is editable.

Only callback code, utility functions, and user-defined properties are editable.

Component Access and Configuration

Use get and set functions.

Use dot notation.

Callback Configuration

Use the Callback property for uicontrols.

Use action-specific callbacks.

Callback Arguments

hObject, eventdata, and a handles structure are used.

app and event data (when needed) are used.

Data Sharing

Use the UserData property, or guidata, or setappdata functions

Use MATLAB class properties that you create.

Component Creation

Use the uicontrol function and uicontrol properties.

Use a component-specific function and its corresponding properties.

Figure Support

In both GUIDE and App Designer, a figure window contains UI components. GUIDE creates a figure window by calling the figure function. App Designer creates a UI figure that is equivalent to the window created by the uifigure function.

Some functions that you can use with figure windows are not supported for use with the UI figure window. In addition, some components are supported by only one type of figure window. For details, see Graphics Support in App Designer

Axes Support

In both GUIDE and App Designer, you plot data using an axes component. GUIDE calls the axes function to create an axes object. App Designer calls the uiaxes function to create a UIAxes object. UIAxes objects support a subset of plotting functions and features. For details, see Graphics Support in App Designer,

Code Structure

App Designer code has a different structure and characteristics from GUIDE code:

  • MATLAB file structure

    App Designer code uses the MATLAB class structure, which is easy to read. App properties appear first, followed by user-defined functions, and then the code used for app initialization and component creation.

  • Integrated editor

    You edit app code within App Designer using an integrated version of the MATLAB Editor. The integrated editor includes features such as debugging, smart indenting, and Code Analyzer indicators.

  • Code editing

    To prevent you from accidentally overwriting code that App Designer manages, some code is not editable. Uneditable code is indicated in the editor by a light gray background. You can write and edit callback code, helper functions, and property declarations that you create.

  • No default callback declarations

    App Designer only creates a callback declaration when you explicitly request it. For example, if you right-click a component in the canvas, and then select a callback from the context menu, App Designer creates a callback declaration. This convention prevents empty callback declarations from cluttering your code.

  • Default sample callback code

    When you explicitly add a callback declaration, App Designer adds sample code to the callback by default. When the app user triggers the callback by manipulating the component in the running app, the sample code accesses a component property value. The sample code provides an example of how to access a component and its properties from within a callback. You can replace this code with code that is appropriate for your app.

    Note

    App Designer does not generate sample callback code when you create a callback for a button component.

  • Single file

    App Designer creates a single MLAPP file that contains the information required to display and run your app. There is no associated FIG file.

For details see, App Designer Code View.

Component Access and Configuration

App Designer defines components as properties of the app. You can access components and their property values using dot notation. For example, this code sets the Value property of a numeric edit field named Temperature to 15:

app.Temperature.Value = 15;

As shown in the example, you always indicate that components are app object properties by including app in the dot notation. For a complete example, see Create a Simple App Using App Designer.

Callback Configuration

GUIDE uicontrol components provide a Callback property that executes when the app user interacts with each component in a typical way (such as clicking a button). Most App Designer components that support callbacks provide a ValueChangedFcn callback instead.

Some components support additional callbacks. For instance, sliders support a ValueChangingFcn callback that triggers repeatedly as the app user moves the slider. For an example, see Write Callbacks in App Designer.

Callback Arguments

In GUIDE, all callback definitions pass hObject, eventdata, and a handles structure as arguments.

In App Designer, all callback definitions specify app and event as input arguments. The app argument refers to the app object, and all user interface components are defined and accessed as properties of this object. The event argument is an object that contains a reference to the UI component and specific information about the event.

Here is an example a of check box callback in GUIDE. This callback gets the value of the check box and stores it in the value variable.

In GUIDE, the check box callback definition is this:

function checkbox1_Callback(hObject,eventdata,handles)
 value = get(hObject,'Value');
end

Here is the equivalent implementation in App Designer:

function CheckBoxValueChanged(app,event)
	value = app.CheckBox.Value;
end

For more information, see Write Callbacks in App Designer.

Data Sharing

In GUIDE, to share data across callbacks, you can use the UserData property or the guidata or setappdata functions.

In App Designer, to share data across callbacks, you create and use a property. For example, suppose that you create the MyVal property to share a value across your app callbacks. To set the property value, use dot notation:

app.MyVal = 15;

Then, if you want to set the Value property of a numeric edit field named Temp to the MyVal property value use this code:

app.Temp.Value = app.MyVal;

When referencing app properties, including components, always use app in the dot notation.

For more information and an example of data sharing using App Designer, see Share Data Within App Designer Apps.

Component Creation

GUIDE creates most components with the uicontrol function, and you use uicontrol properties to control component appearance and behavior. However, some uicontrol properties are applicable to only a subset of components.

App Designer code uses a different function for creating each type of component. For instance, uilistbox creates a list box and uislider creates a slider. Each component provides a set of properties designed specifically for that type of component. For example, when you select a slider in App Designer, the property editor and inspector present only slider options. For more information, see Choose Components for Your App Designer App and Customize App Designer Components.

Related Topics

Was this topic helpful?