Skip to main content

Windows Dev Center

Parte 3: Oggetti PageControl e navigazione (HTML)

L'app "Hello, world" creata nelle esercitazioni precedenti include un'unica pagina di contenuto. La maggior parte delle app reali contiene più pagine.

In un'app di Windows Store sono disponibili diversi modelli di navigazione. Tra i modelli di navigazione potrai scegliere quello più adeguato alla tua app.

Nota  

Per vedere come funzionano i due modelli di navigazione principali, navigazione semplice e navigazione gerarchica, leggi i relativi argomenti inclusi nella serie di esercitazioni Funzionalità delle app dall'inizio alla fine.

In questa esercitazione copierai il codice dell'app "Hello, world" in una nuova app basata sul modello Navigation App e quindi aggiungerai un'altra pagina.

Imparerai a:

  • Usare il modello di progetto Navigation App per creare un'app con più pagine di contenuto.
  • Usare gli oggetti PageControl per separare il codice in unità modulari.
  • Usare il modello di navigazione a pagina singola per passare tra le pagine
  • Usare un oggetto NavBar per fornire i comandi di navigazione.
Suggerimento  

Se vuoi saltare l'esercitazione e passare direttamente al codice, vedi Introduzione a JavaScript: codice completo della serie di esercitazioni.

Prima di iniziare

Informazioni sulla navigazione nelle app di Windows Store

Quasi tutti i siti Web forniscono qualche sistema di navigazione, in genere sotto forma di collegamento ipertestuale su cui fare clic per accedere a un'altra pagina. Ogni pagina ha un suo insieme di dati e funzioni JavaScript, un nuovo insieme di codice HTML da visualizzare, informazioni di stile e così via. Questo modello di navigazione è noto come navigazione a più pagine. Questa struttura è valida per la maggior parte dei siti Web, ma può creare problemi per un'app perché risulta difficile mantenere lo stato tra le diverse pagine.

Un altro modello è quello della navigazione a pagina singola, in cui si usa un'unica pagina per l'app e si caricano i dati aggiuntivi all'interno di questa stessa pagina come necessario. Anche se devi comunque suddividere l'applicazione in più file, invece di passare da una pagina all'altra, la tua app carica gli altri documenti nella pagina principale. Poiché la pagina principale dell'app non viene mai scaricata, i tuoi script non vengono mai scaricati ed è quindi più facile gestire lo stato, le transizioni e le animazioni. Ti consigliamo di usare il modello di navigazione a pagina singola per le app di Windows Store.

Per consentirti di creare app basate sul modello di navigazione a pagina singola, la libreria Windows per JavaScript include l'oggetto WinJS.UI.Pages.PageControl. È inoltre disponibile il modello di progetto Navigation App che fornisce un'infrastruttura di navigazione aggiuntiva. Nel passaggio successivo userai questo modello per creare un nuovo progetto.

Passaggio 1: Creare una nuova app di navigazione in Visual Studio

Creiamo una nuova app denominata HelloWorldWithPages basata sul modello Navigation App. Ecco come:

  1. Avvia Microsoft Visual Studio Express 2013 per Windows.
  2. Nel menu File seleziona Nuovo progetto.

    Viene visualizzata la finestra di dialogo Nuovo progetto. Nel riquadro sinistro di questa finestra di dialogo puoi selezionare i tipi di modelli da visualizzare.

  3. Nel riquadro sinistro espandi Installato, quindi espandi Modelli, JavaScript e seleziona il tipo di modello Windows Store. Nel riquadro centrale della finestra di dialogo vengono elencati i modelli di progetto per JavaScript.

    Per questa esercitazione useremo il modello Navigation App.

  4. Nel riquadro centrale seleziona il modello Navigation App.
  5. Nella casella di testo Name immetti "HelloWorldWithPages".
  6. Deseleziona la casella di controllo Crea directory per soluzione.

    La finestra Nuovo progetto

  7. Fai clic su OK per creare il progetto.

    Visual Studio crea il progetto e lo visualizza in Esplora soluzioni.

    Esplora soluzioni per il progetto HelloWorldWithPages

Nota che il nuovo oggetto Navigation App contiene più file rispetto all'app "Hello, world". Esaminiamo questi nuovi file:

  • /pages/home/home.css, /pages/home/home.html e /pages/home/home.js

    Queste tre pagine definiscono un elemento PageControl per la home page dell'app. Un elemento PageControl è costituito da un file HTML, un file JavaScript e un file CSS. PageControl è un'unità modulare di HTML, CSS e JavaScript a cui è possibile accedere (come una pagina HTML) o che può essere usata come un controllo personalizzato. Puoi usare oggetti PageControl per suddividere un'app di grandi dimensioni in parti più piccole e facilmente gestibili.

    Gli oggetti PageControl supportano vari metodi che ne semplificano l'uso nell'app rispetto all'uso di un insieme di pagine HTML, CSS e JavaScript indipendenti. Approfondiremo questi metodi in un passaggio successivo.

  • /js/navigator.js

    Questo file fornisce la classe helper PageControlNavigator che puoi usare per visualizzare gli oggetti PageControl e spostarti tra di essi. Non è necessario per visualizzare un PageControl, ma può semplificarne l'uso.

Esaminiamo la pagina default.html della nuova app:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWithPages</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>

    <!-- HelloWorldWithPages 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'}" 
            type="button"></button>
    </div> -->
</body>
</html>

L'oggetto body del file contiene due elementi, un elemento div per PageControlNavigator e un elemento div con commenti per AppBar. Ignoriamo app bar per il momento ed esaminiamo il primo elemento div.

    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
 

Questo elemento div crea un controllo PageControlNavigator. PageControlNavigator carica e visualizza la home page. Per indicare quale pagina caricare (/pages/home/home.html), devi usare l'attributo data-win-options.

Procedi ed esegui l'app.

App HelloWorldWithPages

Anche se non è ovvio, l'app visualizza in effetti sia default.html che home.html. È simile all'uso di iframe per visualizzare una pagina HTML in un'altra pagina HTML.

L'elemento PageControl home.html viene visualizzato dalla pagina default.html

Passaggio 2: Copiare il contenuto HTML e CSS dall'app "Hello, world"

La nuova app include due pagine HTML, ossia default.html e home.html. Dove devi inserire il tuo contenuto?

  • Usa default.html per l'interfaccia utente che deve essere sempre presente, indipendentemente dalla pagina dell'app visualizzata. Ad esempio, puoi usare default.html per ospitare una barra di navigazione.

  • Usa pagine come home.html per il contenuto che costituisce una singola schermata nell'app.

Apriamo home.html ed esaminiamo parte del markup che contiene.

  • Include un elemento head con riferimenti al codice e ai fogli di stile WinJS. Contiene inoltre riferimenti al foglio di stile predefinito dell'app (default.css) e ad altri file che costituiscono la home page (home.css e home.js).

    <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>
    
  • Include un'area di intestazione della pagina con un oggetto BackButtonper il passaggio alla pagina precedente e un'area del titolo. Il modello contiene codice che abilita automaticamente il pulsante Indietro quando è possibile passare alla pagina precedente. Il pulsante sarà visibile solo quando aggiungeremo una seconda pagina in cui passeremo.

            <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 HelloWorldWithPages!</span>
                </h1>
            </header>
    
  • Include una sezione per il contenuto principale.

            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
    

Aggiungiamo il contenuto dell'app "Hello, world" nella home page (home.html) del nuovo progetto HelloWorldWithPages.

JJ663505.wedge(it-it,WIN.10).gifPer aggiungere il contenuto HTML e CSS dall'app "Hello, world"

  1. Copia il contenuto HTML finale del file default.html dell'app "Hello, world" nella sezione del contenuto principale di /pages/home/home.html nel nuovo progetto.
    <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 HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
    
                <!-- Copied from "Hello, world" -->
                <h1 class="headerClass">Hello, world!</h1>
                <div class="mainContent">
                    <p>What's your name?</p>
                    <input id="nameInput" type="text" />
                    <button id="helloButton">Say "Hello"</button>
                    <div id="greetingOutput"></div>
                    <label for="ratingControlDiv">
                        Rate this greeting: 
                    </label>
                    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                    </div>
                    <div id="ratingOutput"></div>
                </div>
            </section>
        </div>
    </body>
  2. Sposta il contenuto di intestazione copiato nell'elemento h1 fornito da home.html. Poiché home.html include già una sezione di contenuto principale, rimuovi l'elemento "mainContent" div copiato, lasciando però il relativo contenuto.
    <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 HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
            </section>
        </div>
    </body>
  3. Passa al foglio di stile chiaro. Sostituisci il riferimento al foglio di stile scuro,
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    

    Con questo:

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
  4. A ogni elemento PageControl è associato uno specifico file CSS (Cascading Style Sheets).

    Copia lo stile greetingOutput dal file default.css creato in Parte 1: Creare un'app "Hello, world!" in home.css.

    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
  5. Esegui l'app.

    App HelloWorldWithPages con il contenuto dell'app Hello, world

    Abbiamo ricreato il contenuto dell'app "Hello, world" originale. In seguito, aggiungiamo interattività copiando i gestori eventi di "Hello, world".

Passaggio 3: Copiare i gestori eventi

A ogni elemento PageControl è associato uno specifico file JavaScript. Esaminiamo un file JavaScript creato da Visual Studio per la "home page" PageControl, 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.
        }
    });
})();

Questo file sembra piuttosto diverso dal file default.js. Innanzitutto, è molto più corto. Il motivo è che default.js gestisce già la logica dell'app principale e l'attivazione. Ogni PageControl deve solo contenere la logica per la pagina stessa.

Una delle prime righe del codice, una chiamata alla funzione WinJS.UI.Page.define, crea l'oggetto PageControl. Questa funzione accetta due parametri, ovvero l'URI della pagina ("/pages/home/home.html" in questo esempio) e un oggetto che definisce i membri di PageControl. Puoi aggiungere qualsiasi tipo di membro. Puoi inoltre implementare un set di membri speciali, descritti dall'interfaccia IPageControlMembers, che vengono chiamati automaticamente dall'app quando usi PageControl.

Il file home.js creato dal modello definisce uno di questi membri speciali, la funzione ready. La funzione ready viene chiamata dopo l'inizializzazione e il rendering della pagina. È un buon punto in cui collegare i gestori eventi.

Come puoi notare, il codice non include una chiamata a WinJS.UI.processAll. Il motivo è che PageControl effettua automaticamente questa chiamata. Quando viene chiamata la funzione ready, è già stata effettuata la chiamata a WinJS.UI.processAll e ne è stata completata l'elaborazione.

JJ663505.wedge(it-it,WIN.10).gifPer aggiungere i gestori eventi

  1. Nella Parte 1: Creare un'app "Hello, world!" e nella Parte 2: Gestire il ciclo di vita e lo stato dell'app hai definito tre gestori eventi, ovvero buttonClickHandler, ratingChanged e nameInputChanged. Copia questi gestori eventi nel file home.js e impostali come membri di PageControl. Aggiungili dopo la funzione ready creata automaticamente dal modello.

        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.
    
            },
    
            buttonClickHandler: function (eventInfo) {
    
                var userName = document.getElementById("nameInput").value;
                var greetingString = "Hello, " + userName + "!";
                document.getElementById("greetingOutput").innerText = greetingString;
    
                // Save the session data. 
                WinJS.Application.sessionState.greetingOutput = greetingString;
            },
    
            ratingChanged: function (eventInfo) {
    
                var ratingOutput = document.getElementById("ratingOutput");
                ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
                // Store the rating for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
            },
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            }
    
    
        });
  2. A questo punto dobbiamo collegare i gestori eventi. Nelle parti 1 e 2 abbiamo creato una funzione then per l'oggetto Promise restituito da WinJS.UI.processAll. La situazione è più semplice adesso, perché possiamo usare la funzione ready per collegare i gestori eventi. La funzione ready viene chiamata dopo che PageControl ha chiamato automaticamente WinJS.UI.processAll.

    Copia il codice per collegare i gestori eventi alla funzione ready in home.js.

            // 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.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
            },
  3. Esegui l'app. Quando immetti un nome e fai clic sul pulsante, verrà visualizzato un messaggio saluto. Se classifichi il messaggio di saluto, verrà visualizzato il valore numerico di classificazione.

    L'app HelloWorldWithPages dopo la selezione di una classificazione

Passaggio 4: Ripristinare lo stato dell'app

Abbiamo quasi ricreato la funzionalità che avevamo nell'app "Hello, world". A questo punto non ci resta che ripristinare lo stato dell'app quando l'utente la avvia.

Come ricorderai, avevamo due tipi di stato dell'app da ripristinare:

  • Nome utente e classificazione. Ripristiniamo questo stato indipendentemente dal modo in cui l'app è stata arrestata.
  • Messaggio di saluto personalizzato. Ripristiniamo questo stato solo se l'app è stata chiusa correttamente l'ultima volta che è stata eseguita.

JJ663505.wedge(it-it,WIN.10).gifPer ripristinare lo stato dell'app

  1. Copia dall'app "Hello, world" il codice che ripristina il nome utente e la classificazione. Aggiungi il codice alla funzione ready in home.js.
            // 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.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
                // Restore app data. 
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                // Restore the user name.
                var userName =
                    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                if (userName) {
                    nameInput.value = userName;
                }
    
                // Restore the rating. 
                var greetingRating = roamingSettings.values["greetingRating"];
                if (greetingRating) {
                    ratingControl.userRating = greetingRating;
                    var ratingOutput = document.getElementById("ratingOutput");
                    ratingOutput.innerText = greetingRating;
                }
    
            },
  2. Vogliamo che il saluto personalizzato venga ripristinato solo se l'app è stata chiusa correttamente l'ultima volta che è stata eseguita. Purtroppo l'elemento PageControl non include una modalità predefinita per verificare lo stato di esecuzione precedente dell'app. Tale info viene fornita al gestore eventi onactivated nel file default.js. La soluzione a questo problema è comunque semplice. È sufficiente salvare lo stato di esecuzione precedente dell'app nell'oggetto sessionState in modo che risulti accessibile per PageControl .
    1. Nel file default.js aggiungi codice al gestore onactivated per salvare lo stato di esecuzione precedente. Salva lo stato aggiungendo una proprietà all'oggetto sessionState denominato previousExecutionState.
          app.addEventListener("activated", function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
      
                  // Save the previous execution state. 
                  WinJS.Application.sessionState.previousExecutionState = 
                      args.detail.previousExecutionState;
      
                  if (app.sessionState.history) {
                      nav.history = app.sessionState.history;
                  }
                  args.setPromise(WinJS.UI.processAll().then(function () {
                      if (nav.location) {
                          nav.history.current.initialPlaceholder = true;
                          return nav.navigate(nav.location, nav.state);
                      } else {
                          return nav.navigate(Application.navigator.home);
                      }
                  }));
              }
          });
    2. Nel file home.js aggiungi codice al metodo ready che verifica i dati di previousExecutionState. Se lo stato di esecuzione precedente è terminated, ripristina il saluto personalizzato. Puoi copiare il codice che consente di eseguire questa operazione dal file default.js dell'app "Hello, world".
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }

      Ecco il metodo ready completo.

              // 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.
      
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
      
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
      
                  // Register the event handler. 
                  ratingControl.addEventListener("change", this.ratingChanged, false);
      
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", this.buttonClickHandler, false);
      
                  // Retrieve the input element and register our
                  // event handler.
                  var nameInput = document.getElementById("nameInput");
                  nameInput.addEventListener("change", this.nameInputChanged);
      
                  // Restore app data. 
                  var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
                  // Restore the user name.
                  var userName =
                      Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                  if (userName) {
                      nameInput.value = userName;
                  }
      
                  // Restore the rating. 
                  var greetingRating = roamingSettings.values["greetingRating"];
                  if (greetingRating) {
                      ratingControl.userRating = greetingRating;
                      var ratingOutput = document.getElementById("ratingOutput");
                      ratingOutput.innerText = greetingRating;
                  }
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
              },
  3. Esegui l'app. Abbiamo ora duplicato la funzionalità che avevamo nell'app "Hello, world" originale.

Passaggio 5: Aggiungere un'altra pagina

La maggior parte delle app contiene diverse pagine. Aggiungiamo un'altra pagina alla nostra app. Poiché usiamo il modello Navigation App, è facile aggiungere altre pagine.

JJ663505.wedge(it-it,WIN.10).gifPer aggiungere un'altra pagina

  1. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella pages, quindi scegli Aggiungi > Nuova cartella. Nel progetto verrà visualizzata una nuova cartella.
  2. Rinomina la cartella in "page2".
  3. Fai clic con il pulsante destro del mouse sulla cartella page2 e quindi scegli Aggiungi > Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
  4. Seleziona Controllo pagina nell'elenco. Nella casella di testo Nome immetti "page2.html".

  5. Fai clic su Aggiungi per aggiungere PageControl. Il nuovo oggetto PageControl verrà visualizzato in Esplora soluzioni.

    Progetto HelloWorldWithPages

    Il nuovo oggetto PageControl include tre file: page2.css, page2.html e page2.js.

  6. Nel file page2.html sostituisci il riferimento al foglio di stile scuro:
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    

    Con questo:

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    

Abbiamo creato una nuova pagina e nel passaggio successivo imparerai a spostarti tra le pagine.

Passaggio 6: Usare la funzione di navigazione per spostarsi tra le pagine

A questo punto, abbiamo una seconda pagina ma l'utente non ha nessun modo per accedervi. Aggiorniamo la pagina home.html aggiungendo un link a page2.html.

JJ663505.wedge(it-it,WIN.10).gifPer spostarsi tra le pagine

  1. Apri home.html e aggiungi un link a page2.html.
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Hello, world!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
    
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
            </section>
        </div>
    </body>
  2. Esegui l'app e fai clic sul link. Sembra che funzioni: l'app visualizza page2.html.

    Finestra di dialogo Aggiungi nuovo elemento

Tuttavia, abbiamo un problema: l'app ha eseguito 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 secondo livello

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

Passaggio 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.navigated. 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.

JJ663505.wedge(it-it,WIN.10).gifPer sostituire il comportamento predefinito del collegamento ipertestuale

  1. Nel file home.js definisci un gestore dell'evento click per i collegamenti ipertestuali e impostalo come membro di PageControl. Assegna il nome linkClickEventHandler e aggiungilo dopo il gestore nameInputChanged.
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            },        
    
     
            linkClickEventHandler: function (eventInfo) {
    
            }
  2. Chiama il metodo preventDefault per impedire il comportamento predefinito del link, ovvero il passaggio diretto alla pagina specificata.
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
  3. Recupera il collegamento ipertestuale che ha generato l'evento.
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
  4. Chiama la funzione WinJS.Navigation.navigate e passa la destinazione del link. Se lo desideri, puoi anche passare un oggetto di stato che descrive lo stato per la pagina. Per altre informazioni, vedi la pagina WinJS.Navigation.navigate.
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
  5. Nella funzione ready del file home.js collega il gestore eventi ai collegamenti ipertestuali.

    WinJS fornisce una funzione WinJS.Utilities.query che semplifica il recupero di diversi elementi nella pagina. La funzione WinJS.Utilities.query restituisce un elemento QueryCollection, che fornisce metodi aggiuntivi per collegare e rimuovere gestori eventi. Usiamo la raccolta WinJS.Utilities.query e il metodo listen per collegare linkClickEventHandler.

            // 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", 
                    this.linkClickEventHandler, false);

    Il vantaggio di questo approccio è che funziona per qualsiasi numero di link nella pagina. In questo caso abbiamo un unico link ma con questo approccio potremmo aggiungerne altri senza modificare il codice.

  6. Esegui l'app e fai clic sul link per page2.html.

    Ora l'app visualizza page2.html nel modo corretto

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

    Scomposizione del contenuto dopo il passaggio a page2.html

Passaggio 7: Aggiungere un oggetto NavBar per altre opzioni di navigazione

L'oggetto NavBar è come un oggetto AppBar dedicato ai comandi di navigazione e in effetti NavBar è una sottoclasse dell'oggetto AppBar. Può contenere un semplice elenco di collegamenti o anche diversi livelli di collegamenti organizzati in categorie. Per popolare l'oggetto NavBar puoi utilizzare voci hardcoded, aggiornarlo a livello di codice oppure ricorrere al data binding.

L'oggetto NavBar viene visualizzato nella parte superiore della schermata dell'app quando serve all'utente. Per invocare l'oggetto NavBar l'utente può eseguire uno scorrimento rapido dai bordi, premere il tasto logo Windows + Z oppure fare clic con il pulsante destro del mouse.

NavBar inoltre supporta i layout verticali e gli elementi di esplorazione divisa, vale a dire gli elementi di esplorazione con opzioni di navigazione degli oggetti figlio. L'oggetto NavBar è estremamente personalizzabile: puoi usare i CSS per applicare uno stile praticamente a qualsiasi aspetto dell'oggetto NavBar e relativo contenuti, inoltre puoi creare elementi di navigazione personalizzati.

NavBar è un controllo WinJS. Per dichiararne uno nel codice HTML, usa questa sintassi:

<div id="navbar" data-win-control="WinJS.UI.NavBar">

</div>

L'oggetto NavBar ha tre componenti:

  • L'oggetto NavBar stesso.
  • Un oggetto NavBarContainer che contiene gli elementi di navigazione, vale a dire gli oggetti NavBarCommand, e supporta sia la paginazione, sia la panoramica e lo scorrimento. Un solo oggetto NavBarpuò contenere uno o più oggetti NavBarContainer. Usa gli oggetti NavBarContainer per definire gruppi di opzioni di navigazione.
  • Uno o più oggetti NavBarCommand. È su questi che fa clic l'utente per navigare.

Ecco un esempio di semplice oggetto NavBar:

<div id="NavBar" data-win-control="WinJS.UI.NavBar">
    <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>

L'app contiene diverse pagine. Dove dobbiamo aggiungere la barra di navigazione?

  • Se la barra di navigazione contiene comandi che devono essere disponibili in ogni pagina, aggiungila al file default.html.
  • Se invece la barra di navigazione cambia da una pagina all'altra, puoi definirne una diversa in ogni oggetto PageControl.
  • Puoi inoltre definire una barra di navigazione centrale in default.html e quindi modificarla mentre carichi oggetti PageControl diversi.

Creiamo una barra di navigazione semplice che consente all'utente di passare tra home.html e page2.html. Definiremo la barra di navigazione nel file default.html.

JJ663505.wedge(it-it,WIN.10).gifPer aggiungere una barra di navigazione

  1. Apri il file default.html. Aggiungi un controllo NavBar come primo figlio dell'elemento body.

        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
  2. Ogni barra di navigazione contiene uno o più oggetti NavBarContainer. Usa gli oggetti NavBarContainer per definire gruppi di opzioni di navigazione. Aggiungi un oggetti NavBarContainer alla barra di navigazione.

        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
  3. Ogni oggetto NavBarContainer contiene uno o più oggetti NavBarCommand. È su questi che fa clic l'utente per navigare. Aggiungi oggetti NavBarCommand all'oggetto NavBarContainer.

    Ecco quali sono le proprietà da impostare per ogni oggetto NavBarCommand:

    • label: etichetta da visualizzare per il comando.

    • icon: icona da visualizzare per il comando oppure percorso di un file PNG personalizzato. Per l'elenco dei valori di icona, vedi AppBarIcon.

    • location: posizione da raggiungere.

    • splitButton: indica se il comando include o meno un sottomenu. L'impostazione predefinita è false.

        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Home',
                        icon: WinJS.UI.AppBarIcon.home,
                        location: '/pages/home/home.html',
                        splitButton: false
                        }">
                    </div>
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Page 2',
                        icon: WinJS.UI.AppBarIcon.page,
                        location: '/pages/page2/page2.html',
                        splitButton: false
                        }">
                    </div>
            </div>
        </div>
     

    Questo esempio mostra come definire gli oggetti NavBarCommand inline, ma puoi generarli anche a partire da un'origine dati. Per un esempio in merito, vedi l' esempio di controllo HTML NavBar .

  4. Esegui l'app. Per mostrare la barra, esegui uno scorrimento rapido dal bordo, premi Win + Z oppure fai clic con il pulsante destro del mouse.

    Barra dell'app semplice

    Quando fai clic su un pulsante, il controllo richiama automaticamente la funzione navigate e apre la pagina corrispondente.

    Abbiamo dichiarato una barra di navigazione. Adesso applichiamo uno stile.

  5. Apri il file default.css e crea all'inizio uno stile CSS che cambia il colore di sfondo della barra dell'app.
    #navbar {
    
        background-color: #03abe2;
    }
    
  6. Esegui l'app. A questo punto puoi usare la barra di navigazione per passare tra le due pagine.

    App HelloWorldWithPages, con una barra dell'app

Riepilogo

Complimenti, hai portato a termine la terza esercitazione. Abbiamo illustrato come creare un progetto basato sul modello Navigation App e come usare gli oggetti PageControl. Abbiamo inoltre descritto come creare una barra dell'app.

Scaricare l'esempio

Ti sei bloccato oppure vuoi controllare il tuo lavoro? Allora, scarica gli esempi forniti con l'introduzione a JavaScript

Passaggi successivi

Nella parte successiva di questa serie di esercitazioni, apprenderemo come creare un'app complessa. Passa a Parte 4: Layout e visualizzazioni.

Argomenti correlati

Introduzione a JavaScript: codice completo della serie di esercitazioni
Programming Windows 8 Apps with HTML, CSS, and JavaScript (eBook)
Per progettisti
Modelli di esplorazione
Modelli d'uso dei comandi
Layout
Linee guida per i pulsanti Indietro
Linee guida per i controlli hub
Linee guida per le barre dell'app (app di Windows Store)
Come rendere accessibile la barra dell'app
Per sviluppatori (HTML)
Esempio di navigazione e cronologia di navigazione
Aggiunta di barre dell'app
Aggiunta di barre di spostamento
Navigazione tra le pagine (HTML)
Esempio del controllo Hub HTML
Esempio di controllo AppBar HTML
Esempio del controllo NavBar HTML
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

Microsoft sta conducendo un sondaggio in linea per comprendere l'opinione degli utenti in merito al sito Web di. Se si sceglie di partecipare, quando si lascia il sito Web di verrà visualizzato il sondaggio in linea.

Si desidera partecipare?