Como estender a tela inicial (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Mostre uma tela inicial por mais tempo criando uma tela inicial estendida. Essa tela geralmente é projetada para imitar a tela inicial mostrada ao iniciar o aplicativo, mas é completamente personalizável. Seja para mostrar informações de carregamento em tempo real ou para simplesmente proporcionar ao aplicativo mais tempo para preparar a interface do usuário inicial, uma tela inicial estendida permite definir a experiência de inicialização. Essas etapas ajudam você a criar uma tela inicial estendida que seja idêntica à tela inicial fornecida pelo sistema.

Para ver uma tela inicial estendida em um aplicativo completo, veja o exemplo de tela inicial.

Para dar aos usuários a impressão de que a tela inicial padrão é exibida por mais tempo, sua página de tela inicial estendida deve imitar a tela inicial padrão nas seguintes formas:

Sua página de tela inicial estendida deve usar a mesma imagem que aquela especificada para sua tela inicial no manifesto de seu aplicativo.
A sua exibição deve usar uma cor da tela de fundo consistente com a cor da tela de fundo especificada para a sua tela inicial no manifesto do seu aplicativo.
Seu código deve usar a classe SplashScreen para posicionar a imagem da tela inicial do aplicativo nas mesmas coordenadas de tela que a tela inicial padrão.
Windows (não Windows Phone): seu código deve responder aos eventos de redimensionamento da janela (como quando seu aplicativo é redimensionado ou a tela é girada).

Importante Se você tiver declarado um controle de aplicativo global, como um AppBar, no arquivo default.html de seu projeto, defina a propriedade disabled do controle para true quando chamar a função que exibe sua tela inicial estendida e defina disabled de volta para false quando navegar para fora de sua tela inicial estendida. Se você precisar de mais informações sobre Como adicionar ou estilizar os controles, consulte Adicionando controles e conteúdo.

Pré-requisitos

Microsoft Visual Studio 2013 para Windows 8.1 Para baixá-los, veja Obter as ferramentas.
Um projeto de aplicativo no Tempo de Execução do Windows que utiliza JavaScript e HTML. Você ainda não começou seu projeto? Examine nossas diretrizes passo a passo: Criar o seu primeiro aplicativo da Windows Store em JavaScript.
Entenda os princípios básicos da ativação do aplicativo. Veja How to handle app activation para saber sobre eventos activated.

Etapa 1: Criar uma página de tela inicial estendida

Associe o código JavaScript, que define a tela inicial estendida, à sua página de aterrissagem.

A amostra de Tela inicial adiciona esse código a extendedSplash.js associado a default.html:
```
<script src="/js/extendedSplash.js"></script>
```

Adicione uma tela inicial estendida <div> à sua página de aterrissagem.

A amostra de Tela inicial usa esse HTML para adicionar uma tela inicial estendida <div> à <body> de sua página de aterrissagem (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>

Os atributos id e class são definidos de forma a poderem ser usados para estilo e manipulação. A tela inicial estendida <div> também define a classe "hidden" e, portanto, não ficará visível até ser exibida pelo código JavaScript da tela inicial estendida.

Adicione a CSS para planejar o estilo da marcação da tela inicial estendida na sua página de aterrissagem.

Certifique de projetar o HTML da tela inicial estendida de forma a usar o estilo position:absolute. O posicionamento absoluto permite que o seu aplicativo use a tela inteira ao exibir a sua tela inicial estendida. Ele também permite posicionar a imagem da tela inicial usando as mesmas coordenadas de tela que a tela inicial padrão.

A amostra de tela inicial adiciona essa CSS (a default.css) para projetar as marcas da tela inicial estendida em sua página de aterrissagem:
```
.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;
}
```
As classes e IDs que define, esses estilos também identificam as marcas da tela inicial estendida no HTML da página de aterrissagem.

Etapa 2: Adicionar código ao seu manipulador de eventos ativados que exibe a imagem da tela inicial estendida

A amostra de tela inicial demonstra como exibir corretamente a tela inicial estendida usando o manipulador de eventos activated (a função activated) no arquivo 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);
        }));
    }
}

A amostra de tela inicial usa essas etapas para exibir sua tela inicial estendida e posicionar a imagem da tela inicial quando o aplicativo é ativado (dentro do seu manipulador de eventos activated no arquivo default.js):

Obtenha as coordenadas em que a imagem da tela inicial é exibida. Essas coordenadas são armazenadas em uma propriedade do objeto SplashScreen, que está acessível no objeto do evento que é transmitido para o manipulador de eventos activated.

A amostra de tela inicial obtém as coordenadas usando o seguinte 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;

Escute o evento descartado da tela inicial, em seguida comece a carregar os recursos do aplicativo. O sistema gera o evento dismissed quando ele descarta a tela inicial fornecida pelo sistema e, nesse caso, também as transições a serem exibidas na tela inicial estendida de seu aplicativo. Inicie as operações de configuração dentro de um manipulador de eventos descartado e navegue para fora da tela inicial estendida quando a configuração do aplicativo estiver concluída.

A amostra da tela Inicial registra seu manipulador de eventos descartado (onSplashScreenDismissed) na função activated em default.js:

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

Defina o manipulador de eventos descartado fora do evento activated em default.js. Como a amostra de Tela inicial não precisa aguardar nenhum recurso para carregar, ela remove a tela inicial estendida quando um usuário clica no botão "Saber mais".

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

Crie uma função que remove a tela inicial estendida em seu arquivo 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");
        }
    }

Posicione e exiba a tela inicial estendida.

A amostra de tela inicial posiciona e exibe a tela inicial usando o seguinte código em seu manipulador de eventos ativados (em default.js):


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

Adicione uma função que posiciona a imagem da tela inicial estendida para 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 (não Windows Phone): escute os eventos de redimensionamento de janela e responda reposicionando a imagem da tela inicial. Isso assegura que sua tela inicial estendida será formatada corretamente caso seu aplicativo seja redimensionado. Mudanças de orientação serão manipuladas automaticamente se você criar um layout flexível ou colocar o conteúdo em um controle flexível, como um ViewBox.

Registre seu manipulador de evento de redimensionamento dentro de seu manipulador de evento activated (em 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);

Em seguida, adicione código para definir o manipulador de eventos. Essa função obtém as coordenadas de localização de imagem atualizadas, então chama outra função para atualizar a localização da imagem na página da tela inicial estendida.

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

A amostra define updateImageLocation em extendedSplash.js. Se a tela inicial estendida estiver visível, ela posiciona a imagem da tela inicial estendida no mesmo lugar da tela inicial exibida pelo 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";
        */
    }
}

Comentários

Dica Se você observar uma cintilação durante a transição para a tela inicial estendida, adicione onload="" à marca <img> desta forma: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Isso ajuda a impedir a cintilação fazendo com que o sistema aguarde até a imagem ser processada antes de mudar para a tela inicial estendida.