Main Content

Create and Run a Simple App Using App Designer

App Designer provides a tutorial that guides you through the process of creating a simple app containing a plot and a slider. The slider controls the amplitude of the plotted function. You can create this app by running the tutorial, or you can follow the tutorial steps listed here.

An app that contains a plot of some data and a slider labeled Amplitude.

Run the Tutorial

To run the tutorial in App Designer, open the App Designer Start Page and expand the Examples: General section. Then, select Interactive Tutorial.

Tutorial Steps for Creating the App

Perform the following steps in App Designer.

  1. Drag an Axes component from the Component Library onto the canvas.

  2. Drag a Slider component from the Component Library onto the canvas. Place it below the axes, as in the preceding image.

  3. Replace the slider label text. Double-click the label and replace the word Slider with Amplitude.

    A slider component. The slider label text is selected, and read Amplitude.

  4. Above the canvas, click Code View to edit the code. (Notice that you can switch back to edit your layout by clicking Design View.)

    Toggle buttons for switching between Design View and Code View.

  5. In the code view, add a callback function that executes MATLAB® commands whenever the user moves the slider. Right-click app.AmplitudeSlider in the Component Browser. Then select Callbacks > Add ValueChangedFcn callback in the context menu. App Designer creates a callback function and places the cursor in the body of that function.

    App Designer Component Browser. The Callbacks option of the context menu for app.AmplitudeSlider contains options to add a ValueChangedFcn or a ValueChangingFcn callback.

  6. Plot the peaks function in the axes. Add this command to the second line of the AmplitudeSliderValueChanged callback:

    Notice that the plot command specifies the target axes (app.UIAxes) as the first argument. The target axes is always required when you call the plot command in App Designer.

  7. Change the limits of the y-axis by setting the YLim property of the UIAxes object. Add this command to the third line of the AmplitudeSliderValueChanged callback:

    app.UIAxes.YLim = [-1000 1000];
    Notice that the command uses dot notation to access the YLim property. Always use the pattern app.Component.Property to access property values.

  8. Click Run to save and run the app. After saving your changes, your app is available for running again in App Designer, or by typing its name (without the .mlapp extension) at the MATLAB command prompt. When you run the app from the command prompt, the file must be in the current folder or on the MATLAB path.

Related Topics