Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

Criação de um aplicativo Windows 8 com HTML5: Como criar um pequeno leitor RSS (parte 1)

David Rousset

Technical Evangelist

Começando do zero, vamos aprender através destes dois tutoriais como criar um pequeno leitor RSS com HTML5, CSS3 e WinJS, a estrutura JavaScript da Microsoft para Windows 8. Também tentaremos seguir as diretrizes de design da interface de usuário do Windows 8 UI usando o Expression Blend 5. Se tudo correr bem, você deve seguir esses dois artigos em 30 minutos.

Este primeiro artigo o ajudará a criar a tela de boas-vindas que usará um controle ListView WinJS. Esse controle exibirá todas as postagens de blog publicadas recentemente através de miniaturas. O segundo funcionará no modo de exibição detalhada mostrado quando se clicar em um dos itens. No fim, você encontrará a solução final para baixar. Veja-a como recursos complementares úteis caso precise esclarecer alguma parte deste artigo.

Pré-requisitos: Pré-requisitos: para seguir estes tutoriais, primeiro você precisa:

  1. Baixar/comprar e instalar o Windows 8 RTM em sua máquina: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx onde também terá uma versão de avaliação gratuita de 90 dias disponível.
  2. Baixar e instalar o Visual Studio 2012 Express RTM para Windows 8: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx, que é gratuito ou você pode usar as versões pagas, é claro.
JJ916682.note(pt-br,MSDN.10).gifNote:
Se você tiver um Mac, ele funciona perfeitamente graças ao BootCamp ou dentro de uma máquina virtual controlada por Parallels, por exemplo.
Este artigo foi atualizado em 21/08/2012 para implementar as mudanças na interface de usuário e no código entre o Windows 8 Release Preview e o RTM. De modo geral, se você precisar migrar seu aplicativo do RP, deve ler o: documento de detalhamento de mudanças. Em nosso caso, o único impacto se relacionou com a nova interface de usuário e a nomenclatura do Visual Studio.
Inclui uma postagem complementar dedicada ao WordPress e Community Server aqui: Aplicativo HTML5 Windows 8 do estilo Metro: leitor RSS em 30 min - criação de sua versão do WordPress

Aqui está um resumo breve do que veremos neste artigo:

Etapa 1: criação de um aplicativo vazio

JJ916682.note(pt-br,MSDN.10).gifNote:
esses tutoriais se baseiam na sessão Ferramentas para criação de aplicativos do estilo Metro do BUILD apresentada por Chris Sell e Kieran Mockford. Eu simplesmente a atualizei para o Windows 8 RTM.

Etapa 1: criação de um aplicativo vazio

A primeira coisa que você precisa fazer é lançar o Visual Studio 2012 e criar um novo projeto JavaScript –> Aplicativo Windows Store vazio via “Arquivo –> Novo projeto”:

JJ916682.94ED1ACC655BE249DAA056919C9EB0B3(pt-br,MSDN.10).png

Chame-o “SimpleChannel9Reader ” já que vamos baixar o fluxo RSS da seção Coding4Fun do Channel9 disponível aqui: http://channel9.msdn.com/coding4fun/articles/RSS

Etapa 2: criação da base HTML e CSS de nossa página principal

Abra o arquivo “default.html” que descreve a primeira página que será exibida quando você lançar o aplicativo. No lugar da parte HTML a seguir:

<p>Content goes here</p>

Insira esta:

<div id="main">
<header id="banner">
<button id="backbutton" class="win-backbutton"></button>
<h1 id="maintitle" class="win-title">Welcome to Channel 9!</h1>
</header>
<section id="content"></section>
</div>

Agora temos um contêiner de divisor global com a identidade "main" contendo 2 subcontêineres chamados “banner” e “content”. Obviamente, o cabeçalho será exibido no alto da página e a seção conteúdo logo abaixo.

Somemos um pouco de CSS a isso abrindo o arquivo "default.css" armazenado no diretório "css". Você verá que já há alguma CSS pré-definida para lidar com os vários modos de exibição disponíveis do Windows 8 graças à Media Queries.

Nesses dois artigos, concentraremos nossos esforços apenas no estado “tela inteira-paisagem“. Assim, entre nesta seção e insira a porção de CSS a seguir:

#main {
    width: 100%;
    height: 100%;
}

#banner {
    width: 100%;
    height: 100%;
}

#backbutton {
}

#maintitle {
}

#content {
    width: 100%;
    height: 100%;
}

Isso simplesmente indica que gostaríamos de ocupar todo o espaço disponível para nossos 3 contêineres principais.

Execute seu aplicativo pressionando a tecla F5 ou clicando no botão a seguir.

JJ916682.52F2CD66C9927E1647827E7ED1020389(pt-br,MSDN.10).png

Logicamente, agora você deve ver esta tela:

JJ916682.72D62037D3D32479A457E2EAD9EFB9AB(pt-br,MSDN.10).png

E também deve ver um problema de design óbvio: o botão Voltar e o títulos não estão alinhados. Vamos resolver isso usando o Blend 5!

Etapa 3: primeiro contato com o Blend

Lance o Blend e navegue até a pasta onde está seu projeto SimpleChannel9Reader. O Blend mostrará:

JJ916682.A2778D62526A2FBCA6D801568ED4E70B(pt-br,MSDN.10).png

O objetivo aqui é criar 2 grades. A primeira será para o contêiner principal. Ela será definida por 1 coluna que tomará toda a largura disponível por 2 linhas. A 2a será definida por 1 linha e 2 colunas para o botão Voltar e o título.

Comecemos selecionando o elemento “main” usando a janela “Live DOM”:

JJ916682.36F995F57B29F52BA2DAB08AA4E9CE86(pt-br,MSDN.10).png

Vá para a parte “CSS Properties”, selecione a regra #main e, na janela “Layout”, alterne a exibição para “-ms-grid”:

JJ916682.AC008BDC501FB9711CD1BB2DF2BCF9FE(pt-br,MSDN.10).png

Usaremos a especificação CSS Grid Layout atualmente suportada apenas pelo IE10, mas isso deve se difundir em breve para outros navegadores. Se quiser saber mais sobre o tipo de layout suportado no modo Metro, você pode ler esse artigo: Escolha um layout de CSS3 para o seu aplicativo.

Se simplesmente quiser descobrir a especificação CSS3 Grid, sinta-se à vontade para brincar com essa demo de test-drive do IE: Prática: CSS3 Grid Layout

Ok, agora que o modo de exibição está adequadamente alternado para grade, precisamos definir nossa grade. Para isso, vá para a parte “Grid” e declare as seguintes propriedades:

JJ916682.8E3EFE23FE8FF00EFEFF9B0DB58D8EDB(pt-br,MSDN.10).png

Teremos uma única coluna tomando a largura total da tela (qualquer que seja a resolução) e duas linhas. A primeira linha terá uma altura "fixa" de 132 px e a outra ocupará o espaço restante. Você pode ver isso dentro da superfície do designer do Blend:

JJ916682.8395389420B0506B066CCF5F0F5FDC11(pt-br,MSDN.10).png

Agora, vamos mover o elemento “content” para a 2a linha. Selecione-a no “Live DOM”, escolha a regra #content e passe para suas propriedades “Grid”. Altere o valor “-ms-grid-row” para 2. Você também pode mover o elemento “banner” para a linha 1, mas ele ficará lá por padrão, caso não o faça.

Agora vamos dividir nossa primeira linha em duas colunas para mover cada elemento para os lugares certos. Selecione o elemento “banner”, mude sua propriedade de exibição para “-ms-grid” e defina linha de 1 fr e 2 colunas de 120 px e 1 fr:

JJ916682.F999AD66C1C79B40961EE2B1DE445E51(pt-br,MSDN.10).png

Mova o elemento “maintitle” para a coluna 2 e centralize-o verticalmente mudando a propriedade “-ms-grid-row-align” para “center”:

JJ916682.B513A4DC933F57FAC6CDF98EA1CE3CDA(pt-br,MSDN.10).png

Selecione o “backbutton” e pule para a parte “Layout”. Defina uma margem superior de 54 px e uma margem esquerda de 40 px. Se não tiver deixado nada passar, agora deve ver isso na superfície de design:

JJ916682.C8E4B842B75E59DEE28ADE3EC93DE469(pt-br,MSDN.10).png

Salve todas as alterações via “File” -> “Save All” e volte para o Visual Studio. Abra “default.css” e verá que o Blend gerou alguma CSS "limpa" nas regras certas:

@media screen and (-ms-view-state: fullscreen-landscape)
{

    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }

    #banner {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }

    #backbutton {
        margin-top: 54px;
        margin-left: 40px;
    }

    #maintitle {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }

    #content {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

Confirme o funcionamento do aplicativo simplesmente pressionando F5.

Etapa 4: carregamento dos dados com XHR e vinculação deles ao controle ListView

Ok, agora vejamos o código com um pouco mais de detalhes.

A primeira coisa a fazer é inserir o controle encarregado de exibir as miniaturas de nosso artigo na tela de boas-vindas. Usaremos WinJS para isso.

A biblioteca WinJS, ou “Microsoft Windows Library for JavaScript SDK” existe para ajudar desenvolvedores em JavaScript a implementarem a experiência da nova interface de usuário Windows 8 de uma forma fácil. Ela fornece um conjunto de controles, um mecanismo de modelagem, um mecanismo de vinculação, Promises para lidar com chamadas assíncronas, assistentes para lidar com namespaces, etc.

Por exemplo, se você quiser saber mais sobre a perte dos controles, pode ler esse artigo: width Início rápido: inclusão de controles e estilos WinJS

Em projetos da Windows Store, você encontrará essa biblioteca na seção de referências do “Gerenciador de soluções”:

JJ916682.81198C953E5D3E4C48AC78B1656DC1A3(pt-br,MSDN.10).png

Lá dentro, você encontrará as folhas de estilo padrão com os dois temas escuro e claro fornecidos, assim como o código JavaScript. Sinta-se à vontade para dar uma olhada. Pode ser interessante aprender lendo o código.

Em nosso caso, vamos usar o controle ListView, que cria um layout de grade para exibir a lista de elementos.

Abra “default.html” e, dentro da marca de seção, digite este trecho de HTML:

<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

No momento, é apenas um divisor clássico simples. Contudo, está anotado com o atributo data-win-control, que indica que gostaríamos de usar a biblioteca WinJS para transformar esse divisor simples em um controles ListView JavaScript.

Essa operação é feita graças a uma linha mágica de código JavaScript que você encontrará em “default.js”. Aqui está:

WinJS.UI.processAll();

Essa operação assíncrona analisará o DOM para encontrar todos os elementos marcados com atributos “data-win-control” para transformá-los em controles WinJS reais implementando a experiência da nova interface de usuário Windows 8 para você. Se você remover essa linha por engano, seu divisor se tornará um divisor simples novamente.

Agora precisamos alimentar essa ListView com dados apanhados do RSS feed. Na vinculação da função com o evento “onactivated”, acrescente este trecho de código logo acima da linha processAll():

articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("C9Data", publicMembers);

Depois você precisará declarar a variável “articlesList” no alto da função logo abaixo de “app” por exemplo.

Estamos declarando um tipo Binding.List() aqui. Esse é o tipo para usar para vincular seus dados aos controles WinJS. Ele contém, por exemplo, alguns métodos que o ajudarão a adicionar dados em segundo plano e, graças ao mecanismo de vinculação, isso se refletirá automaticamente no modo de exibição.

Além disso, você pode ter notado que estamos usando código JavaScript limpo através da utilização de padrões modernos como o “module pattern”, por exemplo. Para isso, temos uma função JS anônima executada automaticamente em “default.js”. Depois precisamos encontrar uma forma de expor alguns dados públicos a funções externas. Por isso estamos implementando o conceito de Namespace no assistente WinJS associado. Ele ajuda a definir facilmente o que gostaríamos de expor. Em nosso caso, temos um objeto público “C9Data” que terá uma propriedade “ItemList” contendo nossos futuros elementos para exibir.

Agora precisamos de uma função que classificará os dados do RSS feed, os analisará e criará alguns objetos JS rapidamente para enviá-los para a lista de vinculação. Aqui está a minha:

function downloadC9BlogFeed() {
    WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {

    });
}

Essa função se inicia com a execução de uma XmlHttpRequest assíncrona na URL especificada. O código definido no Promise (no .then() se você quiser) será então executado apenas quando a solicitação for concluída e os dados recebidos. Então é aqui que precisamos filtrar os dados através deste trecho de código que você tem de inserir na função anônima:

var items = rss.responseXML.querySelectorAll("item");

for (var n = 0; n < items.length; n++) {
    var article = {};
    article.title = items[n].querySelector("title").textContent;
    var thumbs = items[n].querySelectorAll("thumbnail");
    if (thumbs.length > 1) {
        article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
        article.content = items[n].textContent;
        articlesList.push(article);
    }
}

Espero que este código seja autoexplicativo. Ele seleciona os nós “item”, acessa suas propriedades interessantes para mapeá-las para um objeto “article” criado rapidamente nas propriedades “title”, “thumbs” e “content”. Memorize os nomes dessas propriedades; nós as usaremos adiante. Por fim, essa função termina adicionando esse objeto novo ao conjunto de vinculação.

Agora precisamos executar essa função durante a fase inicial de nosso aplicativo. O código deve ser executado quando a análise do DOM for realizada para criar os controles WinJS. Assim, para fazer isso, use esta linha de código:

WinJS.UI.processAll().then(downloadC9BlogFeed);

Temos de especificar a fonte de dados para o controle. Volte para o código HTML e modifique o divisor associado com o ListView para alterar suas opções:

<div id="articlelist" data-win-control="WinJS.UI.ListView" 
 data-win-options="{ itemDataSource: C9Data.ItemList.dataSource }"></div>

Por fim, precisamos de alguma CSS básica para ajudar o controle a saber como desenhar cada um de seus itens. Vá para o arquivo “default.css” e inclua essas duas regras:

#articlelist {
    width: 100%;
    height: 100%;
}

#articlelist .win-item {
    width: 150px;
    height: 150px;
}

Essa CSS indica que nosso controle ListView deve usar todo o espaço disponível de seu contêiner e que cada um de seus itens (através da classe “.win-item”) deve ocupar 150 por 150 pixels.

Execute a solução pressionando F5. Você terá algo tão feio quanto:

JJ916682.3CF5258027985DAED4F8CF50CB15AF4A(pt-br,MSDN.10).png

Mas não entre em pânico, esse resultado é o comportamento esperado! Ainda temos de trabalhar mais um pouco no design. Mas você já pode ver que a vinculação funciona corretamente e que o controle funciona com toque e de mouse. Além disso, o controle se dimensiona automaticamente para as várias soluções. Você não terá o mesmo layout (número de colunas e linhas exibidas) da tela acima em seu caso.

Etapa 5: utilização de um modelo e modificação do design com o Blend

Agora precisamos mudar a maneira como cada elemento é desenhado. Esse é exatamente o propósito do mecanismo de modelagem. Um modelo é somente um trecho de HTML marcado com atributos WinJS.

Navegue até a página “default.html” e inclua este trecho de HTML logo acima a parte “main”:

<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItemTemplate">
<div class="listItemImage">
            <img data-win-bind="src: thumbnail" />
</div>
        <div class="listItemTitle" data-win-bind="innerText: title"></div>
</div>
</div>

É um modelo HTML marcado com o valor “WinJS.Binding.Template”. Isso ajudará o WinJS a saber o que fazer com esse trecho especial de HTML depois da execução de processAll(). Você também encontrará o uso de “data-win-bind” para definir expressões de vinculação. Ele ajudará o mecanismo de vinculação a saber que propriedades JavaScript da fonte de dados mapear para os nós HTML apropriados. Exceto por isso, você pode usar HTML clássico.

Agora precisamos configurar o controle WinJS para não usar mais o modelo padrão e usar o novo acima em seu lugar. Isso é feito simplesmente altereando-se as opções:

<div id="articlelist" data-win-control="WinJS.UI.ListView" 
 data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }"> 
</div>

Se você executar o aplicativo agora, deve ver esta tela:

JJ916682.B3808C132654B6E824FDB399ED5DC2D2(pt-br,MSDN.10).png

Está melhor, mas ainda não terminamos. Para irmos mais adiante na revisão do design, precisamos da ajuda de nosso amigo Blend.

Então, voltemos ao Blend. Peço que você recarregue todas as modificações que fez dentro do Visual Studio. Quando terminar, você terá isto:

JJ916682.FD986C12BFCBC45B09403606A032ADF3(pt-br,MSDN.10).png

Não está surpreso? Deveria estar! De fato, vemos aqui o mesmo resultado visual que terá quando pressiona F5 no Visual Studio. Isso significa que o Blend 5 está executando dinamicamente a parte JavaScript de seu aplicativo diretamente dentro do designer! Esse é um recurso impressionante.

Graças a ele, você poderá trabalhar diretamente com dados reais sem se ver forçado a colocar em prática o que chamamos de “simulação”. Essa é a parte legal do JavaScript. O Blend pôde executar o código JS que lança a solicitação XHR e cria os objetos WinJS.

Em “default.css”, vamos incluir duas novas regras de CSS. Clique no botão “+” na consulta de mídia principal:

JJ916682.60B695AB9D670680C22689BFC0A27209(pt-br,MSDN.10).png

E inclua esses novos seletores:

.listItemTemplate e .listItemTemplate img

Selecione a regra #articlelist .win-item que destacará cada elemento do controle ListView com a ID “articlelist”.

Altere o tamanho desses elementos de 150 px por 150 px para 250 px por 250 px. Você precisa apenas pular para a parte “Sizing” do painel direito.

O layout deve ser atualizado dinamicamente. Caso não aconteça, você pode forçar uma atualização da superfície de design clicando no botão dedicado:

JJ916682.B77450F3FB1E776010D4859B4B06510D(pt-br,MSDN.10).png

E aqui está o resultado que você deve ter:

JJ916682.84504B07E5710EC8D0AC769927C727D2(pt-br,MSDN.10).png

Agora vamos redimensionar as imagens do modelo. Para isso, use o ponteiro “Selection” e clique em uma das imagens:

JJ916682.745300991515B11344F7C0C988CA5815(pt-br,MSDN.10).png

Você pode ver as regras de CSS atuais aplicadas na seção“Applied Rules”. Clique em “.listItemTemplate img” e redimensione com o mouse a imagem que acabou de selecionar. Todas as outras imagens correspondendo ao mesmo seletor refletirão dinamicamente as alterações em tempo real.

Em vez de procurar o tamanho apropriado, vou ajudar você. Vá para a seção “Sizing” e defina o tamanho a seguir: 234px width e 165px height.

Para melhorar um pouco mais o seu design, precisamos de um pouco mais de espaço entre cada elemento e alinhar o controle ListView com o título.

Clique no seletor “.listItemTemplate”, navegue até a seção “Layout” e clique no ícone “Lock” à direita da área “Margin”. Selecione qualquer margem e digite 8px.

Por fim, para alinhar a grade do controle ListView com o título, precisamo movê-lo cerca de 120 px – 8 px para a esquerda do elemento margem que acabamos de definir.

Adicione um novo seletor pressionando o botão “+” de o nomeie “.win-surface”. Fixe uma margen esquerda de 112px.

Volte ao Visual Studio, aceite as alterações feitas e pressione F5. Agora você deve ter este tipo de layout:

JJ916682.89603B56BE83E48CDB10E34B3C58B3A9(pt-br,MSDN.10).png

Etapa 6: código-fonte para download

Fizemos progresso até aqui. Agora precisamos exibir detalhes de cada artigo, para continuarmos descobrindo o poder do Blend e também alguns recursos novos e interessantes de CSS3. Você pode baixar a solução associada a este primeiro artigo aqui: Leitor Channel9 simples - Artigo1

Mostrar:
© 2014 Microsoft