Come estendere la schermata iniziale (HTML)

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 ]

Prolunga la visualizzazione della schermata iniziale creando una schermata iniziale estesa. Questa schermata viene spesso progettata per riprodurre la schermata iniziale visualizzata all'avvio di un'app, ma è completamente personalizzabile. Che l'intenzione sia quella di mostrare le informazioni di caricamento in tempo reale o semplicemente concedere a un'app tempo aggiuntivo per preparare l'interfaccia utente iniziale, una schermata iniziale estesa permette di definire l'esperienza di avvio. Questi passaggi ti aiuteranno a creare una schermata iniziale estesa identica alla schermata iniziale fornita dal sistema.

Per una schermata iniziale estesa in un'app completa, vedi l'esempio di schermata iniziale.

Per dare agli utenti l'impressione che la schermata iniziale predefinita rimanga visualizzata più a lungo, la schermata iniziale estesa dovrà riprodurre la schermata iniziale predefinita come segue:

La pagina della schermata iniziale estesa deve usare la stessa immagine specificata per la schermata estesa nel manifesto dell'app.
La visualizzazione deve usare un colore di sfondo coerente con quello specificato per la schermata iniziale nel manifesto dell'app.
Il codice deve usare la classe SplashScreen per posizionare l'immagine della schermata iniziale dell'app in corrispondenza delle stesse coordinate dello schermo in cui viene posizionata la schermata iniziale predefinita.
Windows (non Windows Phone): il codice deve rispondere agli eventi di ridimensionamento della finestra (come quando l'app viene ridimensionata o lo schermo viene ruotato).

Importante Se hai dichiarato un controllo dell'app globale, ad esempio AppBar, nel file default.html del progetto, imposta la proprietà disabled del controllo su true quando chiami la funzione che visualizza la schermata iniziale estesa e reimposta disabled su false quando ti sposti dalla schermata iniziale estesa. Se hai bisogno di altre informazioni su come aggiungere controlli o applicarvi stili, vedi Aggiunta di controlli e contenuto.

Prerequisiti

Microsoft Visual Studio 2013 e Windows 8.1. Per scaricarli, vedi Trovare gli strumenti necessari.
Un progetto di app di Windows Runtime in JavaScript e HTML. Se non hai ancora iniziato un progetto, segui le istruzioni dettagliate disponibili in Creazione della prima app di Windows Store in JavaScript
Conoscenza dei principi di base per l'attivazione di un'app. Vedi How to handle app activation per informazioni sugli eventi activated.

Passaggio 1: Creare una pagina della schermata iniziale estesa

Associa il codice JavaScript che definisce la schermata iniziale estesa alla pagina di destinazione.

L'esempio di schermata iniziale aggiunge questo codice per associare extendedSplash.js con default.html:
```
<script src="/js/extendedSplash.js"></script>
```

Aggiungi un <div> della schermata iniziale estesa alla pagina di destinazione.

L'esempio di schermata iniziale usa il codice l'HTML seguente per aggiungere un elemento <div> della schermata iniziale estesa all'elemento <body> della pagina di destinazione (default.html):

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

Gli attributi id e class sono impostati per essere usati per l'applicazione di stili e la manipolazione. Il <div> della schermata iniziale estesa imposta anche la classe "hidden" in modo che non sia visibile finché non viene mostrata dal codice JavaScript della schermata iniziale estesa.

Aggiungi CSS per applicare stili al markup della schermata iniziale estesa nella pagina di destinazione.

Assicurati di applicare stili all'HTML della schermata iniziale estesa per usare lo stile position:absolute. Il posizionamento assoluto permette all'app di usare l'intero schermo per visualizzare la schermata iniziale estesa Consente inoltre di posizionare l'immagine della schermata iniziale usando le stesse coordinate dello schermo utilizzate dalla schermata iniziale predefinita.

L'esempio di schermata iniziale aggiunge questo CSS (a default.css) per aggiungere stile ai tag della schermata iniziale estesa nella pagina di destinazione:
```
.extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}
```
Le classe e gli ID che definiscono questi stili identificano anche i tag della schermata iniziale estesa nell'HTML della pagina di destinazione.

Passaggio 2: Aggiungere il codice al gestore dell'evento attivato che visualizza la schermata iniziale estesa

L'esempio di schermata iniziale mostra come visualizzare la schermata iniziale estesa usando il gestore dell'evento activated (ovvero la funzione activated) nel file default.js.


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This ensures that the extended splash screen is formatted properly when the window is resized.
        window.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

L'esempio di schermata iniziale segue questa procedura per visualizzare la schermata iniziale estesa e posizionare l'immagine della schermata iniziale quando l'app viene attivata (all'interno del gestore dell'evento activated nel file default.js):

Ottieni le coordinate in cui viene visualizzata l'immagine della schermata iniziale predefinita. Queste coordinate sono archiviate in una proprietà dell'oggetto SplashScreen, accessibile dall'oggetto evento che viene passato al gestore dell'evento activated.

L'esempio di schermata iniziale ottiene le coordinate usando il seguente codice:
```
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
```

Resta in ascolto dell'evento di chiusura della schermata iniziale, quindi inizia a caricare le risorse dell'app. Il sistema genera l'evento dismissed alla chiusura della schermata iniziale fornita dal sistema e, in questo caso, passa a visualizzare la schermata iniziale estesa dell'app. Avvia le operazioni di configurazione all'interno di un gestore dell'evento di chiusura ed esci dalla schermata iniziale estesa al termine della configurazione dell'app.

L'esempio di schermata iniziale registra il gestore dell'evento di chiusura (onSplashScreenDismissed) nella funzione activated nel file default.js:

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

Definisci il gestore dell'evento di chiusura all'esterno dell'evento activated in default.js. Poiché l'esempio di schermata iniziale non deve attendere il caricamento delle risorse, rimuove la schermata iniziale estesa quando l'utente fa clic sul pulsante "Learn More".

    function onSplashScreenDismissed() {
        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        SdkSample.dismissed = true;

        // Tear down the app's extended splash screen after completing setup operations here...
        // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
        document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
        }
    }

Crea una funzione che rimuova la schermata iniziale estesa nel file extendedSplash.js.

    // Removes the extended splash screen if it is currently visible.
    function remove() {
        if(isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }

Posiziona e visualizza la schermata iniziale estesa.

L'esempio di schermata iniziale crea e visualizza la schermata iniziale usando il codice seguente nel gestore dell'evento di attivazione (in default.js):


        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

Aggiungi una funzione che riposizioni l'immagine della schermata iniziale estesa in extendedSplash.js.


// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");

    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";

    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
    /*
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
    */

    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

Windows (non Windows Phone): resta in attesa degli eventi di ridimensionamento della finestra e rispondi riposizionando l'immagine della schermata iniziale. In questo modo la schermata iniziale estesa sarà formattata correttamente in caso di ridimensionamento dell'app. I cambi di orientamento saranno gestiti automaticamente se crei un layout flessibile o inserisci contenuto in un controllo flessibile come ViewBox.

Registra il gestore dell'evento di ridimensionamento nel gestore dell'evento activated (in default.js):

            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to resizing, rotation, etc...
            window.addEventListener("resize", onResize, false);

Aggiungi quindi il codice per definire il gestore dell'evento. Questa funzione ottiene le coordinate di posizione dell'immagine aggiornata, quindi chiama un'altra funzione per aggiornare la posizione dell'immagine nella pagina della schermata iniziale estesa.

function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

L'esempio definisce updateImageLocation in extendedSplash.js. Se la schermata iniziale estesa è visibile, colloca la sua immagine nella stessa posizione della schermata iniziale visualizzata dal sistema.

function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}

Osservazioni

Suggerimento Se noti uno sfarfallio durante la transizione alla schermata iniziale estesa, aggiungi onload="" al tuo tag <img>, in questo modo: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Questo consente di evitare lo sfarfallio obbligando il sistema ad attendere la fine del rendering dell'immagine, prima di passare alla schermata iniziale estesa.