Crear apps multiventana en App Designer

Una app multiventana consta de dos o más apps que comparten datos. La forma en que comparte los datos entre las apps depende del diseño. Un diseño común implica dos apps: una app principal y un cuadro de diálogo. Normalmente, la app principal tiene un botón que abre el cuadro de diálogo. Cuando el usuario cierra el cuadro de diálogo, el cuadro de diálogo envía las selecciones del usuario a la ventana principal, que realiza los cálculos y actualiza la IU.

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

Estas apps comparten información de distintas formas en momentos distintos:

  • Cuando se abre el cuadro de diálogo, la app principal pasa la información al cuadro de diálogo llamando a la app de cuadro de diálogo con argumentos de entrada.

  • Cuando el usuario hace clic en el botón OK de la app de cuadro de diálogo, el cuadro de diálogo devuelve la información a la app principal llamando a una función pública en la app principal con argumentos de entrada.

Videotutorial

Para ver una demostración de cómo crear una app multiventana en App Designer, reproduzca el vídeo.

Video about how to create multiwindow apps in App Designer

Descripción general del proceso

Para crear una app multiventana, debe crear dos apps independientes (una app principal y una app de cuadro de diálogo). Después, realice estas tareas de alto nivel. Cada tarea consta de varios pasos.

  • Enviar información al cuadro de diálogo: escriba un callback StartupFcn en la app de cuadro de diálogo que acepte argumentos de entrada. Uno de los argumentos de entrada debe ser el objeto de la app principal. Luego, en la app principal, llame a la app de cuadro de diálogo con los argumentos de entrada.

  • Devolver información a la app principal: escriba una función pública en la app principal que actualice la IU según las selecciones del usuario en el cuadro de diálogo. Como se trata de una función pública, la app de cuadro de diálogo puede llamarla y pasarle los valores.

  • Administrar las ventanas cuando se cierran: escriba callbacks CloseRequest en ambas apps que realicen las tareas de mantenimiento cuando se cierra la ventana.

Para ver una implementación de todos los pasos de este proceso, consulte App gráfica que abre un cuadro de diálogo.

Si planea implementar su app como una app web (requiere MATLAB® Compiler™), tenga en cuenta que no se admite la creación de múltiples ventanas de app. En su lugar, considere crear una app de ventana única con varias pestañas. Para obtener más información, consulte Web App Limitations and Unsupported Functionality (MATLAB Compiler).

Enviar información al cuadro de diálogo

Realice estos pasos para pasar los valores de la app principal a la app de cuadro de diálogo.

  1. En la app de cuadro de diálogo, defina los argumentos de entrada para la función de callback StartupFcn. En Code View, en la pestaña Editor, haga clic en App Input Arguments . En el cuadro de dialogo App Details, introduzca una lista de nombres de variables separados por comas para los argumentos de entrada. Designe estas entradas:

    • App principal: pase el objeto de la app principal a la app de cuadro de diálogo para poder hacer referencia a las funciones y propiedades de la app principal desde el código de la app de cuadro de diálogo.

    • Datos adicionales: pase cualquier dato adicional definido en la app principal al que la app de cuadro de diálogo requiera acceso.

    Haga clic en OK.

    App Details dialog box. An edit field for specifying input arguments to the startupFcn callback contains the variable names "caller", "sz", and "c".

  2. En la app de cuadro de diálogo, añada el código para almacenar el objeto de la app principal.

    1. Primero, defina una propiedad para almacenar la app principal. En Code View, en la pestaña Editor, seleccione Property > Private Property. Después, modifique el nombre de la propiedad en el bloque properties como MainApp.

      properties (Access = private)
    MainApp % Main app
end

    2. Luego, en la función de callback StartupFcn, añada código para almacenar el objeto de la app principal en la propiedad MainApp.

      function StartupFcn(app,mainapp,sz,c)
    % Store main app object
    app.MainApp = mainapp;

    % Process sz and c inputs
    % ...
end

      Para ver un ejemplo completamente codificado de un callback StartupFcn, consulte App gráfica que abre un cuadro de diálogo.

  3. En la app principal, llame a la app de cuadro de diálogo desde dentro de un callback para crear el cuadro de diálogo.

    1. Primero, defina una propiedad para almacenar la app de cuadro de diálogo. En la app principal, en Code View, en la pestaña Editor, seleccione Property > Private Property. Después, cambie el nombre de la propiedad en el bloque properties a DialogApp.

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

    2. Añada una función de callback para el botón Options. Este callback desactiva el botón Options para evitar que los usuarios abran varios cuadros de diálogo. A continuación, obtiene los valores que se pasarán al cuadro de diálogo y luego llama a la app de cuadro de diálogo con argumentos de entrada y un argumento de salida. El argumento de salida es el objeto de la app de cuadro de diálogo.

      function OptionsButtonPushed(app,event) 
    % Disable Plot Options button while dialog is open
    app.OptionsButton.Enable = "off";

    % Get sample size and colormap
    % ...
    
    % Call dialog box with input values
    app.DialogApp = DialogAppExample(app,szvalue,cvalue);
end

      Para ver un ejemplo completamente codificado de un callback, consulte App gráfica que abre un cuadro de diálogo.

Devolver información a la app principal

Realice estos pasos para devolver las selecciones del usuario de la app de cuadro de diálogo a la app principal.

  1. En la app principal, cree una función pública que actualice la IU. Con la app principal abierta en Code View, en la pestaña Editor, seleccione Function > Public Function.

    Cambie el nombre de función predeterminado al nombre que desee y añada los argumentos de entrada para cada opción que desee pasar del cuadro de diálogo a la app principal. El argumento app, que representa el objeto de la app principal, debe ser el primero. Por tanto, se deben especificar los argumentos adicionales después de ese argumento. Luego, añada código a la función que procesa las entradas y actualiza la app principal.

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

    Para ver un ejemplo completamente codificado de una función pública, consulte App gráfica que abre un cuadro de diálogo.

  2. En la app de cuadro de diálogo, llame a la función pública desde dentro de un callback. Con la app de cuadro de diálogo abierta en Code View, añada una función de callback para el botón OK.

    En este callback, llame a la función pública que ha definido en el código de la app principal. Pase el objeto de la app principal, almacenado en la propiedad MainApp, como primer argumento. Después, pase los datos adicionales que la app principal necesita para actualizar su IU. Por último, llame a la función delete para cerrar el cuadro de diálogo.

    function ButtonPushed(app,event)
    % Call main app's public function
    updateplot(app.MainApp,app.EditField.Value,app.DropDown.Value);

    % Delete the dialog box  
    delete(app)                  
end

Administrar las ventanas cuando se cierran

Ambas apps han de realizar determinadas tareas cuando el usuario las cierra. Antes de que se cierre el cuadro de diálogo, debe volver a habilitar el botón Options en la app principal. Antes de que se cierre la app principal, debe asegurarse de que se ha cerrado el cuadro de diálogo.

  1. Con la app de cuadro de diálogo abierta en Code View, haga clic con el botón secundario en el objeto app.UIFigure de Component Browser y seleccione Callbacks > Add CloseRequestFcn callback. Después, añada código que permita volver a habilitar el botón en la app principal y cierre la app de cuadro de diálogo.

    function DialogAppCloseRequest(app,event)
    % Enable the Plot Options button in main app, if the app is
    % still open
    if isvalid(app.MainApp)
        app.MainApp.OptionsButton.Enable = "on";
    end
            
    % Delete the dialog box 
    delete(app)             
end

  2. Con la app principal abierta en Code View, haga clic con el botón secundario en el objeto app.UIFigure de Component Browser y seleccione Callbacks > Add CloseRequestFcn callback. Después, añada el código que cierra ambas apps.

    function MainAppCloseRequest(app,event)
    % Delete both apps
    delete(app.DialogApp)
    delete(app)              
end

Ejemplo: App gráfica que abre un cuadro de diálogo

Abrir script

Esta app consta de una app gráfica principal que tiene un botón para seleccionar opciones en un cuadro de diálogo. El botón Options llama a la app de cuadro de diálogo con argumentos de entrada. En el cuadro de diálogo, el callback para el botón OK envía las selecciones del usuario de vuelta a la app principal llamando a una función pública en la app principal.

Consulte también

Temas