Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

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

David Rousset

Technical Evangelist

Agora vamos ver como exibir os detalhes de cada artigo. Usaremos uma animação de transição para isso, reproduziremos com o simulador e continuaremos a descobrir o Blend para usar multicolunas CSS3, por exemplo.

JJ933416.0E3B6BEB0C9B1A4978FEC062CB002FDF(pt-br,MSDN.10).png

Como no artigo anterior, você encontrará o código-fonte para baixar no final do artigo.

Este artigo é a segunda parte desse: Aplicativo HTML5 WinRT Windows 8: Como criar um pequeno leitor RSS em 30 minutos (parte 2/1)

Neste artigo, veremos:

Etapa 1: utilização do simulador

JJ933416.note(pt-br,MSDN.10).gifNote:
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, houve impacto 0 entre o RP e o RTM aqui.

Etapa 1: utilização do simulador

É importante sabe como seu aplicativo se comporta com dispositivos de toque e com as várias resoluções de futuros tablets e computadores Windows 8.

Estamos fornecendo uma ferramenta interessante que pode ajudá-lo a fazer seus primeiros testes: o simulador.

Por exemplo, se estiver abrindo o projeto como ele estava no final do último artigo, podemos simular algumas interações de toque lançando o simulador através deste botão:

JJ933416.49693B5B630F4E47A0DDF9640F361754(pt-br,MSDN.10).png

O simulador será lançado. Ele mais ou menos simula uma sessão de RDP para você. Aqui está o resultado que você deve ter:

JJ933416.DF1AA63BFD642AAD40E76A1586FAB09E(pt-br,MSDN.10).png

Agora você pode clicar neste ícone:

JJ933416.F2CC2C9613E14B2B9F0E816028A23FCA(pt-br,MSDN.10).png

Ele simulará toque. Tente deslizar o dedo virtual na tela virtual. Você verá que alguns efeitos de inércia e vibração já foram implementados. Da mesma forma, se tocar um elemento e o deslizar para baixo, você o selecionará. É a mesma ação que dar um clique com o botão direito do mouse. Você vê aqui os benefícios de usar controles WinJS nativos que implementam todo esse tipo de lógica para você.

Outro botão útil é o que lida com as várias resoluções.

JJ933416.A0ED3C0A9B3834BE98D2ABD9C7B6CEBF(pt-br,MSDN.10).png

Experimente, por exemplo, simular um monitor de 23" com uma resolução de 1920x1080. Você deve ter este tipo de layout:

JJ933416.138CF11223664E0C244DF4A424649F23(pt-br,MSDN.10).png

Pode ter notado que estamos alternando de 2 linhas de elementos para 3 em 1080p e de 5 colunas visíveis para 7. O controle ListView também lida com os vários fatores forma para você.

Assim, mesmo que o WinJS não seja obrigatório em projetos Windows Store HTML5, não subestime todos os benefícios que ele pode oferecer gratuitamente!

Etapa 2: exibição dos detalhes do artigo

Para exibir o conteúdo do artigo, precisamos de outro trecho de HTML. Navegue até a página “default.html” e insira:

<div id="articlecontent"></div>

Inseriremos o conteúdo do artigo por código. Abra “default.js”. Logo acima da instanciação Binding.List, insira este código:

var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);

Estamos visando nosso elemento “articlelist” do DOM que agora deve ser um controle ListView WinJS graças à execução da função processAll. Ele agora expõe um evento chamado “iteminvoked”. Ele é acionado quando você clica/toca em um dos elementos da lista. Além disso, estamos definindo o evento "click" para poder simplesmente voltar para a página de boas-vindas.

Agora precisamos criar os manipuladores de evento associados. Aqui estão:

function backButtonClick(e) {
    articlecontent.style.display = "none";
    articlelist.style.display = "";
}

function itemInvoked(e) {
    var currentArticle = articlesList.getAt(e.detail.itemIndex);
    WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
    articlelist.style.display = "none";
    articlecontent.style.display = "";
}

O conceito é realmente simples. Quando o usuário clicar em um dos elementos, ele recuperará no conjunto o objeto apropriado com seu índice (e.detail.itemIndex). Estamos injetando o conteúdo HTML na propriedade innerHTML do nó divisor recém-inserido na página principal através da função setInnerHTMLUnsage(). Mas por que precisamos usar essa função especial para isso?

Algumas observações rápidas sobre o contexto de segurança de aplicativos WinRT

O contexto de segurança de um aplicativo HTML5 Windows Store é diferente de uma página clássica da Web. Em nosso caso, tentar acessar diretamente a propriedade innerHTML é protegido/examinado.

Por exemplo, se você tentar inserir algum HTML baixado do espaço « Web pública », uma exceção de segurança será acionada por padrão para protegê-lo. Tenho certeza de que você não quer que uma injeção de script assuma o controle de seu aplicativo. Assim, por padrão, estamos evitando isso.

Mas, se você souber realmente o que está fazendo, tem a escolha de "contornar" essa verificação automática invocando a função setInnerHTMLUnsafe().

Também ligado ao contexto de segurança, inserir um <iframe> em seu aplicativo é ligeiramente diferente, por exemplo. Se estiver interessados nos detalhes, aqui estão alguns artigos para ler:

Ok, voltemos ao tópico principal.

A maneira como vamos exibir o contexto do artigo é simples. Vamos ocultar a lista de nossos elementos alternando sua “exibição” para “nenhuma” e vamos exibir o divisor “articlecontent”. Quando pressionamos o botão “Voltar”, estamos fazendo exatamente o contrário.

Ok, pressione F5 e deve ter algo assim depois de clicar um dos itens:

JJ933416.900D023F3F6D4EA502B632D1CA950BC0(pt-br,MSDN.10).png

Você notará que o layout está longe de ser bonito, mas vamos trabalhar nisso em alguns momentos com o Blend.

Enquanto isso, eu gostaria de enfocar algo realmente irritante na versão atual. A navegação dentro para dentro de um artigo e de volta para a tela de boas-vindas funciona bem. Mas a experiência de usuário não é ideal. O detalhe do artigo chega sem nenhuma transição.

Chegamos então a um ponto importante da nova interface de usuário Windows 8: a experiência “Fast & Fluid”. Você precisa sugerir desempenho a seu usuário e dizer a ele que seu aplicativo está realmente vivo. Para isso, simplesmente adicionar pequenas animações de transição pode mudar a percepção. Tecnicamente, você pode implementá-las de 2 maneiras.

Você pode implementá-las usando transições/animações CSS3 puras para exibir o conteúdo em que está interessado. Depois depende de você encontrar as animações apropriadas. Se quiser descobrir como esses novos recursos CSS3 funcionam, David Catuhe e eu escrevemos alguns artigos introdutórios aqui:

  1. Introdução a transições de CSS3
  2. Introdução a animações de CSS3

Ou você pode usar a biblioteca WinJS, que expõe animações pré-criadas para ajudar a seguir as diretrizes da nova interface de usuário Windows 8. Ali, você encontrará a utilização de transformações e transições de CSS. Mas, para nós desenvolvedores, temos uma linha simples de JavaScript para invocar.

Por exemplo, no manipulador itemInvoked(), insira esta linha de código no final da função:

WinJS.UI.Animation.enterPage(articlecontent);

E insira esta outra no final do segundo manipulador de eventos:

WinJS.UI.Animation.enterPage(articlelist);

Pressionando F5, você agora deve ter algumas transições sutis enquanto navega dentro do aplicativo. Pode confiar: elas farão diferença na experiência do usuário!

Etapa 3: finalização do design do modo de exibição de detalhes com o Blend

Alterne de volta para o Blend. Peço que você recarregue outra vez todas as alterações que fez dentro do Visual Studio.

Pergunta do dia: como você poderá projetar o modo de exibição de detalhes quando precisamos simular uma ação de navegação através da seleção de um item?

Bem, você já tem a resposta no artigo anterior. O Blend 5 está ativo e executando seu aplicativo HTML5. Mas talvez falte um detalhe adicional. Você pode alternar para um modo "interativo" clicando neste botão:

JJ933416.090A17296E761D1BF6E9153C2EE8C586(pt-br,MSDN.10).png

Ele deve ter o nome “Turn on Interactive Mode”. Uma vez feito isso, você deve poder interagir com seu aplicativo, navegar para o conteúdo do artigo que quer analisar e alternar de volta para a superfície de design clicando no mesmo botão. No meu caso, decidi usar este artigo como base:

JJ933416.3085A4A4125CC6BF2657295140A56E0A(pt-br,MSDN.10).png

Na seção de estilo, na Media Query apropriada, adicione uma nova regra visando “#articlecontent” e selecione-a imediatamente.

Na seção “Sizing“, fixe width & height em 100%.

Na parte “Layout”, coloque um padding esquerdo de 120px para alinhar o conteúdo com o título.

Isso revela um novo problema. O layout de nosso divisor “articlecontent” não se ajusta mais na largura da tela.

Para corrigir isso, modifique a propriedade “width” e clique para selecionar uma “custom expression”:

JJ933416.A6F4B16EBFD8D61DC2F31DF1A3935392(pt-br,MSDN.10).png

Usaremos o operador CSS Calc(). Digite a seguinte expressão “calc(100%-120px)”.

Estamos seguindo melhor as diretrizes da nova interface de usuário Windows 8 dessa forma. Temos uma tarefa decisiva para fazê-lo de uma forma ainda melhor: permitir que o usuário deslize o conteúdo horizontalmente e o torne mais legível.

Comecemos com a legibilidade. Esse é um recurso CSS3 muito útil para isso e fácil de colocar em prática: Multicolunas CSS3.

Vá para a seção “Multicolumn” do painel “CSS Properties”. Modifique o layout para criar 480px columns width com gaps of 80px entre elas.

JJ933416.785FD6937A0F2E8FEFC3A7005595086C(pt-br,MSDN.10).png

Está começando a ficar bonito, não é?

Para concluir, precisamos implementar o deslizamento horizontal. Vá até a caixa de texto “Search Properties” e digite “over”. O Blend filtrará todas as propriedades contendo a palavra-chave "over".

Defina a propriedade “overflow-x” como “auto” e “overflow-y” como “hidden”.

Você pode alternar de volta para o Visual Studio, aceitar as alterações e pressionar F5 para exibir o resultado final.

Nível bônus adicional especial para guerreiros

Bem, como sinto que você ainda quer brincar com o Blend, vamos acrescentar outro recurso. Qual é a coisa mais importante para nós quando lemos um artigo técnico? O código-fonte, é claro!

Sabendo disso, não hesite em colocar alguma ênfase no código de uma forma ou de outra para atrair a atenção dos desenvolvedores.

No caso do Channel9, eles tiveram a excelente idéia de inserir partes do código em marcas <pre>. Isso simplifica nossa vida para estilizar essa parte.

Adicione uma nova regra de CSS “#articlecontent pre”.

Alterne para o modo interativo e navegue até um artigo em que partes do código-fonte estejam suficientemente visíveis.

Selecione a última regra que acrescentou e entre na seção “Background” das propriedades CSSS. Clique para definir uma cor:

JJ933416.7D2D943787AD08F5A302D86B7A85933B(pt-br,MSDN.10).png

Você poderá usar esse maravilhoso editor de cores para fazer sua escolha:

JJ933416.10BCE60D65DA1D7CEC3BD998B03DB597(pt-br,MSDN.10).png

Mas, se você for um desenvolvedor fraco como eu, provavelmente terá uma tendência natura; de escolher a pior de todas as cores. Assim, clique no ícone da cor escolhida e selecione o cinza do Blend mais próximo. Obviamente é um bom cinza.

Para concluir definitivamente, no <pre>, defina a propriedade “overflow-x” como "auto" e “overflow-y” como “hidden”.

Pressionar F5 oferecerá este tipo de experiência:

JJ933416.EFBEDE561FF9A0B7FD297F3AF5DB9394(pt-br,MSDN.10).png

Etapa 4: codigo-fonte para download e conclusão

Bem, espero que agora você esteja convencido de que eu não estava mentindo. Se você se concentrou o suficiente, deve ter gasto 30 minutos para criar esse pequeno aplicativo.

Aqui está o código-fonte para download: Leitor Channel9 simples - Artigo2

A Microsoft está realizando uma pesquisa online para saber sua opinião sobre o site do MSDN. Se você optar por participar, a pesquisa online lhe será apresentada quando você sair do site do MSDN.

Deseja participar?
Mostrar:
© 2014 Microsoft