Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo extender la pantalla de presentación (aplicaciones de la Tienda Windows con JavaScript y HTML)

Muestra una pantalla de presentación durante más tiempo creando y mostrando una pantalla de presentación extendida. Esta pantalla imita la pantalla de presentación que muestra Windows. Puede que quieras mostrar una pantalla de presentación extendida para mostrar a los usuarios la información de carga en tiempo real o simplemente porque la aplicación necesita más tiempo para preparar su interfaz de usuario inicial.

Para dar a los usuarios la impresión de que la pantalla de presentación de Windows se muestra por más tiempo, tu página de pantalla de presentación extendida debe imitar con precisión la pantalla de presentación que muestra Windows, al menos, de estas maneras:

  • La página de pantalla de presentación extendida debe usar una imagen de 620 x 300 píxeles que sea coherente con la imagen especificada para tu pantalla de presentación en el manifiesto de la aplicación (la imagen de la pantalla de presentación 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 fondo de la pantalla de presentación de tu aplicación).
  • El código debe usar la clase SplashScreen para ubicar la imagen de la pantalla de presentación de tu aplicación en las mismas coordenadas de pantalla en que Windows coloca la imagen cuando muestra la pantalla de presentación.
  • El código debe responder a los eventos de cambio de tamaño de ventana (por ejemplo, cuando se acopla la aplicación o se gira la pantalla) usando la clase SplashScreen para actualizar tu página de pantalla de presentación extendida.

Usa los siguientes pasos que te ayudarán a crear una página de pantalla de presentación extendida que imite eficazmente la pantalla de presentación que muestra Windows.

Requisitos previos

Cómo activar una aplicación

Obtén información sobre cómo escuchar y responder a eventos activated.

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

Usa HTML y hojas de estilos en cascada (CSS) para definir la apariencia de tu pantalla de presentación extendida. Asegúrate de diseñar la página de pantalla de presentación extendida de tu aplicación de modo que sea sencilla e imita la pantalla de presentación que muestra Windows. Si la página es muy compleja, probablemente parezca atiborrada y abrumadora, o incongruente y discordante, después de la relativamente sencilla pantalla de presentación que muestra Windows. Para obtener ayuda con el diseño de una buena pantalla de presentación y página de pantalla de presentación extendida para tu aplicación, usa las instrucciones que encontrarás en el tema sobre directrices y lista de comprobación para pantallas de presentación.

Usa estas instrucciones que te ayudarán a crear una pantalla de presentación extendida para tu aplicación.

Hh700390.wedge(es-ar,WIN.10).gifMarcado y estilos esenciales para tu pantalla de presentación extendida

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

    Agrega una etiqueta <script> a la etiqueta <head> para vincular tu HTML con el archivo JavaScript de tu pantalla de presentación extendida.

    Por ejemplo, la muestra de pantalla de presentación asocia su archivo extendedSplash.js con su página de destino (default.html) de esta manera:

    
    <script src="/js/extendedSplash.js"></script>
    
    
  2. 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 la etiqueta <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>
            <br /><br />
            <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.

    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.

  3. 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 ubicar la imagen de la pantalla de presentación usando las mismas coordenadas de pantalla que usó Windows para ubicar la imagen cuando mostró la pantalla de presentación para tu aplicación.

    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 de activación para mostrar la pantalla de presentación extendida

La muestra de pantalla de presentación indica cómo mostrar correctamente la pantalla de presentación extendida en el controlador de eventos de activación de la muestra, 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 is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
        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);
        }));
    }
}

Para más información sobre cómo responder a eventos activated, consulta el tema sobre cómo activar una aplicación.

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 del evento activated):

  1. Obtén las coordinadas en que Windows mostró la imagen de la pantalla de presentación. Estas coordenadas se almacenan en una propiedad del objeto SplashScreen, al que se obtiene acceso desde el objeto de evento que se pasa al controlador de eventos de activación.

    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;
    
    
  2. 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:

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

    La muestra de pantalla de presentación también indica cómo usar el objeto splashScreen para colocar la imagen de pantalla de presentación extendida en su función ExtendedSplash.show en el archivo 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");
    }
    
    

    Sugerencia   La imagen que especifiques en el HTML de la pantalla de presentación extendida debe ser la misma que especificaste como imagen de la pantalla de presentación en el manifiesto de la aplicación.

  3. Escucha los eventos de onresize de ventana para poder responder a los cambios de tamaño de ventana reubicando la imagen de la pantalla de presentación en tu pantalla de presentación extendida. Esto ayuda a garantizar que tu pantalla de presentación extendida tenga el formato adecuado, incluso cuando el tamaño de ventana cambie, como cuando la aplicación se acople o desacople, o si cambia la orientación.

    La muestra de pantalla de presentación se registra para recibir notificación de eventos onresize con el siguiente código en su controlador de eventos de activación:

    
                // 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 snapping, unsnapping, rotation, etc...
                window.addEventListener("resize", onResize, false);
    
    

    La muestra de pantalla de presentación usa el siguiente código para definir el controlador de eventos onResize fuera de su controlador de eventos de activación:

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

Sugerencia  En lugar de tratar de reproducir gran parte del código JavaScript que necesitas para mostrar una pantalla de presentación extendida, puedes copiar el archivo extendedSplash.js de la muestra de pantalla de presentación. Después, simplemente actualiza el código JavaScript existente para tu página de destino usando el archivo default.js de la muestra de pantalla de presentación como modelo.

Observaciones

Para ver estos ejemplos de código en contexto, consulta la muestra de pantalla de presentación.

Activación de aplicación y el controlador de eventos activado

Una aplicación se activa cuando se inicia un evento activated. El controlador de eventos activados es la función que usas para responder a estos eventos. En tu controlador de eventos activados, debes identificar y responder correctamente a los diferentes tipos de eventos activados.

Obtén más información sobre cómo responder a eventos activated en el tema sobre cómo activar una aplicación y obtén más información sobre diferentes tipos de eventos activated en la referencia de Windows.ApplicationModel.Activation.

Temas relacionados

Directrices y lista de comprobación para pantallas de presentación
Cómo activar una aplicación
Muestra de pantalla de presentación.
Referencia
Windows.ApplicationModel.Activation namespace
Windows.ApplicationModel.Activation.splashScreen class
Windows.ApplicationModel.Activation.splashScreen.imageLocation property
Windows.UI.WebUI.webuiapplication.activated event

 

 

Mostrar:
© 2018 Microsoft