Main Content

Create Multiwindow Apps in App Designer

A multiwindow app consists of two or more apps that share data. The way that you share data between the apps depends on the design. One common design involves two apps: a main app and a dialog box. Typically, the main app has a button that opens the dialog box. When the user closes the dialog box, the dialog box sends the user's selections to the main window, which performs calculations and updates the UI.

A main app window and a dialog box window with an double-sided arrow between the two.

These apps share information in different ways at different times:

  • When the dialog box opens, the main app passes information to the dialog box by calling the dialog box app with input arguments.

  • When the user clicks theOKbutton in the dialog box, the dialog box returns information to the main app by calling a public function in the main app with input arguments.

Overview of the Process

To create the app described in the preceding section, you must create two separate apps (a main app and a dialog box app). Then perform these high-level tasks. Each task involves multiple steps.

  • Send Information to the Dialog Box— Write astartupFcncallback in the dialog box app that accepts input arguments. One of the input arguments must be the main app object. Then, in the main app, call the dialog box app with the input arguments.

  • Return Information to the Main App— Write a public function in the main app that updates the UI based on the user's selections in the dialog box. Because it is a public function, the dialog box can call it and pass values to it.

  • Manage Windows When They Close— WriteCloseRequestcallbacks in both apps that perform maintenance tasks when the windows close.

To see an implementation of all the steps in this process, seePlotting App That Opens a Dialog Box.

If you plan to deploy your app as a web app (requiresMATLAB®Compiler™), creating multiple app windows is not supported. Instead, consider creating a single-window app with multiple tabs. For more information, seeWeb App Limitations and Unsupported Functionality(MATLAB Compiler).

Send Information to the Dialog Box

Perform these steps to pass values from the main app to the dialog box app.

  1. In the dialog box app, define input arguments for thestartupFcncallback, and then add code to the callback. Open the dialog box app intoCode View. In theEditortab, clickApp Input Arguments. In theApp Input Argumentsdialog box, enter a comma-separated list of variable names for your input arguments. Designate one of the inputs as a variable that stores the main app object. Then clickOK.

    App Input Arguments dialog box. An edit field for specifying input arguments to the startupFcn callback contains the variable names mainapp, sz, and c.

    Add code to thestartupFcncallback to store the value ofmainapp.

    functionstartupFcn(app,mainapp,sz,c)% Store main app objectapp.CallingApp = mainapp;% Process sz and c inputs...end

    For a fully coded example of astartupFcncallback, seePlotting App That Opens a Dialog Box.

  2. Call the dialog box app from within a callback in the main app. Open the main app intoCode Viewand add a callback function for theOptions按钮。这个回调禁用Optionsbutton to prevent users from opening multiple dialog boxes. Next, it gets the values to pass to the dialog box, and then it calls the dialog box app with input arguments and an output argument. The output argument is the dialog box app object.

    functionOptionsButtonPushed(app,event)% Disable Plot Options button while dialog is openapp.OptionsButton.Enable ='off';% Get szvalue and cvalue% ....% Call dialog box with input valuesapp.DialogApp = DialogAppExample(app,szvalue,cvalue);end

  3. Define a property in the main app to store the dialog box app. Keeping the main app open, create a private property calledDialogApp. SelectProperty>Private Propertyin theEditortab. Then, change the property name in thepropertiesblock toDialogApp.

    properties(Access = private) DialogApp% Dialog box append

Return Information to the Main App

Perform these steps to return the user's selections to the main app.

  1. Create a public function in the main app that updates the UI. Open the main app intoCode Viewand selectFunction>Public Functionin theEditortab.

    Change the default function name to the desired name, and add input arguments for each option you want to pass from the dialog box to the main app. Theappargument must be first, so specify the additional arguments after that argument. Then add code to the function that processes the inputs and updates the main app.

    functionupdateplot(app,sz,c)% Process sz and c...end

    For a fully coded example of a public function, seePlotting App That Opens a Dialog Box.

  2. Create a property in the dialog box app to store the main app. Open the dialog box app intoCode View, and create a private property calledCallingApp. SelectProperty>Private Propertyin theEditortab. Then change the property name in thepropertiesblock toCallingApp.

    properties(Access = private) CallingApp% Main app objectend

  3. Call the public function from within a callback in the dialog box app. Keeping the dialog box app open, add a callback function for theOK按钮。

    In this callback, pass theCallingAppproperty and the user's selections to the public function. Then call thedeletefunction to close the dialog box.

    functionButtonPushed(app,event)% Call main app's public functionupdateplot(app.CallingApp,app.EditField.Value,app.DropDown.Value);% Delete the dialog boxdelete(app)end

Manage Windows When They Close

Both apps must perform certain tasks when the user closes them. Before the dialog box closes, it must re-enable theOptionsbutton in the main app. Before the main app closes, it must ensure that the dialog box app also closes.

  1. Open the dialog box app intoCode View, right-click theapp.UIFigureobject in theComponent Browser, and selectCallbacks>Add CloseRequestFcn callback. Then add code that re-enables the button in the main app and closes the dialog box app.

    functionDialogAppCloseRequest(app,event)% Enable the Plot Options button in main appapp.CallingApp.OptionsButton.Enable ='on';% Delete the dialog boxdelete(app)end

  2. Open the main app intoCode View, right-click theapp.UIFigureobject in theComponent Browser, and selectCallbacks>Add CloseRequestFcn callback. Then add code that deletes both apps.

    functionMainAppCloseRequest(app,event)% Delete both appsdelete(app.DialogApp) delete(app)end

Example: Plotting App That Opens a Dialog Box

This app consists of a main plotting app that has a button for selecting options in a dialog box. TheOptionsbutton calls the dialog box app with input arguments. In the dialog box, the callback for theOKbutton sends the user's selections back to the main app by calling a public function in the main app.

Related Topics