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

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 the OK button 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 a startupFcn callback 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 — Write CloseRequest callbacks in both apps that perform maintenance tasks when the windows close.

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

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 the startupFcn callback, and then add code to the callback. Open the dialog box app into Code View. In the Editor tab, click App Input Arguments . In the App Input Arguments dialog 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 click OK.

    Add code to the startupFcn callback to store the value of mainapp.

    function startupFcn(app,mainapp,sz,c)
        % Store main app object
        app.CallingApp = mainapp;
    
        % Process sz and c inputs
        ...
    end

    For a fully coded example of a startupFcn callback, see Plotting App That Opens a Dialog Box.

  2. Call the dialog box app from within a callback in the main app. Open the main app into Code View and add a callback function for the Options button. This callback disables the Options button 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.

    function OptionsButtonPushed(app,event) 
        % Disable Plot Options button while dialog is open
        app.OptionsButton.Enable = 'off';
    
        % Get szvalue and cvalue
        % ....
        
        % Call dialog box with input values
        app.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 called DialogApp. Select Property > Private Property in the Editor tab. Then, change the property name in the properties block to DialogApp.

    properties (Access = private)
           DialogApp % Dialog box app
    end

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 into Code View and select Function > Public Function in the Editor tab.

    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. The app argument 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.

    function updateplot(app,sz,c) 
        % Process sz and c 
        ...
    end

    For a fully coded example of a public function, see Plotting 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 into Code View, and create a private property called CallingApp. Select Property > Private Property in the Editor tab. Then change the property name in the properties block to CallingApp.

    properties (Access = private)
            CallingApp % Main app object
    end

  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 the OK button.

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

    function ButtonPushed(app,event)
       % Call main app's public function
       updateplot(app.CallingApp,app.EditField.Value,app.DropDown.Value);
    
       % Delete the dialog box  
       delete(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 the Options button 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 into Code View, right-click the app.UIFigure object in the Component Browser, and select Callbacks > Add CloseRequestFcn callback. Then add code that re-enables the button in the main app and closes the dialog box app.

    function DialogAppCloseRequest(app,event)
       % Enable the Plot Options button in main app
       app.CallingApp.OptionsButton.Enable = 'on';
                
       % Delete the dialog box 
       delete(app)             
    end

  2. Open the main app into Code View, right-click the app.UIFigure object in the Component Browser, and select Callbacks > Add CloseRequestFcn callback. Then add code that deletes both apps.

    function MainAppCloseRequest(app,event)
       % Delete both apps
       delete(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. The Options button calls the dialog box app with input arguments. In the dialog box, the callback for the OK button sends the user's selections back to the main app by calling a public function in the main app.

Related Topics