So wird’s gemacht: Erweitern des Begrüßungsbildschirms (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Durch das Erstellen eines erweiterten Begrüßungsbildschirms können Sie den Begrüßungsbildschirm für einen längeren Zeitraum anzeigen. Dieser Bildschirm ist häufig so entworfen, dass er den beim App-Start angezeigten Begrüßungsbildschirm imitiert. Er kann jedoch vollständig angepasst werden. Mit einem erweiterten Begrüßungsbildschirm können Sie das Startverhalten unabhängig davon definieren, ob Sie Echtzeitinformationen zum Ladevorgang anzeigen oder der App lediglich zusätzliche Zeit zum Vorbereiten der UI-Anfangselemente geben möchten. Mit diesen Schritten können Sie einen erweiterten Begrüßungsbildschirm erstellen, der mit dem vom System bereitgestellten Begrüßungsbildschirm identisch ist.

Einen erweiterten Begrüßungsbildschirm in einer vollständigen App finden Sie unter Begrüßungsbildschirmbeispiel.

Wenn Sie Benutzern den Eindruck vermitteln möchten, dass der standardmäßige Begrüßungsbildschirm länger angezeigt wird, muss der erweiterte Begrüßungsbildschirm den standardmäßigen Begrüßungsbildschirm in den folgenden Punkten imitieren:

Sie sollten für den erweiterten Begrüßungsbildschirm dasselbe Bild verwenden, das im App-Manifest für den Begrüßungsbildschirm angegeben ist.
Sie müssen für Ihre Ansicht eine Hintergrundfarbe verwenden, die mit der in Ihrem App-Manifest für Ihren Begrüßungsbildschirm angegebenen Hintergrundfarbe konsistent ist.
Sie müssen im Code die SplashScreen-Klasse verwenden, um das Bild des App-Begrüßungsbildschirms an den gleichen Koordinaten zu positionieren, an denen der standardmäßige Begrüßungsbildschirms positioniert wird.
Windows (nicht Windows Phone): Der Code muss auf Ereignisse zur Änderung der Fenstergröße (z. B. beim Ändern der App-Größe oder beim Drehen des Bildschirms) reagieren.

Wichtig Wenn Sie ein globales App-Steuerelement, wie eine AppBar, in der Datei default.html Ihres Projekts deklariert haben, setzen Sie die disabled-Eigenschaft des Steuerelements auf true, wenn Sie die Funktion aufrufen, die den erweiterten Begrüßungsbildschirm anzeigt, und setzen Sie sie disabled wieder auf false, wenn Sie den erweiterten Begrüßungsbildschirm verlassen. Weitere Informationen zum Hinzufügen oder Formatieren von Steuerelementen finden Sie unter Hinzufügen von Steuerelementen und Inhalten.

Voraussetzungen

Microsoft Visual Studio 2013 und Windows 8.1 Informationen zum Herunterladen finden Sie unter Herunterladen der Tools.
Ein Windows-Runtime-App-Projekt, das JavaScript und HTML verwendet Sie haben noch nicht mit einem Projekt begonnen? Lesen Sie die detaillierten Anweisungen unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.
Kenntnisse der allgemeinen Grundlagen der App-Aktivierung Weitere Informationen über activated-Ereignisse finden Sie unter How to handle app activation.

Schritt 1: Erstellen Sie eine Seite für den erweiterten Begrüßungsbildschirm

Verknüpfen Sie den JavaScript-Code, der den erweiterten Begrüßungsbildschirm definiert, mit der Zielseite.

Das Begrüßungsbildschirmbeispiel fügt diesen Code hinzu, um extendedSplash.js mit default.html zu verknüpfen:
```
<script src="/js/extendedSplash.js"></script>
```

Fügen Sie ein <div>-Element für den erweiterten Begrüßungsbildschirm zur Zielseite hinzu.

Im Begrüßungsbildschirmbeispiel wird der folgende HTML-Code verwendet, um ein <div>-Element für den erweiterten Begrüßungsbildschirm zum <body> der Zielseite (default.html) hinzuzufügen:

<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>

Die Attribute id und class werden festgelegt, sodass sie für Formatierungen und Änderungen verwendet werden können. Im <div>-Element für den erweiterten Begrüßungsbildschirm wird außerdem die "hidden"-Klasse festgelegt, sodass er erst sichtbar wird, wenn er vom JavaScript-Code für den erweiterten Begrüßungsbildschirm angezeigt wird.

Fügen Sie CSS hinzu, um das Markup für den erweiterten Begrüßungsbildschirm auf der Zielseite zu gestalten.

Stellen Sie sicher, dass der HTML-Code für den erweiterten Begrüßungsbildschirm so gestaltet wird, dass der position:absolute-Stil verwendet wird. Mittels absoluter Positionierung erreichen Sie, dass die App bei der Anzeige des erweiterten Begrüßungsbildschirms den ganzen Bildschirm nutzt. Außerdem können Sie das Begrüßungsbildschirmbild mithilfe der gleichen Bildschirmkoordinaten positionieren, die für den standardmäßigen Begrüßungsbildschirm verwendet werden.

Im Beispiel für einen Begrüßungsbildschirm wird das folgende CSS (zu default.css) hinzugefügt, um die Tags für den erweiterten Begrüßungsbildschirm auf der Zielseite zu gestalten:
```
.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;
}
```
Die Klassen und IDs, die diese Formate definieren, bezeichnen auch die Tags für den erweiterten Begrüßungsbildschirm im HTML-Code der Zielseite.

Schritt 2: Fügen Sie Code zum Aktivierungsereignishandler hinzu, durch den der erweiterte Begrüßungsbildschirm angezeigt wird.

Anhand des Beispiels für einen Begrüßungsbildschirm wird dargestellt, wie Sie den erweiterten Begrüßungsbildschirm mithilfe des activated-Ereignishandlers anzeigen (der activated-Funktion in der Datei 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);
        }));
    }
}

Im Beispiel für einen Begrüßungsbildschirm werden die folgenden Schritte verwendet, um den erweiterten Begrüßungsbildschirm anzuzeigen und das Begrüßungsbildschirmbild zu positionieren, wenn die App aktiviert wird (innerhalb des zugehörigen activated-Ereignishandlers in der Datei default.js):

Rufen Sie die Koordinaten der Position ab, an der das standardmäßige Begrüßungsbildschirmbild angezeigt wird. Diese Koordinaten werden in einer Eigenschaft des SplashScreen-Objekts gespeichert, das über das Ereignisobjekt zugänglich ist, das an den activated-Ereignishandler übergeben wird.

Im Beispiel für einen Begrüßungsbildschirm werden die Koordinaten mithilfe des folgenden Codes abgerufen:
```
    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;
```
Lauschen Sie auf das „Dismissed“-Ereignis des Begrüßungsbildschirms, und beginnen Sie dann mit dem Laden der App-Ressourcen. Das System löst das dismissed-Ereignis aus, wenn der vom System bereitgestellte Begrüßungsbildschirm geschlossen und – in diesem Fall – der erweiterte Begrüßungsbildschirm Ihrer App angezeigt wird. Starten Sie Setupvorgänge innerhalb eines „Dismissed“-Ereignishandlers, und verlassen Sie den erweiterten Begrüßungsbildschirm, wenn das App-Setup abgeschlossen ist.

Das Beispiel für einen Begrüßungsbildschirm registriert den "Dismissed"-Ereignishandler (onSplashScreenDismissed) in der activated-Funktion in default.js:
```
        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);
```
Definieren Sie den Dismissed-Ereignishandler außerhalb des activated-Ereignisses in default.js. Da das Beispiel für einen Begrüßungsbildschirm nicht warten muss, bis Ressourcen geladen werden, wird der erweiterte Begrüßungsbildschirm entfernt, wenn ein Benutzer auf die Schaltfläche "Weitere Informationen" klickt.
```
    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);
        }
    }
```
Erstellen Sie eine Funktion zum Entfernen des erweiterten Begrüßungsbildschirms in Ihrer extendedSplash.js-Datei.
```
    // Removes the extended splash screen if it is currently visible.
    function remove() {
        if(isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }
```

Positionieren Sie den erweiterten Begrüßungsbildschirm, und zeigen Sie ihn an.

Im Beispiel für einen Begrüßungsbildschirm wird der Begrüßungsbildschirm mithilfe des folgenden Codes im zugehörigen Aktivierungsereignishandler (in default.js) erstellt und angezeigt:


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

Fügen Sie zu extendedSplash.js eine Funktion zum Positionieren des Bildes für den erweiterten Begrüßungsbildschirm hinzu.


// 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 (nicht Windows Phone): Achten und reagieren Sie auf Ereignisse zur Änderung der Fenstergröße, indem Sie das Begrüßungsbildschirmbild neu positionieren. So können Sie sicherstellen, dass Ihr erweiterter Begrüßungsbildschirm korrekt formatiert ist, auch wenn die Größe der App geändert wird. Änderungen der Ausrichtung werden automatisch behandelt, wenn Sie ein flexibles Layout verwenden oder den Inhalt in einem flexiblen Steuerelement platzieren (z. B. ViewBox).

Registrieren Sie Ihren Handler für Größenänderungsereignisse innerhalb des activated-Ereignishandlers (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);

Fügen Sie anschließend Code hinzu, um den Ereignishandler zu definieren. Diese Funktion ruft die aktualisierten Bildpositionskoordinaten ab und anschließend eine weitere Funktion auf, um die Bildposition auf der Seite mit dem erweiterten Begrüßungsbildschirm zu aktualisieren.

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

Das Beispiel definiert updateImageLocation in extendedSplash.js. Wenn der erweiterte Begrüßungsbildschirm sichtbar ist, wird das Bild des erweiterten Begrüßungsbildschirms an derselben Position angeordnet wie der systemeigene Begrüßungsbildschirm.

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

Anmerkungen

Tipp Wenn beim Übergang zu Ihrem erweiterten Anmeldebildschirm ein Flimmern auftritt, fügen Sie Ihrem <img>-Tag folgendermaßen onload="" hinzu: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Somit wird das Flimmern verhindert, indem das System angewiesen wird zu warten, bis das Bild gerendert wurde, bevor es zu Ihrem erweiterten Anmeldebildschirm wechselt.

So wird’s gemacht: Erweitern des Begrüßungsbildschirms (HTML)

Voraussetzungen

Schritt 1: Erstellen Sie eine Seite für den erweiterten Begrüßungsbildschirm

Schritt 2: Fügen Sie Code zum Aktivierungsereignishandler hinzu, durch den der erweiterte Begrüßungsbildschirm angezeigt wird.

Anmerkungen

Verwandte Themen

Zusätzliche Ressourcen