Comment étendre l’écran de démarrage (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Affichez un écran de démarrage plus longtemps en créant un écran de démarrage étendu. Cet écran sert souvent à imiter l’écran de démarrage affiché quand votre application est lancée, mais il est totalement personnalisable. Que vous vouliez afficher des informations de chargement en temps réel ou simplement donner à votre application un délai supplémentaire pour préparer son interface utilisateur initiale, un écran de démarrage étendu vous permet de définir l’expérience de lancement. Les étapes suivantes vous permettent de créer un écran de démarrage étendu identique à l’écran de démarrage fourni par le système.

Pour obtenir un exemple d’écran de démarrage étendu dans une application complète, voir l’exemple d’écran de démarrage.

Si vous voulez donner l’impression aux utilisateurs que l’écran de démarrage par défaut s’affiche plus longtemps, la page de votre écran de démarrage étendu doit imiter l’écran de démarrage affiché par défaut et ce, des façons suivantes :

  • La page de votre écran de démarrage étendu doit utiliser une image identique à celle spécifiée pour l’écran de démarrage dans le manifeste de votre application.
  • La vue doit utiliser une couleur d’arrière-plan identique à celle spécifiée pour l’écran de démarrage dans le manifeste de votre application.
  • Votre code doit utiliser la classe SplashScreen pour positionner l’image de l’écran de démarrage de votre application aux mêmes coordonnées d’écran que l’écran de démarrage par défaut.
  • Windows (pas Windows Phone) : Votre code doit répondre aux événements de redimensionnement de la fenêtre (comme en cas de redimensionnement de l’application ou de rotation de l’écran).

Important  Si vous avez déclaré un contrôle d’application globale, tel qu’un AppBar, dans le fichier default.html de votre projet, affectez à la propriété disabled du contrôle la valeur true lorsque vous appelez la fonction qui affiche votre écran de démarrage étendu, et réaffectez à disabled la valeur false lorsque vous quittez votre écran de démarrage étendu. Pour plus d’informations sur l’ajout de contrôles ou l’application d’un style à des contrôles, voir Ajout de contrôles et de contenu.

 

Prérequis

Étape 1: Créer une page d’écran de démarrage étendu

  1. Associez le code JavaScript, qui définit votre écran de démarrage étendu, à votre page d’accueil.

    L’exemple d’écran de démarrage ajoute ce code pour associer extendedSplash.js à default.html :

    <script src="/js/extendedSplash.js"></script>

  2. Ajoutez un écran de démarrage étendu <div> à votre page d’accueil.

    L’exemple d’écran de démarrage utilise ce code HTML pour ajouter un écran de démarrage étendu <div> au <body> de sa page de destination (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>

    Les attributs id et class sont définis de manière à pouvoir être utilisés pour la stylisation et la manipulation. L’écran de démarrage étendu <div> définit également la classe "hidden", afin qu’il ne soit pas visible tant que le code JavaScript de l’écran de démarrage étendu ne l’affiche pas.

  3. Ajoutez du code CSS pour appliquer un style au balisage de l’écran de démarrage étendu sur votre page d’accueil.

    Assurez-vous d’appliquer le style position:absolute au HTML de l’écran de démarrage étendu. Le positionnement absolu permet à votre application d’utiliser la totalité de l’écran lors de l’affichage de votre écran de démarrage étendu. Il vous permet également de positionner l’image de l’écran de démarrage en utilisant les mêmes coordonnées d’écran que l’écran de démarrage par défaut.

    L’exemple d’écran de démarrage ajoute le code CSS suivant (à default.css) pour appliquer un style aux balises de l’écran de démarrage étendu sur sa page d’accueil :

    .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;
}

    Les classes et ID qui définissent ces styles identifient également les balises de l’écran de démarrage étendu dans le HTML de la page d’accueil.

Étape 2: Ajouter du code au gestionnaire d’événements activated qui affiche votre écran de démarrage étendu

L’exemple d’écran de démarrage indique comment afficher l’écran de démarrage étendu à l’aide du gestionnaire d’événements activated (la fonction activated) dans le fichier 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’exemple d’écran de démarrage utilise cette procédure pour afficher son écran de démarrage étendu et positionner l’image de l’écran de démarrage quand l’application est activée (dans son gestionnaire d’événements activated dans le fichier default.js) :

  1. Obtenez les coordonnées d’affichage de l’image de l’écran de démarrage. Ces coordonnées sont stockées dans une propriété de l’objet SplashScreen, qui est accessible à partir de l’objet d’événement passé au gestionnaire d’événements activated.

    L’exemple d’écran de démarrage recherche les coordonnées à l’aide du code suivant :

    
    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;

  2. Écoutez l’événement dismissed de l’écran de démarrage, puis commencez à charger les ressources de l’application. Le système déclenche l’événement dismissed quand il supprime l’écran de démarrage fourni par le système et, dans ce cas, bascule vers l’affichage de l’écran de démarrage étendu de votre application. Démarrez les opérations de configuration dans un gestionnaire d’événements dismissed et quittez l’écran de démarrage étendu une fois la configuration de l’application terminée.

    L’exemple d’écran de démarrage inscrit son gestionnaire d’événements dismissed (onSplashScreenDismissed) dans la fonction activated dans default.js :

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

    Définissez le gestionnaire d’événements dismissed en dehors de l’événement activated dans default.js. L’exemple d’écran de démarrage n’ayant pas besoin d’attendre le chargement des ressources, il supprime l’écran de démarrage étendu quand un utilisateur clique sur le bouton "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);
        }
    }

    Créez une fonction qui supprime l’écran de démarrage étendu dans votre fichier 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");
        }
    }

  3. Positionnez et affichez l’écran de démarrage étendu.

    L’exemple d’écran de démarrage positionne et affiche l’écran de démarrage à l’aide du code suivant dans son gestionnaire d’événements activated (dans default.js) :

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

    Ajoutez une fonction qui positionne l’image de l’écran de démarrage étendu dans 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");
}

  4. Windows (pas Windows Phone) : Écoutez les événements de redimensionnement de fenêtre et répondez en repositionnant l’image de l’écran de démarrage. Cela garantit la bonne mise en forme de votre écran de démarrage étendu en cas de redimensionnement de votre application. Les changements d’orientation sont automatiquement gérés si vous créez une disposition flexible ou que vous placez le contenu dans un contrôle flexible, tel qu’un ViewBox.

    Inscrivez votre gestionnaire d’événements de redimensionnement à l’intérieur de votre gestionnaire d’événements activated (dans 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);

    Ajoutez ensuite du code pour définir le gestionnaire d’événements. Cette fonction obtient les coordonnées d’emplacement de l’image mises à jour, puis appelle une autre fonction pour mettre à jour l’emplacement de l’image sur la page d’écran de démarrage étendu.

    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’exemple définit updateImageLocation dans le fichier extendedSplash.js. Si l’écran de démarrage étendu est visible, il positionne son image au même endroit que l’écran de démarrage affiché par le système.

    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";
        */
    }
}

Remarques

Astuce  Si vous apercevez un scintillement lors de la transition qui précède l’affichage de votre écran de démarrage étendu, ajoutez onload="" dans votre balise <img> comme suit : <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Le système attend alors que votre image soit affichée avant de basculer vers l’écran de démarrage étendu, ce qui empêche le scintillement.

 

Rubriques associées

Comment activer une application

Exemple d’écran de démarrage

Guidelines for splash screens

How to extend the splash screen (Windows Runtime apps using C#/VB/C++ and XAML)

Référence

WinJS.Application.onactivated event

Windows.ApplicationModel.Activation namespace

Windows.ApplicationModel.Activation.splashScreen class

Windows.ApplicationModel.Activation.splashScreen.imageLocation property