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.

Create 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 of the plotted function. You can create this app by running the tutorial, or you can follow the tutorial steps listed below.

Run the Tutorial

To run the tutorial in App Designer, click the Open Example button on this page. Alternatively, you can run the tutorial by selecting Open > Interactive Tutorial on the Designer tab in the App Designer toolstrip.

Tutorial Steps for Creating the App

Start App Designer by typing appdesigner at the MATLAB® command line. Then perform the following steps.

  1. Drag an Axes (2D) 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.

  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.)

  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.

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

    plot(app.UIAxes,value*peaks)
    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 AmplitudeSliderChangedFcn 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.

Related Topics

Was this topic helpful?