Criar seu primeiro aplicativo da Windows Store com o Blend, parte 1: a página mestra (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. Como você conduz com este tutorial, será possível compilar um aplicativo simples, PickaFlick, em que você pode procurar uma lista de novos filmes. A lista é gerada com a API de Rotten Tomatoes e você deve se registrar para obter uma chave de API que será colada no código.

A home page do aplicativo PickaFlick

Na parte 1 deste tutorial, será criada a home page do aplicativo. Ao longo do projeto, você aprenderá como:

• Criar um projeto com base em um modelo de projeto

• Exibir como a Interface de Usuário do Blend altera seu aplicativo

• Adicionar um modelo de item ao projeto

• Implementar o modelo de navegação de página única

• Alternar para o Visual Studio e voltar

• Adicionar uma referência à API JavaScript do Windows

• Adicionar imagens ao projeto

• Definir regras de estilo CSS

• Criar um recipiente de layout de flexbox

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.

Nenhuma experiência com HTML, CSS ou JavaScript é necessária para concluir este tutorial. Entretanto, para ser bem-sucedido com o Blend, é útil ter um nível intermediário de experiência com HTML, CSS e JavaScript.

Criar um projeto com base em um modelo de projeto

Blend e Visual Studio fornecem os mesmos modelos de projeto que ajudam a iniciar o desenvolvimento de seu aplicativo da Windows Store. Para obter mais informações sobre modelos que Blend e Visual Studio oferecem para o desenvolvimento de outros tipos de aplicativos, consulte Modelos para acelerar o desenvolvimento de aplicativo.

Para criar um projeto

1. Em Blend, no menu File, clique em New Project.

   Na caixa de diálogo New Project, é exibida uma lista de tipos de projetos no lado esquerdo. Quando você clica em um tipo de projeto, os modelos de projeto associados a ele aparecem do lado direito.

   

2. Na lista de tipos de projetos, clique em HTML (Windows Store).

3. Na lista de modelos de projetos, clique em Blank App.

4. Na caixa de texto Name, digite PickaFlick.

5. Na caixa de texto Location, verifique a localização do projeto.

6. Na lista Language, JavaScript é a única opção.

Exibir como a Interface de Usuário do Blend altera seu aplicativo

O espaço de trabalho padrão no Blend proporciona uma interface visual para a compilação de aplicativos da Windows Store: a superfície de design, os painéis, as configurações de espaço de trabalho, as exibições de autoria e os menus. Para obter mais informações, consulte Espaço de trabalho para aplicativo do Blend (HTML).

Quando você estiver trabalhando em um projeto, as alterações feitas em uma área do aplicativo são refletidas em toda a interface.

No canto superior esquerdo, clique na guia Projects para ver os arquivos e as pastas gerados automaticamente ao criar um projeto do modelo Blank App:

• References   Contém o CSS somente leitura e as Bibliotecas do Windows para JavaScript.

• css   Contém o arquivo .css para o aplicativo.

• images   Contém os ativos de imagem padrão para o aplicativo.

• js   Contém o arquivo .js padrão para o aplicativo.

• default.html   A página inicial padrão do aplicativo.

• package.appxmanifest   Lista o conteúdo do aplicativo e descreve seus recursos (por exemplo, se ele pode acessar a webcam do usuário). Esse arquivo também especifica a página inicial do aplicativo.

Para obter mais informações, consulte Painel Projetos (HTML).

Abaixo do painel Projects, no canto inferior esquerdo da interface, fica o painel Live DOM. O painel Live DOM mostra a estrutura do default.html. Se você expandir body, o elemento p ficará visível.

O painel Live DOM fornece um modo de exibição da hierarquia de objetos da página HTML em que você está trabalhando. Trabalhando diretamente no painel Live DOM, é possível alterar de maneira rápida e fácil a hierarquia de objetos conforme você avança.

Para obter mais informações, consulte Painel DOM do Live (HTML).

O elemento p contém o texto "Content goes here" (O conteúdo vai aqui), que é exibido na superfície de design.

A exibição de documentos relacionado mostra o código para default.html e default.css. Quando você faz alterações nos elementos exibidos na superfície de design, os documentos relacionados são atualizados automaticamente. Quando você faz alterações no JavaScript, será alertado que é preciso atualizar o modo de exibição. Clique em Refresh  no canto superior direito do aplicativo para ver as alterações na superfície de design.

Para obter mais informações, consulte Exibição de documentos relacionados (HTML).

Se default.html e default.css não forem exibidos, clique no ícone do modo de exibição Split,  no canto superior direito da superfície de design.

Nesse procedimento, você removerá o elemento padrão de pdefault.html, adicionará uma cor do plano de fundo a body e verificará se o código foi atualizado enquanto você trabalha.

Para modificar a exibição de default.html

1. No painel Live DOM, clique com o botão direito do mouse em p e clique em Delete.

2. No painel Style Rules, expanda default.css e clique em body.

   Observe que o seletor body também está selecionado em default.css no modo de exibição de documentos relacionados.

3. No painel CSS Properties, expanda a categoria Background.

4. Ao lado de background-color, clique em Not Set.

5. Na caixa de texto Hex value, digite #D5BF9A e pressione Enter.

   Agora, o seletor body em default.css contém a regra de estilo background-color: #D5BF9A.

Adicionar um modelo de item ao projeto

Além dos modelos de projetos, Blend e Visual Studio oferecem modelos de item, que contêm o código de uso geral. É possível adicionar facilmente um a cada projeto para ajudar a acelerar o desenvolvimento de aplicativos. Consulte Modelos para acelerar o desenvolvimento de aplicativo.

Para o aplicativo PickaFlick, você adicionará um modelo de item de uma página HTML ao projeto existente. A página conterá o HTML da home page do aplicativo.

Para adicionar um modelo de item de uma página HTML

1. No menu File, clique em New Item.

   A caixa de diálogo New Item é exibida.

   

2. Clique em HTML Page na lista de modelos de item.

3. Na caixa de texto Name, digite homepage.html e clique em OK para adicionar o modelo de item.

No modo de exibição de documentos relacionados, observe que a marcação da homepage.html é mínima.

Como o homepage.html será exibido como um fragmento dentro de default.html, homepage.html herdará o estilo de default.html, para que não seja necessário adicionar referências CSS ou HTML ao homepage.html.

Em seguida, você adicionará um elemento de div à página e renomeará o div. Ao renomear o div, é aplicado um atributo id a ele, tornando o div mais fácil de identificar entre outros elementos div na página e em todo o aplicativo.

É possível adicionar elementos à página HTML:

• Digitando diretamente no editor de códigos

• Inserindo o elemento usando o painel Assets

• Inserindo o elemento diretamente no painel Live DOM.

O procedimento a seguir mostrará os três métodos para adicionar um elemento à página HTML. Depois de adicionar o div, você adicionará um atributo id ao div, renomeando-o no painel Live DOM.

Para adicionar um div ao homepage.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.

   Dica

   As maneiras adicionais para adicionar um elemento a superfície de design em Blend são:

   • No modo de exibição de documentos relacionados, em homepage.html, coloque o cursor entre as marcas body inicial e final e digite <div>.A marca final é adicionada automaticamente.

   • No painel Live DOM, clique em body, em seguida, no painel Assets, localize o elemento div digitando div na caixa de texto Search e execute uma destas opções:

     • Clique duas vezes em div para adicionar um elemento div à página.

     • Arraste div do painel de Assets para a superfície de design.

     • Arraste div do painel de Assets para o painel Live DOM.

     • Desenhe um div diretamente na superfície de design.

   Um novo div aparece no painel Live DOM e no HTML de homepage.html.

2. No painel Live DOM, execute uma das opções a seguir para aplicar id ao novo div:

   • Clique duas vezes em div e digite homepageContainer no campo de texto.

     

   • Clique com o botão direito do mouse em div, clique em Edit ID e digite homepageContainer.

   • No painel HTML Attributes, no campo id, digite homepageContainer.

   No modo de exibição de documentos relacionados, em homepage.html, é adicionado um atributo id com o valor homepageContainer ao div.

   

Implementar o modelo de navegação de página única

Nesta seção, você aprenderá a:

• Implementar o modelo de navegação de página única

• Alternar entre Blend e Visual Studio para modificar o JavaScript

No caso do aplicativo PickaFlick, você usará o modelo de navegação de página única, o que significa que será usada uma única página para exibir o aplicativo e carregar os dados de outras páginas de acordo com a necessidade. Você ainda divide o aplicativo em vários arquivos, mas seu aplicativo carrega outras páginas como fragmentos de página na página padrão, em vez de se mover de uma página para outra (navegação de várias páginas). Consulte Quickstart: Usando a navegação de página única (aplicativos da Windows Store usando JavaScript e HTML).

Alternar para o Visual Studio e voltar novamente

Para carregar o conteúdo de homepage.html para default.html, você precisará chamar o namespace Win.JS UI.Fragment para processar o fragmento de página em default.html. É possível alterar seus arquivos .js em Blend, mas você pode adicionar, modificar e depurar JavaScript mais facilmente usando as ferramentas compiladas no Visual Studio. Para obter mais informações sobre essas ferramentas, consulte JavaScript IntelliSense.

Você pode alternar entre Blend e Visual Studio enquanto estiver trabalhando em um projeto. Você pode até ter o mesmo arquivo de projeto aberto no Blend e no Visual Studio ao mesmo tempo, no mesmo computador. Ao salvar uma alteração em um arquivo em uma ferramenta e alternar para outra, você simplesmente recarrega o arquivo para atualizar sua exibição do projeto.

Adicionar uma referência à API JavaScript do Windows

Agora você está pronto para adicionar uma referência ao namespace do fragmento JavaScript do Windows.

Para adicionar uma referência em default.js ao namespace WinJS.UI.Fragments

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

   O Visual Studio abrirá o projeto PickaFlick.

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

3. Cole o código a seguir imediatamente depois de app.start();:

   //add DOMContentLoaded event
       document.addEventListener("DOMContentLoaded", loadInitialPage, false);
   

4. Cole o código a seguir no final do script:

   //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
   var target;
   
   function loadInitialPage() {
       target = document.querySelector("body");
       WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
   }
   

5. Pressione Ctrl+Shift+S para salvar todas as alterações e alterne de volta para Blend.

6. Clique em Recarregar quando for solicitado a recarregar o projeto. O Blend, reflete as alterações que você acabou de fazer no projeto no Visual Studio.

Observe que agora homepageContainer aparece no painel Live DOM. Clique na guia default.html, na parte superior do aplicativo. Observe que a cor do plano de fundo de homepageContainer, no painel Live DOM é uma cor diferente do restante do painel Live DOM, indicando que se origina de uma página diferente. Á direita de homepageContainer fica o ícone do fragmento .

Se você clicar em homepageContainer no painel Live DOM, no modo de exibição de documentos relacionados, você verá homepage.html aberto. Além das sugestões, quando você seleciona um elemento que origine de homepage.html, enquanto estiver trabalhando no default.html, na parte superior do aplicativo, na guia default.html, é exibida a notificação "The selected content is part of homepage.html" (O conteúdo selecionado faz parte de homepage.html). Essa mensagem ajuda a identificar a origem dos objetos ou dos elementos exibidos na superfície de design durante o trabalho no default.html, o núcleo do modelo de navegação de página única.

Adicionar imagens ao projeto

O aplicativo PickaFlick é compilado com as imagens criadas por um designer gráfico. Além de adicionar interesse visual, a imagem de galinha também serve como botão, que o usuário clica para iniciar o aplicativo.

É possível adicionar as imagens ao projeto:

• Usando o comando Adicionar Item Existente, no menu Projeto.

• Copiando e colando

• Arrastando e soltando

Neste exemplo, você copiará e colará as imagens.

Para adicionar imagens ao projeto

1. As imagens a seguir são incluídas com o projeto de exemplo:

   • ChickenSprite

   • FilmStrip

   • MainLogo

   • SmallLogo-Galinha

   • TempBoxArt

   Se você baixou o projeto exemplo, abra a pasta Assets, pressione Ctrl+A e Ctrl+C.

2. No Blend, no painel Projects, clique com o botão direito do mouse na pasta Images e clique em Paste.

Agora, é possível adicionar imagens à superfície de design para estilizar o aplicativo.

Definir regras de estilo CSS

Você modifica a aparência de seu aplicativo aplicando principalmente os estilos CSS. É possível editar os estilos usando qualquer editor de texto, mas é mais fácil criar e editá-los usando um conjunto sofisticado de ferramentas CSS no Blend.

É possível definir propriedades específicas de CSS em Blend:

• Digitando diretamente no editor de códigos.

• Localizando a propriedade que você deseja modificar no painel de CSS Properties, visualmente ou digitando o nome da propriedade na caixa de texto Search or Set e digitando o valor desejado no editor de valores para essa propriedade.

• Digitando a declaração da propriedade diretamente na caixa de texto Search or Set e usando a sintaxe de CSS correta. Por exemplo, é possível definir a propriedade background-repeat para repeat-x digitando plano de fundo-repetir: repetir-x na caixa de texto Search or Set e pressionando Enter.

  Também é possível inserir várias propriedades para o mesmo elemento digitando os nomes e os valores da propriedade diretamente na caixa de texto Search or Set. Use a sintaxe de CSS correta e inclua um ponto-e-vírgula (;) entre cada definição de estilo. Por exemplo, é possível definir a propriedade background-repeat para repeat-x e position-y para center digitando background-repeat: repeat-x; position-y: center na caixa de texto Search or Set e pressionando Enter.

É possível organizar as propriedades no painel CSS Properties em uma destas maneiras: por categoria ou pelo nome.

Se você organizar as propriedades por categoria, as propriedades de CSS aparecem agrupadas por categoria, com as categorias organizadas em ordem alfabética. Se você organizar as propriedades pelo nome, verá uma lista alfabética de todas as propriedades de CSS disponíveis.

Em seguida, você aplicará uma propriedade height a homepageContainer, adicionará e estilizará as imagens.

Para modificar a altura de homepageContainer

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

   Observe que agora #homepageContainer aparece no painel Style Rules. Um contorno verde indica que é o estilo selecionado no momento. O indicador amarelo abaixo de #homepageContainer é o ponto de inserção para novos estilos. É possível arrastar o ponto de inserção se quiser inserir novos estilos em um local diferente. No painel CSS Properties, observe também que agora #homepageContainer (default.css) aparece na janela Applied Styles.

2. No painel CSS Properties, localize a propriedade de altura digitando altura na caixa de texto Search or Set.

3. No editor de valores de height, digite 100%.

   Se as propriedades forem organizadas por categoria, line-height aparecerá primeiro na lista. Se as propriedades forem organizadas por nome, height aparecerá primeiro na lista.

Para adicionar e estilizar a imagem de plano de fundo

1. Na caixa de texto Search or Set, clique no x para limpar a seleção do procedimento anterior.

2. Na categoria Background do painel CSS Properties, localize a caixa Layers, clique em Add  e no botão de recurso da imagem .

3. Na lista de origem, clique em FilmStrip.png.

4. Defina position-y para center e repeat para repeat-x.

   

Para adicionar e estilizar o logotipo principal

1. Na caixa Layers, clique em Add  e clique no botão de recurso da imagem .

2. Na lista de origem, clique em MainLogo.png.

   Observe que MainLogo.png é exibido atrás de filmstrip.png.

3. Altere z-index (ordem das camadas), clicando em MainLogo.png na caixa Layers e clicando na seta para cima para mover MainLogo.png para cima de filmstrip.png na lista de imagens.

   Agora MainLogo.png é exibido em cima de filmstrip.png.

   

4. Defina position-x e position-y para center e repeat para no-repeat.

   

Criar um recipiente de layout de flexbox

Nesta seção, você adicionará e estilizará a imagem de galinha. A imagem de galinha é exibida no centro da página principal, mas a posição muda quando você aponta para ela. Esse efeito não é realmente uma animação, mas sim uma pseudoclasse hover aplicada à imagem. Por padrão, somente metade da imagem é exibida. Quando você aponta para ela, a parte da imagem oculta se torna visível, substituindo o modo de exibição padrão e simulando uma animação.

Para posicionar a imagem de maneira mais fácil, você criará um recipiente de layout flexbox modificando a propriedade display de homepageContainer. Consulte Layout da caixa flexível ("Flexbox").

Para adicionar e estilizar a flexbox

1. No painel Live Dom, clique em homepageContainer.

2. No painel Projects, abra a pasta images e clique duas vezes em ChickenSprite.png para adicionar a imagem de galinha à superfície de design.

   Clicando em homepageContainer, você adicionou ChickenSprite.png como filho de homepageContainer. O elemento img fica ativo e a imagem de galinha aparece na superfície de design.

   

3. No painel Live DOM, clique em homepageContainer.

4. No painel CSS Properties, localize a categoria de Layout e clique em flexível, na lista de exibição.

5. Na categoria FlexBox, defina align-items e justify-content para center.

6. No painel Live DOM, clique com o botão direito do mouse no elemento img, clique em Group Into e clique em div ou pressione Ctrl+G.

   Dica

   Também é possível arrastar o elemento img para div.

   Agora, o elemento de imagem é empacotado em um recipiente div.

7. Clique em div e digite spriteContainer na caixa de texto.

8. Clique com o botão direito do mouse em spriteContainer e clique em Create Style Rule from Element ID.

9. No painel CSS Properties, defina altura para 180px e overflow-y para oculto.

   

10. Clique img no painel Live DOM e digite chickenButton na caixa de texto.

    Dica

    Expanda spriteContainer se o elemento img não estiver visível.

11. No painel Style Rules, à direita de default.css, clique em Add .

12. No painel Style Rules, clique em .newStyle e digite #chickenButton:hover para criar um pseudo-seletor para chickenButton.

    Observe que, conforme você digita, o CSS Intellisense fornece referências de CSS disponíveis facilitar o desenvolvimento de regras de estilo.

    

13. No painel CSS Properties, na categoria Margin, defina margin-top para -180px.

Pressione F5 para compilar e executar o aplicativo ou pressione Ctrl+I para visualizar o aplicativo no modo interativo. Aponte para a imagem de galinha para confirmar se a imagem de galinha alterna os estados. Pressione Alt+F4 para fechar o aplicativo.

Agora é possível criar a página de detalhes. Para continuar, consulte Criar seu primeiro aplicativo da Windows Store com o Blend, parte 2: a página de detalhes (HTML e JavaScript).