Partilhar via

Guia de início rápido: criando várias janelas para um aplicativo (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Você pode ajudar seus usuários a serem mais produtivos permitindo que eles exibam várias funções independentes em janela separadas. Os usuários podem alternar rapidamente de uma parte do aplicativo em uma janela para outra parte do aplicativo em outra janela. Também podem comparar o conteúdo de várias janelas lado a lado, por exemplo, para exibir dois documentos diferentes ao mesmo tempo ou para exibir um quadro de líderes do jogo e ação do jogo em janelas separadas. O aplicativo de email permite que o usuário abra uma mensagem em uma nova janela. O usuário pode escrever um novo email e também referir-se a uma mensagem na caixa de entrada usando várias janelas.

Se você criar várias janelas para um aplicativo, cada janela se comporta de forma independente. A lista de aplicativos usados recentemente mostra cada janela separadamente. Os usuários podem mover, redimensionar, mostrar e ocultar janela do aplicativo independentemente e podem alternar entre as janelas do aplicativo como se elas fossem aplicativos separados. Cada janela funciona em seu próprio thread e contexto de execução.

Aplicativo Email com duas janelas abertas

Este guia de início rápido mostra a você como:

  • Criar uma nova janela para o seu aplicativo

  • Adicionar conteúdo à nova janela

  • Exibir a nova janela

  • Alternar de uma janela para outra

  • Fechar uma janela quando ela sair fora da lista de aplicativos usados recentemente

Essa é a versão JavaScript deste guia de início rápido. Para C# com versão XAML, consulte Guia de início rápido: criando várias janelas para um aplicativo (XAML).

Criar várias janelas para um aplicativo é diferente de projetar uma janela separada de seu aplicativo em outra tela para exibição apenas, não para interação. Para saber mais sobre projetar uma janela, veja Diretrizes para gerenciador de projeção.

Pré-requisitos

Criar a página secundária

  1. No Gerenciador de Soluções, abra o menu de atalho do nó do projeto e selecione Adicionar > Novo Item.
  2. Na caixa de diálogo Adicionar Novo Item, selecione Controle de Página no painel central.
  3. Na caixa Nome, insira um nome para a página, como secondaryView, e então selecione o botão Adicionar.
  4. Adicione os elementos da interface do usuário e a funcionalidade que você deseja em sua página secundária. Para saber mais, veja Implantando sua interface do usuário e Diretrizes para várias janelas.

Criar uma nova exibição

Crie um novo thread e uma nova janela nesse thread chamando MSApp.createNewView. O emparelhamento de um thread e janela juntos é chamado uma exibição. Outros objetos que você criar nessa exibição, como elementos de interface do usuário, são vinculados a esse thread.

A primeira exibição que é criada quando seu aplicativo é chamada de exibição principal. Se a janela da exibição principal fechar, o aplicativo será finalizado.

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

Esse código carrega automaticamente a página especificada, secondaryView, na nova janela.

Como cada janela funciona em seu próprio contexto de execução, uma janela secundária pode se comunicar com a janela principal usando apenas postMessage ou arquivos de configurações compartilhadas. Esse código mostra como usar postMessage para incluir informações de estado extra que você pode precisar para configuras a janela.

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

Exibir a nova janela

Depois de criar uma nova exibição, que é o emparelhamento de um thread e uma janela, você pode mostrar a nova janela usando o método ApplicationViewSwitcher.TryShowAsStandaloneAsync. O parâmetro viewId no método TryShowAsStandaloneAsync é um número inteiro que identifica com exclusividade cada uma das exibições em seu aplicativo. Você recupera a ID de exibição usando ApplicationView.Id ou 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) {

});

Recomendamos que você não abra automaticamente uma nova janela quando um usuário navegar para uma parte diferente do aplicativo. O usuário deve começar a abrir uma nova janela. Você pode adicionar a chamada TryShowAsStandaloneAsync para um elemento da interface do usuário, por exemplo, um comando na barra de aplicativos inferior.

Alternar de uma janela para outra

Você deve oferecer uma maneira de o usuário navegar entre uma janela secundária e a janela principal. Para fazer isso, use o método ApplicationViewSwitcher.SwitchAsync. Você chama esse método a partir do thread da janela da qual está alternando e passa o ID de exibição da janela para a qual você alternando.

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

No aplicativo de email, o botão voltar na janela secundária chama SwitchAsync. O aplicativo de email também usa SwitchAsync quando um usuário envia ou exclui a mensagem contida na janela secundária. O aplicativo de email substitui a janela secundária pela janela de email principal.

Quando você usa SwitchAsync, pode escolher se deseja fechar a janela inicial e removê-la da lista de aplicativos usados recentemente, especificando o valor de ApplicationViewSwitchingOptions.

Feche a nova janela

Depois de exibir uma janela secundária, ela permanece na lista de aplicativos usados recentemente até que o usuário ative outros aplicativos suficientes para que ela saia da lista. O consolidated event ocorre quando a janela é removida da lista de aplicativos usados recentemente, desde que o aplicativo tenha pelo menos uma janela a mais restando na lista. Como cada janela consome memória, recomendamos que você feche a janela quando ela sair da lista.

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

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

Observação  Não feche a janela da exibição principal, pois isso encerra o aplicativo. O processo de certificação do aplicativo requer que você não feche um aplicativo de forma programática. Somente feche uma janela que não seja a janela principal, como neste exemplo.

 

Resumo e próximas etapas

Você aprendeu como criar e exibir várias janelas para um aplicativo. Também aprendeu como alternar de uma janela para outra e como e quando fechar uma janela de aplicativo.

Para aprender como usar o gerenciador de projeção para projetar uma janela separada de seu aplicativo em outra tela, veja Diretrizes do gerenciador de projeção.

Tópicos relacionados

Diretrizes para várias janelas

Diretrizes para gerenciador de projeção

Design responsivo 101 para aplicativos da Plataforma Universal do Windows (UWP)

Exemplo de várias exibições