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

Articolo
12/11/2015

[ 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 aggiungere una barra di spostamento (nota anche come "barra di navigazione" o "barra superiore") alla tua app di Windows Store usando JavaScript. La libreria Windows per JavaScript (WinJS) include controlli NavBar, NavBarCommand e NavBarContainer che facilitano la creazione di un'app con navigazione a pagina singola.

Nota I controlli NavBar, NavBarCommand e NavBarContainer sono nuovi di Windows 8.1. In Windows 8 usa il controllo AppBar e la proprietà placement per fornire una barra di spostamento.

La maggior parte dei modelli di Microsoft Visual Studio 2013 per le app di Windows Store implementa il framework di spostamento, pertanto non devi occupartene. Questi modelli, compreso il modello di elemento Controllo pagina (vedi Aggiunta di controlli pagina), includono il controllo BackButton che ti permette di fornire lo spostamento all'indietro per gli utenti.

Nota Le app di Windows Store in genere usano due modelli di navigazione: normale e gerarchica. Ti consigliamo di non usare l'oggetto BackButton nelle app con navigazione semplice. Per informazioni dettagliate, vedi Modelli di esplorazione.

L'esempio descritto qui usa il modello Applicazione vuota di Microsoft Visual Studio. Se usi il markup e gli stili predefiniti, i comandi che inserirai nel controllo NavBar avranno uno stile corretto. Per le icone dei comandi sono supportati sia gli sprite di immagini che i glifi dei tipi di carattere.

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

Istruzioni

1. Creare un nuovo progetto con il modello Blank App

Avvia Visual Studio 2013.

Nota Alla prima esecuzione di Visual Studio, ti verrà chiesto di ottenere una licenza per sviluppatori.
Scegli File > Nuovo progetto o fai clic su Nuovo progetto nella scheda Pagina iniziale. Viene aperta la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandi Modelli e JavaScript e quindi seleziona il tipo di modello App di Windows Store. I modelli di progetto disponibili per JavaScript vengono visualizzati nel riquadro centrale della finestra di dialogo.
Nel riquadro centrale seleziona il modello di progetto Applicazione vuota.
Nella casella di testo Nome digita un nome per il progetto. Negli esempi riportati in questo argomento viene usato il nome Demo barra di spostamento.
Fai clic su OK per creare il progetto.

2. Aggiungere la definizione della barra di spostamento al progetto

La barra di spostamento può essere definita in modo dichiarativo in una pagina HTML oppure in fase di esecuzione in un file JavaScript caricato con la pagina. In questo esempio la barra di spostamento viene creata in modo dichiarativo nel markup HTML.

Apri default.html e inserisci il codice HTML seguente all'interno dell'elemento body. La barra di spostamento deve essere un figlio diretto dell'elemento body.

Qui dichiariamo un controllo NavBar contenente un oggetto NavBarContainer con due controlli NavBarCommand.

Nota Finché è valido, ti consigliamo di non aggiungere controlli NavBarCommand come elementi figlio immediati di NavBar. Verrebbero compromessi sia il layout dei pulsanti che l'accessibilità tramite tastiera.


<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',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. Aggiungere il codice del gestore di spostamento

Gli oggetti NavBarCommand dichiarati nel markup generano in modo intrinseco gli eventi di spostamento (Navigation.onnavigating e Navigation.onnavigated). Non è quindi necessario aggiungere codice gestore agli oggetti NavBarCommand. È invece necessario aggiungere codice gestore agli eventi Navigation.onnavigating o Navigation.onnavigated nel file default.js associato al file default.html.

L'esempio seguente mostra come aggiungere un gestore all'evento Navigation.onnavigated. Il gestore ottiene l'URL del percorso di destinazione dall'oggetto evento (definito nella proprietà location dell'attributo data-win-options di NavBarCommand). Il gestore quindi elimina dall'host del contenuto (controllo pagina) il contenuto esistente ed esegue il rendering della nuova pagina nell'host.

In Esplora soluzioni apri default.js dalla cartella js.

In default.js sostituisci il codice predefinito con quello seguente.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Aggiungere due pagine tra cui spostarsi

Puoi aggiungere queste pagine manualmente o tramite il modello di elemento Controllo pagina di Visual Studio, che fornisce tutto il markup e il codice JavaScript necessari.

Dn376409.wedge(it-it,WIN.10).gif Aggiungere manualmente nuove pagine al progetto

In Esplora soluzioni fai clic con il pulsante destro del mouse sul nome del progetto (Demo barra di spostamento) e quindi scegli Aggiungi, Nuova cartella. Assegna alla nuova cartella il nome "pages".
Fai clic con il pulsante destro del mouse sulla cartella pages che hai appena creato e scegli Aggiungi, Nuova cartella. Assegna alla nuova cartella il nome "home".
Crea una seconda cartella in pages. Assegna a questa cartella il nome "page2".
Fai clic con il pulsante destro del mouse sulla cartella home e scegli Aggiungi, Nuovo file HTML. Nella finestra di dialogo Aggiungi nuovo elemento assegna il nome "home.html" a questo file e quindi scegli Aggiungi.

Sostituisci il codice HTML predefinito con quello seguente.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Ripeti il passaggio precedente per la cartella page2. Assegna al file il nome " page2.html".

Sostituisci il codice HTML predefinito con quello seguente.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

In alternativa, puoi usare i modelli di elemento JavaScript per le app di Windows Store in Visual Studio.

Dn376409.wedge(it-it,WIN.10).gif Usare il modello di elemento Controllo pagina per aggiungere nuove pagine al progetto

Crea la cartella pages con le sottocartelle home e page2 come descritto in precedenza.
Fai clic con il pulsante destro del mouse sulla cartella home e scegli Aggiungi > Nuovo elemento. Viene visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Seleziona Controllo pagina nell'elenco. Nella casella di testo Nome digita "home.html".
Fai clic su Aggiungi. In Esplora soluzioni viene quindi visualizzato un nuovo oggetto PageControl.

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

Nota I file HTML aggiunti in questo modo includono il codice per il controllo BackButton. Come spiegato in precedenza, se stai usando un modello di navigazione semplice, è consigliabile non usare BackButton. Perciò puoi eliminare tranquillamente questo codice. Per altri dettagli, vedi Modelli di esplorazione.
Fai clic con il pulsante destro del mouse sulla cartella page2 e scegli Aggiungi > Nuovo elemento. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Seleziona Controllo pagina nell'elenco. Nella casella di testo Nome digita "page2.html".
Fai clic su Aggiungi. In Esplora soluzioni viene quindi visualizzato un nuovo oggetto PageControl.

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

5. Testare l'app

Premi F5 per eseguire l'app. L'app visualizza la pagina Home.
Mentre l'app è in esecuzione, fai clic con il pulsante destro del mouse in un punto qualsiasi dell'app per far apparire la barra di spostamento e quindi scegli Page2.

La pagina Page2 viene visualizzata nel controllo pagina dell'app.
Fai di nuovo clic con il pulsante destro del mouse per far apparire la barra di spostamento e quindi scegli Home.

La pagina Home viene visualizzata nel controllo pagina dell'app.

Riepilogo e passaggi successivi

In questa guida introduttiva hai imparato ad aggiungere alla tua app un oggetto NavBar con un oggetto NavBarContainer e quattro oggetti NavBarCommand. Hai anche imparato ad aggiungere una semplice funzione gestore per l'evento Navigation.onnavigated.

Per un esempio di layout e navigazione gerarchica più complesso, vedi l'esercitazione successiva sul controllo Hub.

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