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

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 un controllo Hub alla tua app di Windows Store scritta in JavaScript.

Per informazioni su come scegliere il modello di navigazione migliore per la tua app, vedi l'argomento sui modelli di navigazione.

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

Prerequisiti

Istruzioni

1. Creare un nuovo progetto con il modello Applicazione vuota

Avvia Microsoft Visual Studio Express 2013 per Windows.
Nella scheda Pagina iniziale fai clic su Nuovo progetto. Verrà aperta la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandi Modelli e JavaScript e 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 scegli il modello di progetto Applicazione vuota.
Nella casella di testo Nome inserisci Demo hub.
Fai clic su OK per creare il progetto.

2. Aggiungere la definizione dell'hub al progetto

Definisci il controllo Hub in modo dichiarativo in una pagina HTML o in fase di esecuzione tramite codice JavaScript caricato con la pagina. Questo esempio crea l'hub in modo dichiarativo nel markup HTML.

Apri default.html e inserisci il codice HTML seguente all'interno dell'elemento body. L'hub deve essere un figlio diretto dell'elemento body. È una buona idea inserire i comandi globali prima di quelli contestuali nel modello DOM (Document Object Model) in modo da ottenere un layout ottimale quando gli utenti ridimensionano la tua app.

Questo esempio crea un hub in modo dichiarativo con tre oggetti HubSection, in cui il secondo HubSection è la prima sezione visibile nell'Hub. Usa gli stili predefiniti o scrivi stili CSS (Cascading Style Sheet) personalizzati per i controlli Hub e HubSection.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. Aggiungere il codice per gestire gli eventi Hub

Due degli oggetti HubSection in questo esempio hanno intestazioni dinamiche: quando vi si fa clic sopra, generano l'evento Hub.onheaderinvoked per impostazione predefinita. Per impostare intestazioni statiche o dinamiche, usa la proprietà HubSection.isHeaderStatic il cui valore è false per impostazione predefinita.

Nel gestore di eventi Hub.onheaderinvoked, l'oggetto HubSection o l'indice dell'oggetto HubSection richiamato può essere estratto dagli argomenti dell'evento (l'indice è in base zero).

Il seguente esempio mostra come aggiungere un gestore all'evento Hub.onheaderinvoked. Il gestore riceve l'indice dell'HubSection richiamato e imposta il valore Hub.sectionOnScreen.

In Esplora soluzioni apri default.js dalla cartella js.

Nel file default.js, sostituisci il codice esistente con questo codice.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    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.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

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

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

Imposta l'ambiente di runtime su Simulatore e premi F5 per eseguire l'app.
Cambia la risoluzione della finestra del simulatore in modo che l'ultima sezione dell'hub sia parzialmente fuori schermo quando si scorre la pagina a sinistra.
Fai clic sull'intestazione dell'ultima sezione parzialmente visibile dell'hub per scorrere la pagina hub in modo che la sezione risulti completamente visibile.

4. Navigazione in un'app hub

Le app hub seguono il cosiddetto modello di navigazione gerarchico. Per ulteriori informazioni sulle esperienze utente di navigazione nelle app di Windows Store, vedi Modelli di navigazione.

Nelle app che includono raccolte di contenuti di grandi dimensioni o numerose sezioni distinte di contenuti esplorabili, in genere si preferisce offrire un modo per tornare rapidamente indietro. Intestazioni di pagine e sezioni in un'app hub possono ospitare controlli BackButton. Ogni pagina può ospitare un pulsante Indietro che rimane nascosto finché non si passa alla pagina in questione da un'altra, nel qual caso il pulsante diventa visibile. Il controllo BackButton può essere creato in modo dichiarativo nel codice HTML della pagina o in fase di esecuzione con JavaScript.

Il controllo BackButton non richiede eccessivo impegno. La maggior parte del codice associazione alla funzionalità di navigazione del pulsante Indietro è infatti integrata nella piattaforma Libreria Windows per JavaScript (WinJS). È sufficiente dichiarare il controllo nel markup HTML come illustrato qui.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

Senza applicare stili, il controllo BackButton viene visualizzato in un blocco separato sopra il titolo della pagina. Per ottenere lo stile di Windows che visualizza il pulsante in linea con il titolo, è necessario aggiungere attributi CSS personalizzati al progetto. In particolare, è necessario creare una griglia nell'elemento padre (il tag <section>) che disponga i due elementi affiancati.

In default.css (nella cartella css), aggiungi il seguente codice CSS per modificare il layout del controllo BackButton e del titolo nelle pagine.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

Riepilogo

In questa guida introduttiva, abbiamo aggiunto un controllo Hub con tre oggetti HubSection. Hai anche imparato ad aggiungere una semplice funzione del gestore all'evento Hub.onheaderinvoked.

Hai inoltre aggiunto un controllo BackButton a ogni pagina dell'app.