Parte 2: gerenciar o ciclo de vida e o estado do aplicativo (HTML)

Applies to Windows only

Você pode iniciar vários aplicativos e alternar entre eles sem precisar se preocupar com a possibilidade de tornar o sistema lento ou acabar com a bateria. Isso porque o sistema automaticamente suspende (e eventualmente encerra) os aplicativos executados em segundo plano. Se você salva o estado de um aplicativo quando ele é suspenso ou encerrado e restaura o estado quando ele é reiniciado, é como se a execução do aplicativo nunca tivesse sido interrompida.

Saiba como:

  • Salvar o estado usando diferentes tipos de armazenamento de roaming
  • Restaurar o estado do aplicativo na próxima vez que ele for iniciado

Dica  

Se desejar pular o tutorial e ir direto para o código, consulte Introdução ao JavaScript: código completo para a série de tutoriais.

Antes de começar...

Sobre o ciclo de vida do aplicativo

No tutorial anterior, descrevemos como o arquivo default.js contém código que manipula a ativação do aplicativo. Antes de voltarmos ao código, falaremos um pouco sobre o ciclo de vida do aplicativo.

Existem três possíveis estados para um aplicativo: não estar em execução, estar em execução ou estar suspenso.

O ciclo de vida do aplicativo

Um aplicativo pode ser suspenso quando o usuário alterna para outro aplicativo ou quando o dispositivo entra em um estado de baixo consumo de energia. Enquanto o aplicativo está suspenso, ele permanece na memória para que os usuários possam rapidamente alternar entre os aplicativos suspensos e retomá-los. Quando o aplicativo é suspenso e retomado, você não precisa criar um código adicional para fazer com que pareça que ele estava em execução o tempo todo.

No entanto, o sistema operacional também pode encerrar um aplicativo suspenso a qualquer momento para liberar a memória para outros aplicativos ou para economizar energia. Quando o aplicativo é encerrado, ele para de ser executado e é descarregado da memória.

Quando o usuário fecha um aplicativo pressionando Alt+F4 ou usando o gesto de fechar, o aplicativo é suspenso por 10 segundos e encerrado.

O sistema operacional notifica o aplicativo quando o suspende, mas não fornece uma notificação adicional quando o encerra. Isso significa que o aplicativo deve manipular o evento suspenso e usá-lo para salvar seu estado e liberar seus recursos exclusivos e manipuladores de arquivos imediatamente.

Para criar uma experiência do usuário positiva, é necessário que pareça que o aplicativo nunca parou de ser executado. Isso significa que o aplicativo precisa preservar todos os dados inseridos pelo usuário, as configurações que ele alterou, etc. Ou seja, precisamos salvar o estado do aplicativo no momento da suspensão, pois, se o sistema operacional o encerrar, poderemos restaurá-lo mais tarde.

Existem dois tipos de dados a serem gerenciados no aplicativo: dados do aplicativo e dados da sessão.

Nas próximas etapas, aprenderemos como atualizar nosso aplicativo para salvar esses tipos de dados. Qual estado precisa ser salvo? No momento, o único elemento que o usuário pode alterar é a entrada do nome. Ele também pode clicar no botão Say "Hello" para gerar uma saudação personalizada.

Etapa 1. Salvar dados de aplicativo

Os dados do aplicativo são preservados entre as sessões e devem sempre estar acessíveis para o usuário. Em nosso aplicativo, a value da caixa nameInput input são os dados do aplicativo — uma configuração que deve aparecer no aplicativo sempre que o usuário o executa. Como o aplicativo tem no máximo cinco segundos para executar código no manipulador de eventos de suspensão, você precisa garantir que os dados importantes do aplicativo sejam salvos no armazenamento permanente antes de o aplicativo ser suspenso (ou encerrado). A melhor maneira de fazer isso é salvar os dados de aplicativo de forma incremental quando ele é alterado.

Podemos usar o objeto Windows.Storage.ApplicationData para nos ajudar a gerenciar os dados do aplicativo. Esse objeto tem uma propriedade roamingSettings que retorna um ApplicationDataContainer. Podemos usar esse ApplicationDataContainer de roaming para armazenar dados do usuário que são preservados entre sessões. Agora, armazenaremos o nome do usuário e a classificação no ApplicationDataContainer de roaming à medida que o usuário o digitar.

Observação  Este tutorial mostra como usar roamingSettings. O contêiner de dados do aplicativo das configurações de roaming facilita o armazenamento de dados de forma que sejam acessíveis para o usuário em vários computadores. Basicamente, os dados são carregados para a nuvem em segundo plano para você. Você também pode usar o contêiner de dados do aplicativo de configurações locais (localSettings), mas você só deve usá-lo quando desejar armazenar informações específicas do computador.

Começamos aqui com o código da Parte 1: Crie um aplicativo "Olá, mundo!".

Hh986966.wedge(pt-br,WIN.10).gifPara salvar os dados do aplicativo

  1. No arquivo default.js, crie um manipulador de eventos para o evento change da caixa nameInput input. Nomeie o manipulador de eventos nameInputChanged. Adicione este código logo após o buttonClickHandler que foi criado na Parte 1.

    
        function nameInputChanged(eventInfo) {
    
        }
    
    
  2. Use a propriedade srcElement do objeto eventInfo para acessar o controle nameInput. (A propriedade srcElement obtém o elemento que disparou o evento.)

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
        }
    
    
  3. Salve o nome do usuário no ApplicationDataContainer de configurações de roaming:

    1. Chame a propriedade Windows.Storage.ApplicationData.current para obter o objeto ApplicationData do aplicativo.
    2. Em seguida, chame a propriedade roamingSettings do objeto ApplicationData para obter o ApplicationDataContainer de configurações de roaming.

    Agora podemos armazenar o nome do usuário usando qualquer chave desejada. Vamos armazenar o nome do usuário como "userName".

    
        function nameInputChanged(eventInfo) {
            var nameInput = eventInfo.srcElement;
    
            // Store the user's name for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["userName"] = nameInput.value;
        }
    
    
  4. Na Parte 1: criar um aplicativo "Olá, mundo", usamos o manipulador de eventos onactivated para registrar os manipuladores de eventos . Agora, adicionaremos mais código para registrar o manipulador de eventos nameInputChanged no controle nameInput.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
                    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  5. Agora vamos salvar o estado do controle de Classificação quando ele é alterado. Tudo o que precisamos fazer é atualizar o manipulador de eventos que criamos na Parte 1 para salvar o valor em nosso contêiner de aplicativos de roamingSettings. Vamos salvar a classificação como greetingRating

    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
            // Store the rating for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
        }
    
    

Agora, quando o aplicativo for executado, seu nome e classificação serão salvos quando você inseri-los na caixa de texto. Mas quando você reiniciar o aplicativo, seu nome não será exibido novamente. Isso porque precisamos adicionar um código para carregar o estado que acabou de ser salvo. Faremos isso na Etapa 3. Mas antes, aprenderemos a salvar os dados da sessão.

Etapa 2: salvar os dados da sessão

Os dados da sessão são dados temporários relevantes à sessão atual do usuário no aplicativo. A sessão termina quando o usuário fecha o aplicativo usando o gesto de fechar ou Alt+F4, reinicia o computador ou efetua logoff do computador. Em nosso aplicativo, o innerText do greetingOutput div são os dados da sessão. Só iremos restaurá-lo se o Windows suspender e encerrar o aplicativo. Para armazenar os dados da sessão, use o objeto WinJS.Application.sessionState.

Quando os dados da sessão serão armazenados? O arquivo default.js contém um manipulador de eventos oncheckpoint que poderemos usar. Esse manipulador de eventos é chamado quando o Windows está prestes a suspender o aplicativo. No entanto, é melhor salvar nossos dados de sessão de forma incremental, à medida que ele muda, assim como fizemos para os nossos dados de aplicativo, para que salvemos nossos dados de sessão sempre que o usuário clicar no botão "Diga Olá".

Hh986966.wedge(pt-br,WIN.10).gifPara salvar os dados da sessão

  • No arquivo default.js, atualize a função buttonClickHandler que você criou na Parte 1: Crie um aplicativo "Olá, mundo!" para que ela armazene a saudação personalizada.

    Como a saudação personalizada precisa ser salva apenas para a sessão, vamos armazená-la em um objeto WinJS.Application.sessionState. Para usar o objeto sessionState, basta adicionar uma propriedade a ele e definir o valor dessa propriedade. Chamaremos a propriedade greetingOutput.

    
        function buttonClickHandler(eventInfo) {
    
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString;
    
            // Save the session data. 
            WinJS.Application.sessionState.greetingOutput = greetingString;
        }
    
    

Isso é tudo que precisamos fazer para salvar o estado do aplicativo antes de ele ser encerrado. Agora precisamos descobrir como restaurar o estado do aplicativo na próxima vez que o usuário iniciá-lo.

Etapa 3: restaurar o estado do aplicativo

Observemos de perto o código no manipulador de eventos onactivated que manipula a ativação do aplicativo.

A primeira ação executada pelo código é obter uma referência ao aplicativo e armazená-la em uma variável chamada app. Em seguida, ele cria uma variável chamada activation que faz referência ao namespace Windows.ApplicationModel.Activation. Essas duas etapas são completamente opcionais e servem apenas para reduzir o esforço de digitação necessário para fazer referência ao aplicativo ou ao namespace Windows.ApplicationModel.Activation.


    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;


Em seguida, o código definirá um manipulador de evento ativado. O manipulador verifica qual tipo de ativação acabou de ocorrer. Ele só executará uma ação se a ativação for do tipo launch. Quando outro tipo de ativação ocorre, o manipulador não faz nada.

Você pode expandir o manipulador de eventos para responder a outro tipo de ativação, mas isso não é explicado neste tutorial. Para saber mais, veja Ciclo de vida do aplicativo.



    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
          

Em seguida, o manipulador verificará o estado de execução anterior para identificar como o aplicativo foi encerrado.



            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }


Quando o estado de execução anterior é terminated, significa que, na última vez que o aplicativo foi executado, o Windows o suspendeu com êxito e o encerrou em seguida. Se o aplicativo não tiver sido encerrado, o manipulador agirá como se ele estivesse sendo iniciado pela primeira vez.

Por fim, o manipulador chamará o método WinJS.UI.processAll e o código que adicionamos para registrar os manipuladores de eventos. Ele chamará esse código sempre que o aplicativo for iniciado, independentemente do estado de execução anterior.



            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {

                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");

                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;

                // Register the event handler. 
                ratingControl.addEventListener("change", ratingChanged, false);

                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);

                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", nameInputChanged);

            }));

        }
    };

Agora que entendemos qual é a função do manipulador de eventos onactivated, iremos usá-lo para restaurar o estado do aplicativo.

Hh986966.wedge(pt-br,WIN.10).gifPara restaurar o estado do aplicativo

  1. Quando o previousExecutionState for terminated, carregue a saudação personalizada.

    Na cláusula else em que os comentários solicitam que o estado do aplicativo seja restaurado, verifique se WinJS.Application.sessionState.greetingOutput tem um valor. Se ele tiver um valor, recupere o elemento div greetingOutput e use-o para exibir a saudação.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                }));
    
            }
        };
    
    
  2. Agora, carregaremos o nome do usuário e a classificação. Como desejamos que os dados de nome do usuário e de classificação sejam preservados por várias sessões, o armazenamos no contêiner de dados de aplicativo roamingSettings. Agora, adicionaremos código para recuperar o contêiner de dados de aplicativo e exibir o nome do usuário e a classificação (se existir).

    Desejamos que esse código seja executado independentemente de como o aplicativo foi encerrado anteriormente (só precisamos verificar o estado de execução anterior dos dados da sessão), portanto, o adicionaremos fora da cláusula if que verifica o estado de execução anterior do aplicativo. Vamos adicioná-lo dentro do manipulador then para o WinJS.UI.processAll, onde registramos nossos eventos.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    // Retrieve our greetingOutput session state info, 
                    // if it exists. 
                    var outputValue = WinJS.Application.sessionState.greetingOutput;
                    if (outputValue) {
                        var greetingOutput = document.getElementById("greetingOutput");
                        greetingOutput.innerText = outputValue;
                    }
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                    // Retrieve the input element and register our
                    // event handler.
                    var nameInput = document.getElementById("nameInput");
                    nameInput.addEventListener("change", nameInputChanged);
    
                    // Restore app data. 
                    var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                    // Restore the user name.
                    var userName =
                        Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                    if (userName) {
                        nameInput.value = userName;
                    }
    
                    // Restore the rating. 
                    var greetingRating = roamingSettings.values["greetingRating"];
                    if (greetingRating) {
                        ratingControl.userRating = greetingRating;
                        var ratingOutput = document.getElementById("ratingOutput");
                        ratingOutput.innerText = greetingRating;
                    }
    
                }));
    
            }
        };
    
    

Agora, você pode criar e executar o aplicativo e ver como o estado da sessão é salvo e restaurado. Até agora, você testou o aplicativo executando-o no modo de depuração e interrompendo-o selecionando Parar Depuração no Microsoft Visual Studio. Porém, essa ação provoca o encerramento normal do aplicativo e o evento Suspending não ocorre. Felizmente, o Visual Studio permite simular a suspensão, o encerramento e a restauração de um aplicativo.

Hh986966.wedge(pt-br,WIN.10).gifPara simular a suspensão, o encerramento e a restauração de um aplicativo no Visual Studio

  1. Pressione F5 para executar o aplicativo no modo de depuração.
  2. Insira seu nome na caixa de entrada e clique em "Diga "Olá"". A saudação será exibida.
  3. Pressione Alt+Tab para voltar ao Visual Studio.
  4. Abra o menu suspenso ao lado do botão Suspender na barra de ferramentas Depurar Local.

    A barra de ferramentas Depurar é exibida por padrão enquanto o depurador está em execução. Se ela não estiver visível, selecione Exibir > Barras de Ferramentas > Depurar Local para exibi-la.

    Botão de suspensão e encerramento

  5. Selecione Suspender e encerrar.

    O Visual Studio simulará a suspensão e o encerramento do aplicativo. Assim, o evento Suspending ocorrerá e o código de gerenciamento de estado será executado.

  6. Pressione F5 para executar o aplicativo novamente. O aplicativo será restaurado em seu estado anterior.

Resumo

Parabéns! Você concluiu o tutorial. Você aprendeu a gerenciar o ciclo de vida do aplicativo e a salvar seu estado. Este tutorial demonstrou apenas duas das maneiras de salvar o estado do aplicativo. Para conhecer as outras maneiras de salvar o estado, veja Gerenciando dados de aplicativo e Trabalhando com o estado de maneira eficiente.

Baixar o exemplo

Você se atrasou ou deseja verificar seu trabalho? Nesse caso, baixe o exemplo de Introdução ao JavaScript.

Próximas etapas

Na próxima parte desta série de tutoriais, você aprenderá a criar um aplicativo mais complexo. Acesse Parte 3: Objetos PageControl e navegação.

Tópicos relacionados

Introdução ao JavaScript: código completo para a série de tutoriais
Programando aplicativos do Windows 8 com HTML, CSS e JavaScript (livro eletrônico)

 

 

Mostrar:
© 2014 Microsoft