Share via

Inicio rápido: crear varias ventanas para una aplicación (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Puedes ayudar a tus usuarios a ser más productivos si les permites ver varias funciones independientes en ventanas distintas. Los usuarios pueden cambiar rápidamente de una parte de la aplicación en una ventana a otra parte de la aplicación en otra ventana. También pueden comparar el contenido de varias ventanas en paralelo, por ejemplo, para ver dos documentos distintos a la vez o para ver el marcador de un juego y la acción del juego en distintas ventanas. La aplicación Correo permite al usuario abrir un mensaje en una ventana nueva. El usuario puede redactar un correo nuevo y consultar un mensaje en la bandeja de entrada al mismo tiempo mediante varias ventanas.

Si creas varias ventanas para una aplicación, cada una de ellas se comporta de manera independiente. La lista de aplicaciones usadas recientemente muestra cada ventana por separado. Los usuarios pueden mover, cambiar de tamaño, mostrar y ocultar ventanas de la aplicación de manera independiente y pueden cambiar entre ventanas de la aplicación como si usaran aplicaciones distintas. Cada ventana funciona en su propio subproceso y contexto de ejecución.

Aplicación Correo con dos ventanas abiertas

En este inicio rápido te mostramos cómo:

  • Crear una ventana nueva para la aplicación

  • Agregar contenido a la ventana nueva

  • Mostrar la ventana nueva

  • Cambiar de una ventana a otra

  • Cerrar una ventana cuando quede fuera de la lista de aplicaciones usadas recientemente

Esta es la versión de JavaScript de este inicio rápido. Para la versión de C# con XAML, consulta Inicio rápido: crear varias ventanas para una aplicación (XAML).

Crear varias ventanas para una aplicación no es lo mismo que proyectar una ventana independiente de tu aplicación en otra pantalla solo para mostrarla, no para interaccionar con ella. Para obtener más información sobre cómo proyectar una ventana, consulta Directrices para el administrador de proyecciones.

Requisitos previos

Crear la página secundaria

  1. En Explorador de soluciones, abre el menú contextual para el nodo de proyecto y, a continuación, elige Agregar > Nuevo elemento.
  2. En el cuadro de diálogo Agregar nuevo elemento, elige Control de páginas en el panel del medio.
  3. En el cuadro Nombre, escribe un nombre para la página, como secondaryView y, a continuación, elige el botón Agregar.
  4. Agrega las funciones y los elementos de la interfaz de usuario que desees tener en la página secundaria. Para obtener más información, consulta el tema sobre cómo diseñar la interfaz de usuario y las directrices para varias ventanas.

Crear una vista nueva

Llama al método MSApp.createNewView para crear un subproceso nuevo y una ventana nueva en ese subproceso. El emparejamiento de un subproceso y una ventana se denomina "vista". Los otros objetos que crees en esta vista, como los elementos de la interfaz de usuario, estarán vinculados con este subproceso.

La primera vista que se crea al iniciarse la aplicación se denomina "vista principal". Si se cierra la ventana de la vista principal, la aplicación finaliza.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

Este código carga automáticamente la página especificada secondaryView, en la ventana nueva.

Como cada ventana funciona en su propio contexto de ejecución, una ventana secundaria solo se puede comunicar con la ventana principal mediante postMessage u opciones de configuración o archivos compartidos. Este código muestra cómo usar postMessage para incluir información adicional sobre el estado que podrías necesitar para configurar la ventana.

newView.postMessage({ myState: 'My important state'}, thisOrigin);

Mostrar la ventana nueva

Tras crear una vista nueva, que consiste en emparejar un subproceso y una ventana, puedes mostrar la ventana nueva mediante el método ApplicationViewSwitcher.TryShowAsStandaloneAsync. El parámetro viewId del método TryShowAsStandaloneAsync es un entero que identifica de manera única cada una de las vistas de la aplicación. Para obtener el identificador de la vista, utiliza ApplicationView.Id o ApplicationView.GetApplicationViewIdForWindow.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

Te recomendamos que no abras automáticamente una ventana nueva cuando el usuario navegue a una parte diferente de la aplicación. El usuario debe iniciar la apertura de una ventana nueva. Puedes agregar la llamada TryShowAsStandaloneAsync a un elemento de la interfaz de usuario, por ejemplo, un comando en la barra de la aplicación inferior.

Cambiar de una ventana a otra

Debes ofrecer al usuario una manera de volver desde una ventana secundaria a la ventana principal. Para ello, usa el método ApplicationViewSwitcher.SwitchAsync. Se llama a este método desde el subproceso de la ventana desde la que se cambia y se pasa el identificador de vista de la ventana a la que se cambia.

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

En la aplicación Correo, el botón atrás de la ventana secundaria llama a SwitchAsync. La aplicación Correo también usa SwitchAsync cuando un usuario envía o elimina el mensaje incluido en una ventana secundaria. La aplicación Correo reemplaza la ventana secundaria con la ventana de correo principal.

Cuando uses SwitchAsync, puedes elegir si quieres cerrar la ventana inicial y quitarla de la lista de aplicaciones usadas recientemente; para ello, especifica el valor de ApplicationViewSwitchingOptions.

Cerrar la ventana nueva

Tras mostrar una ventana secundaria, permanece en la lista de aplicaciones usadas recientemente hasta que el usuario inicia suficientes aplicaciones distintas para que quede fuera de la lista. El consolidated event se produce cuando la ventana se quita de la lista de aplicaciones usadas recientemente, a condición de que la aplicación todavía tenga como mínimo una ventana más en la lista. Como cada ventana consume memoria, te recomendamos que cierres la ventana cuando quede fuera de la lista.

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

Nota  No cierres la ventana de la vista principal, puesto que finalizaría la aplicación. El proceso de certificación de aplicaciones requiere que no cierres una aplicación mediante programación. Cierra solamente una ventana que no sea la principal, como en este ejemplo.

 

Resumen y siguientes pasos

Has aprendido a crear y mostrar varias ventanas para una aplicación. También has aprendido a cambiar de una ventana a otra y cómo y cuándo cerrar una ventana de la aplicación.

Para obtener información sobre el uso del administrador de proyecciones para proyectar una ventana independiente de la aplicación en otra pantalla, consulta Directrices para el administrador de proyecciones.

Temas relacionados

Directrices para varias ventanas

Directrices para el administrador de proyecciones

Diseño con capacidad de respuesta 101 para aplicaciones de la Plataforma universal de Windows (UWP)

Muestra de varias vistas