Parte 1: Crie um aplicativo "Olá, mundo" (HTML)

Applies to Windows only

Este tutorial ensina a criar um aplicativo simples da Windows Store em JavaScript: "Hello, world". Trata-se do primeiro de uma série de cinco tutoriais que ensina o que é necessário saber para criar aplicativos da Windows Store.

Nesta tutorial, você aprenderá a:

  • Criar um novo projeto
  • Adicionar conteúdo HTML a sua página inicial
  • Manipular a entrada de toque, caneta e mouse
  • Alternar entre folhas de estilo claras e escuras
  • Criar suas próprias folhas de estilos personalizadas
  • Usar um controle de Biblioteca do Windows para JavaScript

Mostraremos como criar um aplicativo da Windows Store com HTML, JavaScript e CSS.

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

  • Para concluir este tutorial, você precisa do Windows 8.1 e do Microsoft Visual Studio Express 2013 para Windows. Para baixá-los, veja a página Downloads.
  • Você também precisará de uma licença de desenvolvedor. Para obter instruções, veja Obtenha uma licença de desenvolvedor.

Etapa 1: crie um novo projeto no Visual Studio.

Criaremos um novo aplicativo chamado HelloWorld. Veja como:

  1. Inicie o Visual Studio Express 2013 para Windows.

    A tela inicial do Visual Studio Express 2013 para Windows é exibida.

    (De agora em diante, chamaremos o Visual Studio Express 2013 para Windows simplesmente de "Visual Studio".)

  2. No menu Arquivo, selecione Novo Projeto.

    A caixa de diálogo Novo Projeto será exibida. O painel esquerdo da caixa de diálogo permite selecionar o tipo dos modelos que serão exibidos.

  3. No painel esquerdo, expanda Instalado, expanda Modelos e JavaScript e selecione o tipo de modelo Windows Store. O painel central da caixa de diálogo exibe uma lista dos modelos de projeto para JavaScript.

    A janela Novo Projeto

    Para este tutorial, usaremos o modelo Blank App. Esse modelo cria um aplicativo da Windows Store básico que pode ser compilado e executado, mas que não contém controles de interface do usuário nem dados. Adicionaremos controles e dados ao aplicativo ao longo dos tutoriais.

  4. No painel central, selecione o modelo Blank App.
  5. Na caixa de texto Name, insira "HelloWorld".
  6. Desmarque a caixa de seleção Criar diretório para solução.
  7. Clique em OK para criar o projeto.

    O Visual Studio criará seu projeto e o exibirá no Gerenciador de Soluções.

    Projeto HelloWorld no Gerenciador de Soluções

Apesar de ser um modelo básico, Blank App contém alguns arquivos:

  • Um arquivo de manifesto (package.appxmanifest) que descreve o aplicativo (nome, descrição, bloco, página inicial, tela inicial etc.) e lista os arquivos que ele contém.
  • Um conjunto de imagens de logotipo grandes e pequenas (logo.png e smalllogo.png) que são exibidas na tela inicial.
  • Uma imagem (storelogo.png) para representar o aplicativo na Windows Store.
  • Uma tela inicial (splashscreen.png) para ser exibida quando o aplicativo é iniciado.
  • Arquivos de código e CSS do WinJS (dentro da pasta References).
  • Uma página inicial (default.html) e um arquivo JavaScript correspondente (default.js) que são executados quando o aplicativo é iniciado.

Para exibir e editar os arquivos, clique com o botão direito do mouse no Gerenciador de Soluções.

Esses arquivos são essenciais para todos os aplicativos da Windows Store com JavaScript. Eles fazem parte de qualquer projeto criado no Visual Studio.

Etapa 2: inicie o aplicativo

Neste ponto, criamos um aplicativo muito simples. Para ver sua aparência, pressione F5 para compilar, implantar e iniciar o aplicativo. Uma tela inicial padrão será exibida primeiro. A tela inicial é definida por uma imagem (splashscreen.png) e pela cor da tela de fundo (especificada no arquivo de manifesto do aplicativo). É fácil personalizar a tela inicial, mas não descrevemos esse procedimento neste artigo. Para saber como fazer isso, veja Adicionando uma tela inicial.

A tela inicial desaparecerá e o aplicativo será exibido em seguida. Ele conterá uma tela preta com o texto "O conteúdo vai aqui".

Nosso aplicativo HelloWorld

Não há um botão ou comando para fechar o aplicativo. Para fechar o aplicativo, deslize o dedo da borda inferior até a borda inferior da tela ou pressione Alt+F4. Vá para a Tela inicial. Observe que a implantação do aplicativo adiciona o respectivo bloco ao último grupo da Tela inicial. Para executar o aplicativo novamente, toque ou clique no bloco correspondente na tela inicial ou pressione F5 no Visual Studio para executar o aplicativo no depurador.

Parabéns! Você criou seu primeiro aplicativo da Windows Store, embora ele—ainda—seja muito simples.

Para interromper a depuração do aplicativo, pressione Alt+Tab para voltar ao Microsoft Visual Studio. No Visual Studio, clique em Depurar > Parar depuração para fechar o aplicativo. Durante a depuração, não é possível fazer edições no Visual Studio.

Para saber mais sobre as várias maneiras de iniciar o aplicativo no Visual Studio, veja Executando aplicativos da Windows Store do Visual Studio.

Etapa 3: modifique a página inicial

Um dos arquivos que o Visual Studio criou é default.html, a página inicial de nosso aplicativo. Quando o aplicativo for executado, exibirá o conteúdo da página inicial. A página inicial também contém referências aos arquivos de código e às folhas de estilo do aplicativo. Veja a seguir a página inicial que o Visual Studio criou para nós:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Adicionaremos novo conteúdo ao arquivo default.html. Assim como qualquer outro arquivo HTML, o conteúdo deve ser adicionado no elemento body. Você pode usar elementos HTML5 para criar o aplicativo (com algumas exceções). Isso significa que pode usar elementos HTML5 como h1, p, button, div e img.

Hh986964.wedge(pt-br,WIN.10).gifPara modificar sua página inicial

  1. Substitua o conteúdo existente no elemento body por um cabeçalho de primeiro nível com a mensagem "Olá, mundo!", um texto perguntando o nome do usuário, um elemento input para aceitar o nome do usuário, um button e um elemento div . Atribua IDs ao input, ao button e ao div.

    
    <body>
        <h1>Hello, world!</h1>
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput"></div>
    </body>
    
    
  2. Execute o aplicativo.

    Nosso aplicativo HelloWorld com novo conteúdo

    Você pode escrever no elemento input, mas ao clicar no button agora, nada vai acontecer. Alguns objetos, como button, podem enviar mensagens quando ocorrem determinados eventos. Essas mensagens de evento permitem executar uma ação em resposta ao evento. Você coloca código para responder ao evento em um método do manipulador de eventos.

    Nas próximas etapas, criaremos um manipulador de eventos para o button que exibe uma saudação personalizada. Adicionaremos o código do manipulador de eventos ao arquivo default.js.

Etapa 4: crie um manipulador de eventos

Quando criamos o novo projeto, o Visual Studio automaticamente criou um arquivo /js/default.js. Esse arquivo contém o código para manipular o ciclo de vida do aplicativo, um conceito que explicaremos na Parte 2: Gerenciar o ciclo de vida e o estado do aplicativo. Também é nele que você adicionará código para criar interatividade no arquivo default.html.

Abra o arquivo default.js.

Antes de adicionarmos nosso próprio código, vejamos as primeiras e últimas linhas do código no arquivo:



(function () {
    "use strict";

     // Omitted code 

 })(); 

Você deve estar se perguntando o que é isso. Essas linhas de código encapsulam o restante do código de default.js em uma função anônima autoexecutável.

Agora que você já sabe para que ela serve, deve estar se perguntando por que nós encapsulamos nosso código em uma função anônima autoexecutável. Porque assim fica mais fácil evitar conflitos de nomenclatura ou situações em que um valor é modificado acidentalmente. Isso também mantém identificadores desnecessários fora do namespace global, o que contribui com o desempenho. Parece um pouco estranho, mas trata-se de uma boa prática de programação.

A próxima linha de código ativa o modo estrito para o código JavaScript. O modo estrito fornece verificações de erro adicionais para o código. Por exemplo, ele impede o uso de variáveis declaradas de modo implícito ou a atribuição de valor a propriedades somente leitura.

Observe o restante do código em default.js. Ele manipula os eventos activated e checkpoint do aplicativo. Esses eventos serão descritos com mais detalhes mais tarde. Por enquanto, apenas lembre-se de que o evento activated é acionado quando o aplicativo é iniciado.

Agora definiremos um manipulador de eventos para o button. Nosso novo manipulador de eventos obtém o nome do usuário a partir do controle nameInput input e o usa para gerar uma saudação no elemento greetingOutput div criado na seção anterior.

Usando eventos que funcionam com a entrada de toque, mouse e caneta

Com o Windows 8.1, você não precisa se preocupar com as diferenças entre toque, mouse e outras formas de entrada de ponteiro. Você pode simplesmente usar os eventos que já conhece, como click, e eles funcionarão com todas as formas de entrada.

Dica   O aplicativo também pode usar os novos eventos MSPointer* e MSGesture*, que funcionam com a entrada por toque, mouse e caneta e podem fornecer informações adicionais sobre o dispositivo que disparou o evento. Para saber mais, veja Respondendo à interação do usuário e Gestos, manipulações e interações.

Agora, prosseguiremos para criar o manipulador de eventos.

Hh986964.wedge(pt-br,WIN.10).gifPara criar o manipulador de eventos

  1. No default.js, depois do manipulador de eventos app.oncheckpoint e antes da chamada de app.start, crie uma função de manipulador de eventos click chamada buttonClickHandler que receberá um único parâmetro chamado eventInfo.
    
        function buttonClickHandler(eventInfo) {
     
        }
    
    
  2. Dentro do manipulador de eventos, recupere o nome do usuário a partir do controle nameInput input e use-o para criar uma saudação. Use o greetingOutput div para exibir o resultado.
    
        function buttonClickHandler(eventInfo) {
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString; 
        }
    
    

Adicionamos o manipulador de eventos a default.js. Agora, precisamos registrá-lo.

Etapa 5: registre o manipulador de eventos quando seu aplicativo for iniciado

Tudo o que precisamos fazer agora é registrar o manipulador de eventos no botão. A maneira recomendada de registrar um manipulador de eventos é chamar addEventListener a partir do código. Um bom momento para registrar o manipulador de eventos é quando o aplicativo for ativado. Felizmente, o Visual Studio gerou um código no arquivo default.js que manipula a ativação do aplicativo: o manipulador de eventos app.onactivated. Observemos esse código.



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

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

Dentro do manipulador onactivated, o código verifica qual tipo de ativação ocorreu. Existem vários tipos de ativação diferentes. Por exemplo, seu aplicativo foi ativado quando o usuário iniciou o aplicativo e quando o usuário deseja abrir um arquivo que está associado ao seu aplicativo. (Para saber mais, veja Ciclo de vida do aplicativo.)

Estamos interessados na ativação de launch. Um aplicativo é iniciado sempre que não está em execução e um usuário o ativa.



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


Se a ativação for de inicialização, o código verificará como o aplicativo foi encerrado na última vez que foi executado.




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


Em seguida, chama WinJS.UI.processAll.




            args.setPromise(WinJS.UI.processAll());           
        }
    };

WinJS.UI.processAll é chamado independentemente de o aplicativo já ter sido encerrado anteriormente ou de ser a primeira vez que está sendo iniciado. O WinJS.UI.processAll está contido em uma mensagem para o método setPromise, que verifica se a tela não é retirada até que a página do aplicativo esteja pronta.

Dica  A função WinJS.UI.processAll procura controles WinJS no arquivo default.html e os inicializa. Até agora, ainda não adicionamos esses controles, mas é recomendável manter esse código para o caso de você desejar adicioná-los posteriormente. Para saber mais sobre os controles WinJS, veja Guia de início rápido: adicionando controles e estilos WinJS.

Um bom local para registrar os manipuladores de eventos de controles que não sejam WinJS é logo após a chamada de WinJS.UI.processAll.

Hh986964.wedge(pt-br,WIN.10).gifPara registrar o manipulador de eventos

  • No manipulador de eventos onactivated em default.js, recupere helloButton e use addEventListener para registrar o manipulador de eventos para o evento click. Adicione este código após a chamada de WinJS.UI.processAll.

    
        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());
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);
    
            }
        };
    
    

Veja a seguir o código completo do arquivo default.js atualizado:


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";

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

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

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

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

    app.start();
})();

Execute o aplicativo. Quando você inserir seu nome na caixa de texto e clicar no botão, o aplicativo exibirá uma saudação personalizada.

Saudação personalizada do aplicativo HelloWorld

Observação  Se você está se perguntando por que usamos addEventListener para registrar o evento no código em vez de definir o evento onclick no HTML, veja Codificando aplicativos básicos para obter uma explicação detalhada.

Etapa 6: estilize a página inicial

É fácil personalizar a aparência do aplicativo. Os aplicativos da Windows Store permitem o uso de Folhas de Estilo em Cascata, Nível 3 (CSS3), como se fossem um site.

O default.html criado pelo Visual Studio contém uma referência à folha de estilos WinJS:



    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />


O que essa folha de estilos faz? Várias coisas! Ela oferece os seguintes benefícios:

  • Um conjunto de estilos que automaticamente deixa o aplicativo com a aparência do Windows 8. Basta incluir a folha de estilos para melhorar a aparência dos controles. Além disso, eles também funcionarão com monitores sensíveis ao toque.
  • Suporte automático para modos de alto contraste. Esses estilos foram criados para ser compatíveis com alto contraste de modo que, quando executado em um dispositivo no modo de alto contraste, o aplicativo seja exibido corretamente.
  • Suporte automático para outros idiomas. As folhas de estilos WinJS selecionam automaticamente a fonte correta para cada idioma permitido no Windows 8. Você pode até mesmo usar vários idiomas no mesmo aplicativo e eles serão exibidos corretamente.
  • Suporte automático para outros sentidos de leitura. Esse recurso ajusta automaticamente layouts e controles WinJS e HTML para idiomas que são lidos da direita para a esquerda.

Por padrão, cada página HTML do seu projeto contém uma referência à folha de estilos escura. O WinJS também oferece uma folha de estilos clara. Vamos experimentá-lo para ver sua aparência.

Hh986964.wedge(pt-br,WIN.10).gifPara alternar para a folha de estilos clara

  1. No arquivo default.html, substitua a referência à folha de estilos escura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Por esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  2. Execute o aplicativo. Agora, a folha de estilos clara será usada.

    Aplicativo HelloWorld com a folha de estilos clara

Qual folha de estilos você deve usar? Fica a seu critério. Para aplicativos que exibem sobretudo imagens ou vídeo, recomendamos o uso da folha de estilos escura. Já para aplicativos que contêm muito texto, recomendamos o uso da folha de estilos clara. Se você estiver usando um esquema de cores personalizado, use a folha de estilos que combina melhor com a aparência do seu aplicativo.

Criando estilos próprios

Se você deseja personalizar a aparência de seu aplicativo, não precisa descartar os estilos WinJS e recomeçar do zero. É fácil fazer alterações adicionais substituindo os estilos que você deseja alterar.

Na realidade, é melhor substituir os estilos WinJS do que criar os seus próprios estilos. Quando o seu aplicativo é executado em modo de alto contraste, qualquer alteração das cores dos estilos padrão são automaticamente substituídas por um esquema de cores compatível com alto contraste.

Você também pode substituir qualquer estilo na folha de estilos padrão criando a sua própria folha de estilos e incluindo ela após a folha de estilos WinJS. O modelo Blank App faz isso para você. Ele cria uma folha de estilos chamada default.css que você pode usar para criar seus próprios estilos.



    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" /> 
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>


Agora, criaremos alguns estilos próprios.

  1. Primeiramente, adicionaremos alguns elementos e classes div ao HTML para que fique mais fácil estilizá-lo.
    1. No Visual Studio, abra o arquivo default.html.
    2. Defina o atributo class do cabeçalho da sua página como "headerClass". Crie um elemento div e o utilize para conter o conteúdo principal da sua página. Forneça a ele uma configuração class de "mainContent".
      
      
      <body>
          <h1 class="headerClass">Hello, world!</h1>
          <div class="mainContent">
              <p>What's your name?</p>
              <input id="nameInput" type="text" />
              <button id="helloButton">Say "Hello"</button>
              <div id="greetingOutput"></div>
          </div>
      </body>
      
      
      
  2. Agora, definiremos os estilos. Abra o arquivo default.css.

    No momento, a maior parte está em branco:

    
    body {
    }
    
    
    
  3. Conforme informado em Definindo o layout de uma página de aplicativo, o cabeçalho tem uma margem superior de 45 pixels e uma margem esquerda de 120 pixels. A área de conteúdo também possui uma margem esquerda de 120 pixels, uma margem superior de 31 pixels e um margem inferior de 50 pixels.

    Defina as classes headerClass e mainContent e especifique suas margens de acordo com as diretrizes abaixo. Além disso, crie um estilo para o greetingOutput div que define a altura como 20 pixels e a margem inferior como 40 pixels.

    
    
    body {
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  4. Execute o aplicativo. Observe a mudança no espaçamento.

    Aplicativo "Olá, mundo" com margens

Os aplicativos da Windows Store dão suporte a CSS3, oferecendo assim muitas opções para você personalizar seu aplicativo. (Para saber mais sobre como estilizar seu aplicativo, veja Guia de início rápido: definindo o estilo de controles.)

Etapa 7: adicionar uma Biblioteca do Windows para controle JavaScript

Além dos controles HTML padrão, seus aplicativos da Windows Store em JavaScript podem usar qualquer um dos novos controles WinJS, como WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView e WinJS.UI.Rating.

Diferentemente dos controles HTML, os controles WinJS não possuem elementos de marcação dedicados: você não pode criar um controle Rating adicionando um elemento <rating />, por exemplo. Para adicionar um controle WinJS, você cria um elemento div e usa o atributo data-win-control para especificar o tipo de controle desejado. Para adicionar um controle Rating, você define o atributo como "WinJS.UI.Rating".

Adicione um controle Rating ao seu aplicativo.

  1. Em seu arquivo default.html, adicione um label e um controle Rating após o greetingOutput div.

    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>
        </div>
    </body>
    
    
    

    Para que a Rating seja carregada, sua página deve chamar WinJS.UI.processAll. Como nosso aplicativo está usando um dos modelos do Visual Studio, nosso default.js já inclui uma chamada ao WinJS.UI.processAll, conforme descrito anteriormente na Etapa 5, para que você não tenha que adicionar nenhum código.

  2. Execute o aplicativo. Observe o novo controle de Rating.

    O aplicativo "Olá, mundo" com um controle de Biblioteca do Windows para JavaScript

Agora, clicar no controle de Rating altera a classificação, mas não faz mais nada. Vamos usar um manipulador de eventos para fazer algo quando o usuário altera a classificação.

Etapa 8: registrar um manipulador de eventos para um controle de Biblioteca do Windows para JavaScript

Registrar um manipulador de eventos para um controle WinJS é um pouco diferente de registrar um manipulador de eventos para um controle HTML padrão. Anteriormente, mencionamos que o manipulador de eventos onactivated chama o método WinJS.UI.processAll para inicializar o WinJS em sua marcação. O WinJS.UI.processAll é encapsulado em uma chamada do método setPromise.



            args.setPromise(WinJS.UI.processAll());           


Se Rating fosse um controle HTML padrão, você adicionaria seu manipulador de eventos após esta chamada ao WinJS.UI.processAll. Mas isso é um pouco mais complicado para um controle WinJS como nossa Rating. Como o WinJS.UI.processAll cria o controle de Rating para nós, não podemos adicionar o manipulador de eventos à Rating até que o WinJS.UI.processAll tenha concluído seu processamento.

Se WinJS.UI.processAll fosse um método típico, poderíamos registrar o manipulador de eventos Rating logo depois de chamá-lo. Mas o método WinJS.UI.processAll é assíncrono, então qualquer código que segui-lo pode ser executado antes do WinJS.UI.processAll ser concluído. Então, o que devemos fazer? Usamos um objeto Promise para receber notificações quando o WinJS.UI.processAll é concluído.

Como em todos os métodos WinJS assíncronos, WinJS.UI.processAll retorna um objeto Promise. Uma Promise é uma "promessa" que algo ocorrerá no futuro; quando isto ocorre, diz-se que a Promise foi concretizada.

Os objetos Promise têm um método then que consideram uma função "concluída" como um parâmetro. A Promise chama essa função quando é concluída.

Adicionando seu código a uma função "concluída" e a passando para o método then do objeto Promise, você pode ter certeza que seu código é executado após a conclusão do WinJS.UI.processAll.

  1. Vamos gerar o valor de classificação quando o usuário seleciona uma classificação. Em seu arquivo default.html, crie um elemento div para exibir o valor de classificação e dar a ele a id "ratingOutput".
    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>     
            <div id="ratingOutput"></div>
        </div>
    </body>
    
    
    
  2. Em nosso arquivo default.js, crie um manipulador de eventos para o evento change do controle Rating denominado ratingChanged. O parâmetro eventInfo contém uma propriedade detail.tentativeRating que fornece a nova classificação de usuário. Obtenha esse valor e o exiba no div de saída.

    
    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating; 
        }
    
    
    
  3. Atualize o código em nosso manipulador de eventos onactivated que chama WinJS.UI.processAll adicionando uma chamada ao método then e passando-a para uma função completed. Na função completed, obtenha o elemento ratingControlDiv que hospeda o controle de Rating. Em seguida, use a propriedade winControl para obter o controle de Rating real. (Este exemplo define a função completed embutida.)

    
                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);
    
                }));
    
    
  4. Embora seja aceitável registrar manipuladores de eventos para controles HTML após a chamada ao WinJS.UI.processAll, também é possível registrá-los dentro de sua função completed. Para simplificar, vamos continuar e mover todos os registradores do manipulador de eventos para dentro do manipulador de eventos then.

    Este é o nosso manipulador de eventos onactivated atualizado:

    
        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 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);
    
                }));
    
            }
        };
    
    
  5. Execute o aplicativo. Quando você seleciona um valor de classificação, ele gera um valor numérico abaixo do controle Rating.

Observação  Esta seção e a última apenas fizeram referência ao que você precisa saber para começar a usar os controles WinJS. Para saber mais e para visualizar uma lista de controles, veja Guia de início rápido: adicionando controles e estilos WinJS.

Resumo

Parabéns! Você concluiu o tutorial. Você aprendeu a adicionar conteúdo a um aplicativo da Windows Store. Além disso, aprendeu também a adicionar interatividade e a estilizar o aplicativo.

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á mais sobre como funciona o ciclo de vida dos aplicativos e como salvar o estado de um aplicativo. Vá para a Parte 2: Gerenciar o ciclo de vida e o estado do aplicativo.

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:
© 2015 Microsoft