Criar seu primeiro aplicativo da Windows Store com o Blend, parte 2: a página de detalhes (HTML e JavaScript)

Você pode desenvolver um aplicativo da Windows Store com mais rapidez e eficiência usando a coleção de ferramentas HTML e CSS do Blend for Visual Studio. À medida que você percorrer este tutorial, compilará um aplicativo simples, o PickaFlick, no qual poderá procurar novos filmes em uma lista que é gerada com uma API da Rotten Tomatoes.

Ao baixar esse projeto da galeria de amostras, você poderá examinar não apenas o código, mas também todos os respectivos ativos, para que seja possível acompanhar e compilar o projeto à medida que avançar.

Na Criar seu primeiro aplicativo da Windows Store com o Blend, parte 1: a página mestra (HTML e JavaScript), você criou a home page do PickaFlick. Na parte 2, você vai:

• Adicionar um modelo de item ao projeto

• Adicionar uma referência à API JavaScript do Windows

• Usar o modo interativo

• Adicionar um controle FlipView (Biblioteca JavaScript do Windows)

• Associar dados do filme

• Criar e definir o estilo de um modelo de item

• Criar a grade de layout

• Editar as associações de dados

• Modificar as propriedades de fontes

Adicionar um modelo de item ao projeto

À medida que você criar a página de detalhes do filme, as etapas iniciais serão familiares desde a primeira parte deste tutorial: criar uma página HTML, adicionar um div a ela e renomear esse elemento para criar um elemento id.

Para adicionar uma página HTML

1. No painel Projects, clique com o botão direito do mouse no arquivo de projeto e clique em New Item.

   A caixa de diálogo New Item é exibida.

   

2. Na lista de modelos de itens, clique em HTML Page, nomeie a página como movieDisplay.html e clique em OK.

Para adicionar um div a movieDisplay.html

1. No painel Live DOM, clique com o botão direito do mouse em body, clique em Insert Element e clique em div ou pressione Ctrl.

2. No painel Live DOM, renomeie o elemento div que você acabou de adicionar clicando nele e digitando movieDisplayContainer no campo de texto.

   

Alternar para o Visual Studio e voltar novamente

O namespace do fragmento JavaScript do Windows é o mesmo namespace que você usou quando criou homepage.html na primeira parte deste tutorial, e alternar do Blend para o Visual Studio também será familiar. Essa chamada ao namespace WinJS.Ui.Fragments carregará a página movieDisplay como um fragmento em default.html quando o botão de galinha for clicado.

Para modificar o default.js

1. No painel Projects, clique com o botão direito do mouse no arquivo PickaFlick.sln e clique em Edit in Visual Studio.

   O Visual Studio abrirá o projeto Pick-a-Flick.

2. No Gerenciador de Soluções, expanda a pasta js e clique duas vezes em default.js para abri-la.

3. Localize .done(). Dentro dos parênteses, cole o seguinte código:

   //when the loadInitialPage function is complete, call handleLoadedPage
       function completed(r) {
         handleLoadedPage();
       }
     );
   }
   
   //create the chickenButton variable, and add a click event listener
   //when chickenButton is clicked, call loadResultsPage
   function handleLoadedPage() {
     var chickenButton = document.querySelector("#chickenButton");
     chickenButton.addEventListener("click", loadResultsPage);
   }
   
   //define loadResultsPage function, load movieDisplay.html
   function loadResultsPage() {
     clearChildren(target);
   
   //When page is loaded, use Windows Javascript Fragments API to load movieDisplay.html
   //call getMovieData
     WinJS.UI.Fragments.render("/movieDisplay.html", target).done(
   function completed(r) {
     getMovieData();
   }
   );
   }
   
   function clearChildren(element) {
     while (element.hasChildNodes()) {
       element.removeChild(element.lastChild);
     }
   }
   
   //define movieData variable and associated movie data variables
   //insert your own Rotten Tomatoes API key for apikey variable
   var movieData;
   
   function getMovieData() {
     var movieArray = new Array();
     var apikey = "Insert API Key Here";
     var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
     var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;
   
     WinJS.xhr({
       url: moviesSearchUrl, dataType: "jsonp"
     }).then(function (xhr) {
       var response = JSON.parse(xhr.response);
   
   //get title, summary, box art
       response.movies.forEach(function (i) {
         movieArray.push({
           title: i.title,
           summary: i.synopsis,
           boxart: i.posters.detailed
         });
       });
   
   //create movieData binding
       movieData = new WinJS.Binding.List(movieArray);
   
       WinJS.UI.processAll();
     }
   

4. Se você desejar executar esse aplicativo, substitua o texto Insert API Key Here pela chave que recebeu da Rotten Tomatoes e salve todas as suas alterações pressionando Ctrl+Shift+S.

   Quando você se registra para uma chave de API da Rotten Tomatoes, é obrigado a fornecer o nome do seu aplicativo e uma URL. É possível usar qualquer nome e fornecer uma URL para um site pessoal, por exemplo, um blog. Eles também solicitam que você selecione seu tipo de aplicativo. Como esse é um aplicativo para Windows 8, ele é otimizado para tablets e desktops Windows 8. O aplicativo chama uma lista de novos lançamentos de filmes, incluindo o título, a arte da caixa e a sinopse.

5. No Blend, clique em Reload para carregar as alterações que você acabou de fazer no projeto no Visual Studio.

Usar o modo interativo

Se você compilar e executar o aplicativo (por exemplo, pressionando F5), poderá acessar movieDisplay.html clicando ou tocando no botão de galinha. No entanto, você não pode clicar ou tocar no botão de galinha na superfície de design. Se você acessar movieDisplay.html no Blend, o estado do aplicativo deverá mudar. Usando o modo interativo, você pode passar eventos para seu aplicativo em tempo de design e, desse modo, acessar estados do aplicativo que não estão disponíveis antes da execução do JavaScript.

Quando você usa o modo interativo, pode interagir com o aplicativo da mesma forma que os usuários interagem quando ele está instalado em seus dispositivos. E, o mais importante, depois de executar seu aplicativo no modo interativo, você pode definir o estilo dos principais elementos do aplicativo que estavam anteriormente indisponíveis no Blend.

Para acessar movieDisplay.html usando o modo interativo

1. Com default.html visível na superfície de design, clique em Turn on Interactive Mode (no canto superior direito da interface do aplicativo) ou pressione Ctrl+Alt+I.

2. Quando o aplicativo for iniciado no modo interativo, clique ou toque no botão de galinha para navegar para movieDisplay.html, que está em branco.

3. Clique em Turn off Interactive Mode (no canto superior direito da interface do aplicativo) ou pressione Ctrl+Alt+I.

Observe que você ainda está trabalhando em default.html, conforme indica a guia na parte superior do aplicativo. No entanto, movieDisplayContainer agora aparece no painel Live DOM. Além disso, a notificação "O conteúdo selecionado faz parte de movieDisplay.html." aparece na parte superior do aplicativo, na guia default.html. Como mencionado anteriormente neste tópico, essa página não estava disponível para edição em seu estado dinâmico antes de você entrar no modo interativo. Agora que você carregou movieDisplay.html, é possível começar a definir o estilo de movieDisplayContainer.

Para adicionar um estilo a movieDisplayContainer

1. No painel Live DOM, clique com o botão direito do mouse em movieDisplayContainer e clique em Create Style Rule from Element ID.

2. No painel CSS Properties, com #movieDisplayContainer selecionado na categoria Applied Style Rules, defina height como 100%.

Adicionar um controle FlipView da Biblioteca JavaScript do Windows (WinJS)

Um controle FlipView é um controle da Biblioteca JavaScript do Windows que exibe um item de cada vez em uma coleção para habilitar um comportamento de "inversão" para navegar pela coleção de itens. Usando um controle FlipView no PickaFlick, você poderá facilmente navegar pela lista de filmes fornecida pela chamada à API da Rotten Tomatoes.

Você pode adicionar um controle FlipView diretamente do painel Assets do Blend.

Para adicionar um controle FlipView

1. Na caixa de texto Search do painel Assets, digite FlipView e pressione ENTER.

2. Clique duas vezes em FlipView para adicionar o controle a movieDisplayContainer.

Observe que o controle FlipView aparece no painel Live DOM. Quando um controle .winjs é instanciado no Blend, os elementos dinâmicos associados ao controle também aparecem no painel Live DOM. Para exibir esses elementos dinâmicos, expanda FlipView no painel Live DOM. O ícone de raio à direita de um elemento indica que o elemento é gerado dinamicamente.

Se você apontar para FlipView no painel Live DOM, aparecerão mais informações sobre o controle, incluindo type, tag, id e class. Observe que o controle FlipView faz parte da classe win-flipview.

Se você clicar em FlipView no painel Live DOM e apontar para .win-flipview (ui-dark.css) na categoria Applied Style Rules do painel CSS Properties, poderá confirmar que .win-flipview está definido em .win-flipview (ui-dark.css) e que height está definido como 400px.

Você pode substituir o estilo padrão (derivado de ui-dark.css) criando um estilo personalizado em default.css. Como já há uma classe atribuída ao controle FlipView, você pode adicionar rapidamente uma referência à classe em default.css e, em seguida, definir uma nova regra de estilo para essa classe.

Para criar um estilo para a classe win-flipview

1. No painel CSS Properties, à direita de Applied Style Rules, clique no ícone Create style rule from selected element e, em seguida, clique em Create Style Rule from Element Class.

   

2. No painel Style Rules, clique em win-flipview.

   Observe que agora .win-flipview (default.css) aparece na categoria Applied Style Rules do painel CSS Properties.

   

3. No painel CSS Properties, defina height como 100%.

Associar dados do filme

Neste ponto, os dados do filme são carregados, mas não são exibidos porque o HTML não contém nenhuma referência a eles. O HTML que aparece na superfície de design e os dados gerados por default.js (e que a variável movieData define) são completamente independentes entre si. Para exibir os dados na superfície de design, você deve associar os dados ao controle FlipView no HTML.

Para associar o controle FlipView a movieData

1. No painel Live DOM, clique em FlipView.

   Agora você pode acessar o controle FlipView no painel HTML Attributes (a guia ao lado da guia CSS Properties).

   Dica

   Quando você clica em um elemento, o painel HTML Attributes mostra propriedades do elemento.Quando você clica em um controle, o painel HTML Attributes mostra propriedades do controle.

2. Na categoria Windows App Controls do painel HTML Attributes, digite movieData.dataSource na caixa de texto itemDataSource.

   Em movieDisplay.html, o atributo data-win-options agora é aplicado ao controle FlipView e contém o valor itemDataSource:movieData.dataSource.

Criar e definir o estilo de um modelo de item

Como você está executando seu aplicativo no Blend, os dados ativos aparecem na superfície de design. Os dados brutos aparecem como uma cadeia de caracteres. Agora que você verificou a conexão de dados, pode definir o estilo dos dados usando as propriedades title, summary e boxart que criou em default.js para definir o estilo dos dados.

Você criará um modelo de dados para aplicar um estilo consistente a todos os dados do filme que você recuperou da Rotten Tomatoes.

Você criará um modelo de item aplicando uma propriedade itemTemplate ao controle FlipView.

Para criar um modelo de item

1. No painel Live DOM, verifique se FlipView está selecionado.

2. Na lista itemTemplate da categoria Windows App Controls do painel HTML Attributes, clique em Create new template.

   A caixa de diálogo Create New Template é exibida.

3. Nomeie o modelo movieDisplayTemplate e verifique se Identify by ID está selecionado.

4. Na lista Add data fields to template, clique em boxart, summary e title. Clique em OK.

   A arte da caixa, a sinopse e o título do primeiro filme na lista aparecem na superfície de design.

   

   Importante

   Como esse aplicativo usa dados ativos, os dados que aparecem podem ser diferentes dos dados na imagem anterior.

Os dados desejados aparecem na página, mas não exatamente como você quer no aplicativo final. Para modificar o layout, você aplicará uma grade à propriedade display de itemTemplate; essa grade formará a base para o layout do conteúdo na página. Depois de criar a grade, você pode começar a definir o estilo dos elementos que adicionará à página.

Para definir o estilo do modelo de item

1. Na superfície de design, clique à direita da imagem de arte da caixa. Isso seleciona div, que contém a arte da caixa, o título e a sinopse, indicados pela caixa azul ao redor dos elementos na página.

2. Clique com o botão direito do mouse em div e clique em Add New Class.

3. Na caixa de diálogo Add New Class, nomeie a classe movieContainer, verifique se Create style rule targeting this class está selecionado e clique em OK.

4. No painel Style Rules, clique em .movieContainer.

5. Na caixa de texto Search or Set do painel CSS Properties, digite height: 100%; width: 100%; para definir as propriedades height e width ao mesmo tempo e pressione Enter.

   O conteúdo se move para o canto superior esquerdo da superfície de design.

6. Para facilitar a criação da grade, limpe a página excluindo o seguinte código de movieDisplay.html:

   <img data-win-bind="src:boxart" height="100" width="100">
        <div data-win-bind="textContent:summary"></div>
        <div data-win-bind="textContent:title"></div>
   

7. No painel CSS Properties, desmarque a caixa de texto Search or Set clicando no ícone Clear Search à direita da caixa.

8. Na categoria Layout, clique em –ms-grid na lista suspensa display.

Criar a grade de layout

Agora que a propriedade display está definida como -ms-grid, você pode criar linhas e colunas clicando diretamente na superfície de design.

Você pode modificar objetos usando adornos, que são identificadores que aparecem nos cantos e no meio dos contornos do objeto. Os adornos também aparecem nos finais de diretrizes e linhas de grade. Ao criar uma grade, você usa um adorno de inserção para colocar a linha de grade onde deseja.

Para criar a grade de layout

1. No painel CSS Properties, verifique se a opção Winning Properties ou .movieContainer está selecionada.

2. Na superfície de design, aponte para a linha azul pontilhada na parte superior da grade e clique no adorno de inserção laranja que aparece.

   

   Um adorno de coluna é adicionado.

3. Repita para adicionar mais três adornos de colunas de grade, que definem cinco colunas.

4. Aponte para o adorno de grade à esquerda. Clique para adicionar um adorno de linha, que define duas linhas.

   

   Quando você terminar, deverá ter uma grade com cinco colunas e duas linhas semelhantes à seguinte ilustração:

   

Para este tutorial, você pode estimar as larguras de coluna e linha. Entretanto, é possível refinar o layout especificando larguras exatas para cada coluna ou linha usando o adorno de largura. Clique na caixa para digitar um número e escolha uma das seguintes opções na lista:

• Fracionário (fr)

• Pixel (px)

• Automático

• Porcentagem (%)

Criar o layout dos elementos da grade

O layout consiste em um logotipo, uma imagem de espaço reservado para a arte da caixa, o título e a sinopse. No procedimento a seguir, você adicionará e denominará elementos, e associará os dados de arte da caixa, título e sinopse aos elementos na página.

Para inserir e definir o estilo de imagens

1. No painel Projects, abra a pasta images e arraste small-LogoChicken para a célula superior esquerda na grade.

2. Clique com o botão direito do mouse em small-LogoChicken e clique em Add New Class.

3. Na caixa de diálogo Add New Class, nomeie a classe smallLogo-Chicken.

4. Verifique se a opção Create style rule targeting this class está selecionada e clique em OK.

5. No painel CSS Properties, na categoria Grid, defina grid-column-align e grid-row-align como center.

   

6. No painel Projects, abra a pasta images e arraste temp.png para a terceira coluna na segunda linha da grade.

7. Clique com o botão direito do mouse em temp.png e clique em Add New Class.

8. Na caixa de diálogo Add New Class, nomeie a classe boxart.

9. Verifique se a opção Create style rule targeting this class está selecionada e clique em OK.

10. No painel CSS Properties, na categoria Grid, defina grid-column-align como center e grid-row-align como start.

    

Agora você pode associar dados e definir o estilo deles diretamente na superfície de design.

Editar as associações de dados

Ao associar os elementos individuais aos objetos de dados específicos que são definidos em default.js, você pode definir o estilo de cada elemento separadamente.

No procedimento a seguir, você associará a imagem de arte da caixa ao objeto de dados de arte da caixa. Além disso, você adicionará os elementos title e summary, os associará aos dados de título e sinopse e, em seguida, definirá seus estilos.

Para associar a imagem de arte da caixa aos dados de arte da caixa

1. Na superfície de design, clique na imagem de arte da caixa.

2. No painel HTML Attributes, na categoria Common, clique em Advanced Options e clique em Edit Data Binding.

3. Na caixa de diálogo Create Data Binding for <img>.src, clique em boxart e em OK.

   A borda amarela em torno do editor de valor indica um objeto associado a dados.

   

   Depois de um ligeiro atraso enquanto a conexão de dados é atualizada, a nova imagem do filme aparece na superfície de design.

4. No painel CSS Properties, defina height como 500px.

Para adicionar e definir o estilo do título

1. No painel Assets, digite h1 na caixa de texto Search e arraste o elemento h1 para a terceira coluna na primeira linha.

   O elemento h1 aparece na página.

2. Clique com o botão direito do mouse no elemento h1 e clique em Add New Class.

3. Na caixa de diálogo Add New Class, nomeie a classe title.

4. Verifique se a opção Create style rule targeting this class está selecionada e clique em OK.

5. Clique no elemento h1 e, ao lado de Color na categoria Font do painel CSS Properties, clique em Not Set.

6. No canto inferior direito parte do editor de cores, clique no conta-gotas de cor.

   

7. Usando o conta-gotas, aponte para a imagem de galinha na superfície de design para especificar o tom de vermelho que você deseja para o texto do título.

   Observe que a cor do título muda à medida que você aponta para partes diferentes da imagem de galinha.

8. Clique na cor que deseja aplicar ao título.

Para associar o elemento h1 aos dados de título

1. Com o elemento h1 selecionado, na categoria Common do painel HTML Attributes, clique em Advanced Options e depois em Edit Data Binding.

2. Na caixa de diálogo Create Data Binding for h1.textContent, clique em title e em OK.

   Depois de um ligeiro atraso enquanto a conexão de dados é atualizada, o novo título do filme aparece na superfície de design.

Para evitar que títulos mais longos apareçam em duas linhas, você pode modificar a extensão de coluna de modo que os títulos mais longos ocupem duas ou mais colunas.

Para modificar a extensão de coluna do título

• No painel CSS Properties, na categoria Grid, defina o valor de grid-column-span como 3 e pressione ENTER.

  O elemento h1 agora se estende por três colunas.

Para adicionar a sinopse

• No painel Assets, digite article na caixa de texto Search e arraste article para a quinta coluna na segunda linha.

  O elemento article aparece em .movieContainer. Como o elemento está vazio, você não verá o conteúdo até associar os dados.

Para associar o elemento article aos dados da sinopse

1. Clique com o botão direito do mouse no elemento article e clique em Add New Class.

2. Na caixa de diálogo Add New Class, nomeie a classe summary.

3. Verifique se a opção Create style rule targeting this class está selecionada e clique em OK.

4. Na categoria Common do painel HTML Attributes, clique em Advanced Options à direita de textContent e clique em Edit Data Binding.

5. Na caixa de diálogo Create Data Binding for article.textContent, clique em summary e em OK.

   A nova sinopse do filme aparece na superfície de design.

Modificar as propriedades de fontes

O estilo de texto padrão não é fácil de ler, mas você pode modificar as propriedades de fontes do texto usando o painel CSS Properties. No procedimento a seguir, você definirá o estilo do texto de sinopse. Você pode alterar a fonte do título da mesma forma.

Para definir o estilo do texto de sinopse

1. Clique no elemento article e clique na fonte desejada na lista font-family name no painel CSS Properties.

   Você poderá adicionar fontes à sua lista font-family clicando na lista font-family name.

   Você também pode alterar a ordem da seleção de fontes selecionando uma fonte na lista font-family name e clicando nas setas Para cima ou Para baixo. É possível confirmar no arquivo .css que a ordem das fontes muda da forma apropriada.

2. No editor de valor font-size, clique no valor desejado ou insira-o.

   

3. Ao lado de color, clique em Not Set.

4. No editor de cores, clique na cor desejada, ou insira o código hexadecimal da cor na caixa de texto hex value e pressione enter.

   Como alternativa, é possível clicar no conta-gotas de cor no canto inferior direito do editor de cores. Use o conta-gotas para apontar para qualquer elemento na área de trabalho que tenha a cor desejada. A cor do título muda conforme você aponta para diferentes elementos. Se você clicar no elemento que tem a cor desejada, o texto da sinopse ficará dessa cor.

   Além disso, você pode inserir uma fonte personalizada para marcar ainda mais seu aplicativo. Consulte Inserir uma fonte personalizada.

Para adicionar uma barra de rolagem para sinopses mais longas, modifique a propriedade overflow do elemento article.

Para adicionar uma barra de rolagem para sinopses mais longas

1. Selecione o elemento article e, em seguida, na caixa de texto Search or Set, digite overflow.

2. Na lista overflow, clique em auto.

   Uma barra de rolagem aparecerá agora para as sinopses que excedem a página.

Você também pode refinar seu layout usando réguas e guias para alinhar elementos na página. Consulte Usar réguas e guias.

Se você se registrou na Rotten Tomatoes e incorporou a chave de API apropriada, agora pode pressionar F5 para compilar e executar seu aplicativo.