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 Different||In GUIDE||In App Designer|
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.
All code is editable.
Only callback code, utility functions, and user-defined properties are editable.
Use dot notation.
Use action-specific callbacks.
Use MATLAB class properties that you create.
Use a component-specific function and its corresponding properties.
In both GUIDE and App Designer, a figure window contains UI
components. GUIDE creates a figure window by calling the
App Designer creates a UI figure that is equivalent to the window
created by the
Some functions that you can use with
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
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
to create a UIAxes object. UIAxes objects support a subset of plotting
functions and features. For details, see Graphics Support in App Designer,
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.
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.
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.
App Designer does not generate sample callback code when you create a callback for a button component.
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.
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
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.
uicontrol components provide a
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
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.
In GUIDE, all callback definitions pass
handles structure as arguments.
In App Designer, all callback definitions specify
input arguments. The app argument refers to the
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
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.
In GUIDE, to share data across callbacks, you can use the
In App Designer, to share data across callbacks, you create
and use a property. For example, suppose that you create the
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
of a numeric edit field named
Temp to the
value use this code:
app.Temp.Value = app.MyVal;
When referencing app properties, including components, always
app in the dot notation.
For more information and an example of data sharing using App Designer, see Share Data Within App Designer Apps.
GUIDE creates most components with the
and you use
uicontrol properties to control component
appearance and behavior. However, some
are applicable to only a subset of components.
App Designer code uses a different function for creating each
type of component. For instance,
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.