Cómo extender la pantalla de presentación (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Muestra una pantalla de presentación durante más tiempo creando una pantalla de presentación extendida. Esta pantalla a menudo se diseña de tal forma que imita a la pantalla de presentación mostrada cuando se inicia la aplicación, pero se puede personalizar por completo. Tanto si lo que quieres es mostrar información en tiempo real sobre la carga como simplemente dar a tu aplicación un poco más de tiempo para preparar la interfaz de usuario inicial, la pantalla de presentación extendida te permite definir la experiencia de inicio. Estos pasos te ayudan a crear una pantalla de presentación extendida que sea idéntica a la pantalla de presentación proporcionada por el sistema.

Para ver una pantalla de presentación extendida en una aplicación completa, consulta la muestra de pantalla de presentación.

Si quieres dar a los usuarios la impresión de que la pantalla de presentación predeterminada se muestra durante más tiempo, tu página de pantalla de presentación extendida deberá imitar la pantalla de presentación predeterminada de estas maneras:

Tu página de pantalla de presentación extendida debe utilizar la misma imagen que la especificada para tu pantalla de presentación en el manifiesto de tu aplicación.
Tu vista debe usar un color de fondo que sea coherente con el color de fondo especificado para la pantalla de presentación en tu manifiesto de la aplicación.
El código debe usar la clase SplashScreen para posicionar la imagen de la pantalla de presentación de tu aplicación en las mismas coordenadas que la pantalla de presentación predeterminada.
Windows (no Windows Phone): tu código debe responder a eventos de cambio de tamaño de ventana (por ejemplo, cuando el tamaño de tu aplicación cambia o la pantalla se gira).

Importante Si has declarado un control de aplicación global, como AppBar, en el archivo default.html de tu proyecto, define la propiedad disabled del control como true cuando llames a la función que muestra la pantalla de presentación extendida y vuelve a definir disabled como false cuando abandones tu pantalla de presentación extendida. Si necesitas más información sobre cómo agregar controles o aplicarles estilo, consulta Agregar controles y contenido.

Requisitos previos

Microsoft Visual Studio 2013 y Windows 8.1 Para descargas, consulta el tema sobre cómo obtener las herramientas
Un proyecto de aplicación de Windows en tiempo de ejecución que utiliza JavaScript y HTML. ¿Aún no has empezado un proyecto? Consulta nuestras instrucciones paso a paso: Crear la primera aplicación de la Tienda Windows con JavaScript.
Comprende los principios básicos de la activación de aplicaciones. Consulta How to handle app activation para obtener información sobre eventos activated.

Paso 1: Crear una página de pantalla de presentación extendida

Asocia el código JavaScript, que define tu pantalla de presentación extendida, con tu página de destino.

La muestra de pantalla de presentación agrega este código para asociar extendedSplash.js a default.html:
```
<script src="/js/extendedSplash.js"></script>
```

Agrega una pantalla de presentación extendida <div> a tu página de destino.

La muestra de pantalla de presentación usa su HTML para agregar una pantalla de presentación extendida <div> a <body> de su página de destino (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>

Los atributos id y class se establecen de modo que puedan usarse para la aplicación de estilos y la manipulación. La pantalla de presentación extendida <div> también establece la clase "hidden", a fin de que no se vea hasta que la muestre el código JavaScript de la pantalla de presentación extendida.

Agrega CSS para aplicar estilo al marcado de la pantalla de presentación extendida en la página de destino.

Asegúrate de aplicar el estilo position:absolute al HTML de la pantalla de presentación extendida. El posicionamiento absoluto permite a tu aplicación usar toda la pantalla cuando se muestra la pantalla de presentación extendida. También te permite colocar la imagen de la pantalla de presentación con las mismas coordenadas que la pantalla de presentación predeterminada.

La muestra de pantalla de presentación agrega este CSS (a default.css) para aplicar estilo a las etiquetas de la pantalla de presentación extendida en su página de destino:
```
.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;
}
```
Las clases y los identificadores que definen estos estilos también identifican las etiquetas de la pantalla de presentación extendida en el HTML de la página de destino.

Paso 2: Agregar código al controlador de eventos activados para mostrar la pantalla de presentación extendida

La muestra de pantalla de presentación indica cómo mostrar la pantalla de presentación extendida utilizando el controlador de eventos activated (la función activated) en el archivo 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);
        }));
    }
}

La muestra de pantalla de presentación usa estos pasos para mostrar su pantalla de presentación extendida y colocar la imagen de la pantalla de presentación cuando se activa la aplicación (dentro del controlador de eventos activated en el archivo default.js):

Obtén las coordenadas en las cuales se muestra la imagen de la pantalla de presentación predeterminada. Estas coordenadas se almacenan en una propiedad del objeto SplashScreen, a la que se puede tener acceso desde el objeto de evento que se pasa al controlador de eventos activated.

La muestra de pantalla de presentación obtiene las coordenadas mediante el siguiente código:
```
    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;
```
Escucha el evento descartado de la pantalla de presentación y después empieza a cargar los recursos de la aplicación. El sistema desencadena el evento dismissed cuando descarta la pantalla de presentación proporcionada por el sistema y, en este caso, las transiciones para mostrar la pantalla de presentación extendida de tu aplicación. Inicia las operaciones de configuración dentro de un controlador de eventos descartado y navega fuera de la pantalla de presentación extendida cuando se haya completado la configuración de la aplicación.

La muestra de pantalla de presentación registra su controlador de eventos descartado (onSplashScreenDismissed) en la función activated en default.js:
```
        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);
```
Define el controlador de eventos descartado fuera del evento activated en default.js. Dado que la muestra de pantalla de presentación no tiene que esperar a que se cargue ningún recurso, quita la pantalla de presentación extendida () cuando un usuario hace clic en el botón "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 función que elimine la pantalla de presentación extendida en tu archivo 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");
        }
    }
```

Ubica y muestra la pantalla de presentación extendida.

La muestra de pantalla de presentación coloca y muestra la pantalla de presentación mediante el siguiente código en su controlador de eventos de activación (en default.js):


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

Agrega una función que coloque la imagen de la pantalla de presentación extendida en 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 (no Windows Phone): escucha los eventos al cambiar el tamaño de ventana y responde volviendo a colocar la imagen de la pantalla de presentación. De este modo se garantiza que se aplicará el formato correcto a tu pantalla de presentación extendida si se modifica el tamaño de tu aplicación. Los cambios de orientación se administrarán de forma automática si creas un diseño flexible o colocas contenido en un control flexible, como un ViewBox.

Registra tu controlador de eventos de cambio de tamaño dentro de tu controlador de eventos activated (en 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);

A continuación agrega código para definir el controlador de eventos. Esta función obtiene las coordenadas de ubicación de imagen actualizadas y a continuación llama a otra función para actualizar la ubicación de la imagen en la página de la pantalla de presentación extendida.

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

La muestra define updateImageLocation en extendedSplash.js. Si la pantalla de presentación extendida es visible, coloca la imagen de la pantalla de presentación extendida en el mismo lugar que la pantalla de presentación que muestra el 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";
        */
    }
}

Observaciones

Sugerencia Si notas un parpadeo durante la transición a la pantalla de presentación extendida, agrega onload="" en la etiqueta <img> del siguiente modo: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Esto ayuda a evitar el parpadeo al hacer que el sistema espere hasta que se haya representado la imagen antes de cambiar a la pantalla de presentación extendida.