Guida introduttiva: Uso dell'esplorazione a pagina singola (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 ]

Scopri come funziona il modello di navigazione a pagina singola e come implementarlo nella tua app usando oggetti PageControl e funzionalità di WinJS.Navigation.

Per informazioni su come scegliere il modello di navigazione migliore per la tua app, vedi Modelli di esplorazione.

Puoi anche vedere come funzionano i modelli Modello di esplorazione semplice e Modello di esplorazione gerarchico come argomenti inclusi nella serie di esercitazioni Funzionalità delle app dall'inizio alla fine.

Prerequisiti

Creazione di un collegamento di base

Una delle modalità più semplici e adottate più di frequente per l'esplorazione è rappresentata dai collegamenti ipertestuali. Ecco codice HTML che crea un collegamento ipertestuale per passare alla pagina page2.html.

<p><a href="page2.html">Go to page 2</a></p>

Poiché si tratta di un collegamento relativo, il sistema presuppone che page2.html sia una pagina locale dell'app, relativa all'URL di base del documento corrente. Se, ad esempio, il collegamento viene visualizzato in /folder/default.html, facendo clic su di esso si passa a /folder/page2.html.

Nota  Se hai ottimizzato la tua app per la localizzazione (il che è sempre un aspetto positivo), questo comportamento varia a seconda delle cartelle di contenuti localizzati in /folder/. Vedi Globalizzazione dell'app

 

Se vuoi specificare in modo esplicito l'URI completo di un file locale incluso nella tua applicazione, usa il nuovo schema di URL (ms-appx) dei pacchetti di contenuti:

  • **ms-appx://package name/**file path

Se lo desideri puoi omettere il nome del pacchetto.

  • **ms-appx:///**file path

Ecco un esempio.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

Puoi usare il nuovo schema URL ms-appx per fare riferimento a qualsiasi file incluso nel pacchetto della tua app. Tuttavia, ti consigliamo di usare URL relativi, poiché vengono automaticamente risolti con l'ausilio dell'URL di base del documento.

Nell'esempio precedente è illustrato come creare un collegamento per passare a un livello superiore. Questa soluzione è adatta a una pagina Web ma per diversi motivi non lo è per un'app:

  • La schermata dell'app risulta vuota mentre carica la pagina successiva.
  • Il contesto dello script viene eliminato e deve essere reinizializzato. L'app potrebbe ricevere eventi di sistema ma non gestirli, poiché il contesto dello script viene eliminato e reinizializzato.

La navigazione a pagina singola offre prestazioni migliori e un tipo di esperienza più appropriato per un'app. I controlli di spostamento non sono inclusi automaticamente nei nuovi progetti di Microsoft Visual Studio, quindi in caso di passaggio a un livello superiore a una nuova pagina non vi è alcun modo per tornare alla prima pagina, se non creando manualmente un link o un altro meccanismo di spostamento per tornare indietro. Inoltre, la pagina iniziale è la posizione in cui viene definito il modo in cui l'app gestisce il suo ciclo di vita, ovvero il suo comportamento quando viene avviata, arrestata, sospesa e così via. Se hai più pagine di primo livello, ognuna di esse dovrà contenere la logica per la gestione del ciclo di vita e dello stato dell'app.

Ma quale controllo usare per inserire il contenuto nella pagina principale?

  • Per usare il modello DOM (Document Object Model) per caricare documenti da un'altra origine.
  • Per un contenuto HTML semplice (contenuto non interattivo e privo di riferimenti a script), usa un oggetto HtmlControl.
  • Per contenuti Web esterni, usa se possibile il controllo x-ms-webview. Rispetto a un iframe, questo controllo offre migliore isolamento, navigazione, disponibilità dei filtri SmartScreen e supporto per i siti che non possono essere ospitati in un iframe.
  • Per tutti gli altri contenuti, usa un controllo Page.

Visual Studio offre vari nuovi modelli di progetto di JavaScript per le app in grado di semplificare la gestione della navigazione. Questi modelli di progetto includono un controllo di spostamento, denominato PageControlNavigator, che puoi usare per gli spostamenti tra oggetti PageControl. La classe PageControlNavigator mostra un modo in cui puoi usare i controlli PageControl per semplificare la navigazione a pagina singola.

I prossimi passaggi ti mostrano come creare un'app che contiene più controlli PageControl e come usare il modello di navigazione a pagina singola per lo spostamento tra queste pagine.

Passaggio 1: creare un nuovo progetto App di navigazione

  1. Avvia Microsoft Visual Studio 2013 Aggiornamento 2.

    Nota  Alla prima esecuzione di Visual Studio, ti verrà richiesto di ottenere una licenza per sviluppatori.

     

  2. Scegli File > Nuovo progetto o fai clic su Nuovo progetto nella scheda Pagina iniziale. Verrà aperta la finestra di dialogo Nuovo progetto.

  3. Nel riquadro Modelli a sinistra espandi Installati => Modelli => JavaScript => Applicazioni Windows Store.

  4. Seleziona il tipo di modello Applicazioni universali. I modelli di progetto disponibili per JavaScript vengono visualizzati nel riquadro centrale della finestra di dialogo.

  5. Nel riquadro centrale seleziona il modello di progetto Applicazione di navigazione (applicazioni universali).

  6. Nella casella di testo Nome immetti un nome per il progetto. Negli esempi riportati in questo argomento abbiamo usato "NavigationAppExample".

    Finestra di dialogo Nuovo progetto che mostra i modelli per applicazioni universali JavaScript.

  7. Fai clic su OK per creare il progetto.

    Il tuo nuovo progetto App di navigazione contiene una pagina iniziale, una home page e vari altri file di supporto. L'aspetto in Esplora soluzioni è analogo a questo.

    File del nuovo progetto Applicazione di navigazione

    Il tuo nuovo progetto Applicazione di navigazione include numerosi file. Alcuni sono specifici di un'app Windows, altri per un'app Windows Phone e alcuni sono condivisi.

    Il progetto include questi file HTML:

    • default.html—la pagina iniziale Viene caricata per prima e contiene un'istanza di PageControlNavigator (che carica ogni pagina nella finestra principale). È inoltre la posizione in cui creare l'oggetto AppBar se la tua app ne fa uso.Nota  Le pagine HTML vengono caricate in un singolo host di contenuti, un elemento div dichiarato in default.html. In default.html, l'elemento div host del contenuto è dichiarato come controllo di tipo PageControlNavigator usando l'attributo data-win-control disponibile nella Libreria Windows per JavaScript (WinJS).  
    • home.html—la pagina iniziale. Visualizza il titolo "Welcome".

    Il progetto include i file JavaScript seguenti:

    • default.js—specifica il comportamento dell'app all'avvio.
    • home.js—specifica il comportamento associato alla pagina iniziale.
    • navigator.js—implementa l'oggetto PageControlNavigator che supporta il modello di navigazione per i modelli JavaScript di app di Windows Store.

    Il progetto include i file CSS seguenti:

    • default.css—specifica gli stili CSS (Cascading Style Sheet) per la pagina host dei contenuti e per l'app nel loro complesso.
    • home.css—specifica gli stili CSS per la pagina iniziale.

    Il progetto include anche il file package.appxmanifest, che descrive il pacchetto dell'app. Infine, il progetto include diversi file di immagine come splashscreen.png per la schermata iniziale e storelogo.png usato per Windows Store.

  8. Esegui l'app. Scegli Debug > Avvia debug o premere F5 (scegliere MAIUSC+ F5 per interrompere il debug e tornare a Visual Studio).

    Ecco una cattura di schermata dell'app Windows.

    La nuova app di navigazione Windows.

    Ecco una cattura di schermata dell'app Windows Phone.

    La nuova app di navigazione Windows Phone.

    Nota che il contenuto che vedi non è definito nel file default.html, ma nel file home.html, ovvero in una pagina separata. È PageControlNavigator che recupera il contenuto della home page e lo visualizza all'interno di default.html.

    Il controllo di navigazione, PageControlNavigator è mostrato qui. Definisce diverse funzioni usate per la navigazione. Questo controllo è implementato in navigator.js.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    La funzione costruttore esegue l'inizializzazione per il controllo di navigazione. Tra le attività importanti di inizializzazione ci sono l'impostazione di gestori per gli eventi WinJS, come l'evento WinJS.Navigation.onnavigating, e l'impostazione della home page dell'app. Il valore home è specificato nell'elemento contenthost DIV, in un attributo data-win-options.

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    Un elemento DIV dichiarato come controllo di navigazione (in default.html) dell'app fornisce l'host del contenuto per tutte le pagine dell'app. L'elemento DIV usa l'attributo data-win-control WinJS per dichiarare se stesso come controllo di navigazione e questo controllo fornisce il modello di navigazione per l'app. Tutto il contenuto della pagina viene caricato in questo elemento DIV.

    Ecco il markup completo per la pagina default.html.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- NavigationAppExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" 
        data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}">
        </button>
    </div> -->
</body>
</html>

    Questa figura mostra le diverse unità di contenuto che appaiono nella finestra dell'app:

    Scomposizione del contenuto per un'Applicazione di Navigazione

Nei passaggi successivi, apprenderemo ulteriori nozioni sull'aggiunta di pagine con il controllo PageControlNavigator e l'oggetto PageControl.

Passaggio 2: creare una nuova pagina

Un controllo PageControl è un'unità modulare di HTML, CSS e JavaScript che funziona come una pagina logica.

Quando aggiungi una nuova pagina a un progetto di Visual Studio 2013, devi fare quanto segue:

  1. Aggiungi la nuova pagina usando il modello di elemento Controllo pagina in Visual Studio.
  2. Aggiungi il codice per passare alla nuova pagina con la funzione WinJS.Navigation.navigate. Suggerimento  Questa funzione non esegue direttamente la navigazione, ma richiama l'evento WinJS.Navigation.onnavigated, gestito in navigator.js. Il codice in navigator.js chiama la funzione ready nella nuova pagina. Non è necessario in genere modificare navigator.js.  
  3. Aggiungi l'interfaccia utente e i gestori eventi appropriati per la tua app, se necessario, per richiamare il codice di navigazione della pagina.

Una pagina presenta un set di metodi predefiniti che la libreria chiama automaticamente, in base a un ordine predefinito. La funzione WinJS.UI.Pages.define espone questi metodi per l'implementazione.

Hh452768.wedge(it-it,WIN.10).gifAggiungere una pagina

  1. In Esplora soluzioni, fai clic con il pulsante destro del mouse sulla cartella pages e scegli Aggiungi > Nuova cartella.Nota  Per questo esempio aggiungiamo una pagina condivisa. Puoi aggiungere pagine univoche ai progetti per Windows o Windows Phone, a seconda delle esigenze.

     

  2. Assegna alla nuova cartella il nome page2.

  3. Fai clic con il pulsante destro del mouse sulla cartella page2 e scegli Aggiungi > Nuovo elemento.

  4. Nella finestra di dialogo Aggiungi nuovo elemento scegli Controllo pagina nel riquadro centrale.

  5. Assegna alla pagina il nome page2.html e scegli Aggiungi.

    Il file page2.html viene creato nella cartella page2, insieme a due altri file di progetto: page2.css e page2.js. Insieme, questi file rappresentano una pagina logica.

    Suggerimento  Se il modello di elemento viene aggiunto in un altro punto del progetto, potrebbe essere necessario aggiornare lo script e i riferimenti CSS in page2.html.

     

  6. Apri il file page2.js e verifica che l'URI sia corretto nella funzione define. Ecco l'aspetto che dovrebbe avere:

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Passaggio 3: personalizzare la pagina

Modifica ora la nuova pagina in modo da visualizzare un diverso messaggio e il giorno della settimana.

  1. Apri page2.html. Il modello del controllo Page crea una pagina HTML che contiene una sezione di intestazione (contenente un pulsante Indietro) e una sezione per il contenuto principale della pagina.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. Sostituisci la sezione del contenuto principale con il codice seguente.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    Il tuo file page2.html dovrebbe ora presentarsi così:

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. Apri page2.js. Il controllo PageControl include un set di funzioni predefinite che vengono chiamate automaticamente, in un ordine predefinito. I modelli di controllo Page includono la funzione ready e le funzioni updateLayout e unload.

    PageControlNavigator chiama la funzione updateLayout quando l'utente passa dall'orientamento verticale a quello orizzontale e viceversa oppure modifica le dimensioni delle finestre. In questo argomento non ti sarà mostrato come definire la funzione updateLayout, ma è un'operazione che dovrebbe essere necessaria per ogni app. Vedi Linee guida per il ridimensionamento dei layout alti e stretti e Tutto sul responsive design per app UWP (Universal Windows Platform).

    La funzione ready viene chiamata quando l'elemento DOM della pagina è stato caricato, i controlli sono attivati e la pagina è stata caricata nell'elemento DOM principale.

    PageControl supporta ulteriori funzioni per il ciclo di vita delle pagine. Per altre informazioni, vedi Aggiunta di controlli Page.

    Questo è il file page2.js creato dal modello di controllo Page.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. Modifica la funzione ready in modo che recuperi l'elemento span creato nel passaggio 2 ("dayPlaceholder") e ne imposti innerText sul giorno corrente.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Hai ora creato e personalizzato una pagina. Nel prossimo passaggio consentirai all'utente che esegue l'app di navigare alla tua pagina.

Passaggio 4: usare la funzione di navigazione per spostarsi tra le pagine

Se esegui ora l'app, viene visualizzato il file home.html e l'utente non ha modo di passare alla pagina page2.html. Un modo semplice di consentire all'utente di passare a page2.html consiste nel creare un collegamento da home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Se si esegue l'app e si fa clic sul collegamento, la soluzione sembra funzionare e viene visualizzata la pagina page2.html. Il problema è che l'app esegue una navigazione di primo livello. Invece di passare da home.html a page2.html, passa da default.html a page2.html.

Esecuzione di una navigazione di primo livello

L'obiettivo è invece che il contenuto di home.html venga sostituito con page2.html.

Navigazione a page2.html nel modo consigliato

Fortunatamente, con il controllo PageControlNavigator questo tipo di navigazione diventa piuttosto semplice. Il codice PageControlNavigator (nel file navigator.js) gestisce automaticamente l'evento WinJS.Navigation.onnavigated. Quando si verifica l'evento, PageControlNavigator carica la pagina specificata dall'evento.

L'evento WinJS.Navigation.navigated si verifica quando usi le funzioni WinJS.Navigation.navigate, WinJS.Navigation.back o WinJS.Navigation.forward per navigare.

Devi chiamare manualmente WinJS.Navigation.navigate invece di usare il comportamento predefinito del collegamento ipertestuale. Potresti sostituire il link con un pulsante e usare il gestore dell'evento Click del pulsante per chiamare WinJS.Navigation.navigate. In alternativa, potresti cambiare il comportamento predefinito del collegamento ipertestuale in modo che quando l'utente fa clic su un link l'app usi WinJS.Navigation.navigate per passare alla destinazione del link. A questo scopo, gestisci l'evento click del collegamento ipertestuale e usalo per arrestarne il comportamento di navigazione predefinito, quindi chiama la funzione WinJS.Navigation.navigate e passa la destinazione del link. Ecco come fare:

  1. Nel file home.js, definisci un gestore dell'evento click per i collegamenti ipertestuali.

    
function linkClickEventHandler(eventInfo) {

}

  2. Chiama il metodo preventDefault per impedire il comportamento predefinito del link, ovvero il passaggio diretto alla pagina specificata.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. Recupera il collegamento ipertestuale che ha generato l'evento.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

  4. Chiama la funzione WinJS.Navigation.navigate e passale la destinazione del link. Se lo desideri, puoi anche passare un oggetto di stato che descrive lo stato della pagina. Per altre informazioni, vedi WinJS.Navigation.navigate.)

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. Nella funzione ready del file home.js, collega il gestore di eventi ai collegamenti ipertestuali.

        WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

Questo è l'ultimo passaggio. Ecco il codice completo del file home.js.


// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Esegui l'app e fai clic sul link per page2.html. Ecco il risultato.

Schermata page2.html con pulsante Indietro

Questa volta la pagina viene visualizzata con il modello di navigazione corretto.

Scomposizione del contenuto dopo la navigazione alla pagina page2.html

Il modello del controllo Page include un pulsante Indietro che viene disabilitato quando usi le funzioni WinJS.Navigation per navigare. Quando usi le funzioni WinJS.Navigation, l'app memorizza per te la cronologia di navigazione. Puoi usare questa cronologia per navigare a ritroso chiamando WinJS.Navigation.back o per navigare in avanti chiamando WinJS.Navigation.forward.

Nota  Le app di Windows Store usano in genere uno dei due modelli di navigazione (semplice e gerarchico). Ti consigliamo di non usare l'oggetto BackButton nelle app con navigazione semplice. Per dettagli, vedi Modelli di esplorazione.

 

Salvataggio della cronologia di navigazione quando l'app viene sospesa

La cronologia di navigazione non viene archiviata automaticamente quando l'app viene sospesa o chiusa, tuttavia è facile archiviare queste informazioni manualmente. Usa la proprietà WinJS.Navigation.history per recuperare la cronologia di navigazione e usa l'oggetto WinJS.Application.sessionState per archiviarla. Per assicurare un'esperienza di sospensione/ripresa coerente, è consigliabile archiviare queste informazioni ogni volta che l'utente usa le opzioni di navigazione.

Alla ripresa dell'app, recupera le informazioni della cronologia dall'oggetto WinJS.Application.sessionState e usale per impostare la proprietà WinJS.Navigation.history.

Per un esempio che illustra come usare l'oggetto WinJS.Application.sessionState per archiviare e ripristinare i dati di sessione, vedi Parte 2: Gestire il ciclo di vita e lo stato dell'app. Per ulteriori informazioni sulla sospensione e la ripresa, vedi Avvio, ripresa e multitasking.

Hai imparato come usare oggetti e metodi di WinJS.UI.Pages per supportare il modello di navigazione a pagina singola.

Hai imparato a creare app con il modello di navigazione a pagina singola. Hai usato la classe PageControlNavigator fornita dai modelli per implementare questo modello nella tua app usando gli oggetti PageControl e le funzionalità di WinJS.Navigation.

Argomenti correlati

Per gli sviluppatori

La prima app - Parte 3: Oggetti PageControl e navigazione

Aggiunta di barre dell'app

Guida introduttiva: Aggiunta di una barra di spostamento (NavBar)

Guida introduttiva: Uso di un controllo hub per il layout e la navigazione

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

Esempio del controllo Hub HTML

Esempio di controllo AppBar HTML

Esempio del controllo NavBar HTML

Esempio di navigazione e cronologia di navigazione

Per progettisti

Modelli di esplorazione

Modelli d'uso dei comandi

Layout

Pulsante Indietro

Linee guida per il controllo hub

Linee guida per le barre dell'app (app di Windows Store)

Come rendere accessibile la barra dell'app