Guida introduttiva: Creazione di finestre multiple per un'app (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Puoi aiutare gli utenti a essere più produttivi consentendo loro di visualizzare più funzioni indipendenti in finestre separate. Gli utenti possono passare rapidamente da una parte dell'app in una finestra a un'altra parte in un'altra finestra. Possono anche confrontare il contenuto di più finestre affiancate, ad esempio per visualizzare due documenti diversi contemporaneamente oppure per visualizzare la classifica e l'azione di un gioco in finestre separate. L'app Mail consente all'utente di aprire un messaggio in una nuova finestra. Usando più finestre, l'utente può scrivere un nuovo messaggio e allo stesso tempo fare riferimento a un altro messaggio nella posta in arrivo.

Se si creano più finestre per un'app, il comportamento di ogni finestra è indipendente. L'elenco delle app usate di recente mostra ogni finestra separatamente. Gli utenti possono spostare, ridimensionare, mostrare e nascondere le finestre dell'app in modo indipendente e possono passare da una finestra all'altra come se si trattasse di app separate. Ogni finestra funziona in un thread e in un contesto di esecuzione a parte.

App Mail con due finestre aperte

Questa guida introduttiva illustra come:

  • Creare una nuova finestra per la tua app

  • Aggiungere contenuto alla nuova finestra

  • Visualizzare la nuova finestra

  • Passare da una finestra all'altra

  • Chiudere una finestra quando esce dall'elenco delle app usate di recente

Questa è la versione JavaScript di questa guida introduttiva. Per la versione C# con XAML, vedi Guida introduttiva: Creazione di più finestre per un'app (XAML).

La creazione di più finestre per un'app è diversa dalla proiezione di una finestra separata dell'app su un altro schermo, destinata solo alla visualizzazione e non alle interazioni. Per altre info sulla proiezione di una finestra, vedi Linee guida per il gestore delle proiezioni.

Prerequisiti

Creare la pagina secondaria

  1. In Esplora soluzioni apri il menu di scelta rapida del nodo del progetto e quindi scegli Aggiungi > Nuovo elemento.
  2. Nella finestra di dialogo Aggiungi nuovo elemento scegli Controllo pagina nel riquadro centrale.
  3. Nella casella Nome immetti un nome per la pagina, ad esempio secondaryView e quindi scegli il pulsante Aggiungi.
  4. Aggiungi gli elementi dell'interfaccia utente e le funzionalità desiderati alla pagina secondaria. Per altre info, vedi Layout dell'interfaccia utente e Linee guida per le finestre multiple.

Creare una nuova visualizzazione

Crea un nuovo thread e una nuova finestra in tale thread chiamando MSApp.createNewView. L'abbinamento di un thread e una finestra viene definito visualizzazione nel suo insieme. Gli altri oggetti creati in questa visualizzazione, come gli elementi dell'interfaccia utente, vengono associati a questo thread.

La prima visualizzazione creata all'avvio dell'app viene definita visualizzazione principale. Se la finestra della visualizzazione principale viene chiusa, l'app viene terminata.

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

Questo codice carica automaticamente la pagina specificata, secondaryView, nella nuova finestra.

Dato che ogni finestra opera in un contesto di esecuzione proprio, una finestra secondaria può comunicare con la finestra principale solo tramite postMessage o file e impostazioni condivisi. Questo codice mostra come usare postMessage per includere informazioni aggiuntive sullo stato che potrebbero servirti per impostare la finestra.

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

Visualizzare la nuova finestra

Dopo aver creato una nuova visualizzazione, ovvero l'abbinamento di un thread e una finestra, puoi mostrare la nuova finestra tramite il metodo ApplicationViewSwitcher.TryShowAsStandaloneAsync. Il parametro viewId nel metodo TryShowAsStandaloneAsync è un valore intero che identifica in modo univoco ogni visualizzazione nell'app. Puoi recuperare l'ID della visualizzazione tramite 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) {

});

Consigliamo di non aprire automaticamente una nuova finestra quando un utente passa a una parte diversa dell'app. L'apertura di una nuova finestra deve essere richiesta dall'utente. Puoi aggiungere la chiamata TryShowAsStandaloneAsync a un elemento dell'interfaccia utente, ad esempio un comando nella barra dell'app inferiore.

Passare da una finestra all'altra

Devi predisporre un modo per consentire all'utente di tornare alla finestra principale da una finestra secondaria. Per questa operazione, usa il metodo ApplicationViewSwitcher.SwitchAsync. Puoi chiamare questo metodo dal thread della finestra di partenza e passare l'ID della visualizzazione della finestra di destinazione.

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

Nell'app Mail il pulsante Indietro nella finestra secondaria chiama SwitchAsync. L'app Mail usa anche SwitchAsync quando un utente invia o elimina il messaggio contenuto nella finestra secondaria. L'app Mail sostituisce la finestra secondaria con la finestra principale della posta.

Quando usi SwitchAsync, puoi scegliere se vuoi chiudere la finestra iniziale e rimuoverla dall'elenco delle app usate di recente specificando il valore di ApplicationViewSwitchingOptions.

Chiudere la nuova finestra

Dopo aver visualizzato una finestra secondaria, questa rimane nell'elenco delle app usate di recente fino a quando l'utente non apre un numero di altre app sufficiente a farla uscire dall'elenco. L'consolidated event si verifica quando la finestra viene rimossa dall'elenco delle app usate di recente, a condizione che per l'app rimanga almeno un'altra finestra nell'elenco. Dato che ogni finestra consuma memoria, consigliamo di chiudere la finestra quando esce dall'elenco.

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

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

Nota  Non chiudere la finestra della visualizzazione principale, perché in questo modo l'app viene terminata. Per il processo di certificazione delle app è richiesto che le app non vengano chiuse a livello di programmazione. Chiudi solo le finestre che non sono finestre principali, come in questo esempio.

 

Riepilogo e passaggi successivi

Hai imparato a creare e visualizzare più finestre per un'app. Hai anche scoperto come passare da una finestra a un'altra e come e quando chiudere la finestra di un'app.

Per informazioni su come usare il gestore delle proiezioni per proiettare una finestra separata della tua app su un altro schermo, vedi Linee guida per il gestore delle proiezioni.

Argomenti correlati

Linee guida per le finestre multiple

Linee guida per il gestore delle proiezioni

Tutto sul responsive design per app UWP (Universal Windows Platform)

Esempio di visualizzazioni multiple