Polymer: Criando um novo componente de lista

Trecho extraído do website do Google Polymer:

Polymer é uma biblioteca pioneira que torna mais fácil e simples do que nunca a construção de aplicações bonitas na web. Polymer foi construído com base em um conjunto de novas primitivas para plataforma web conhecidas como Web Components. Web Components permitem um nível de interoperabilidade e composição para a nova plataforma web. O resultado é um aumento considerável na produtividade do desenvolvedor.

O conceito principal no Polymer é dar ao desenvolvedor a oportunidade de criar novas aplicações baseadas em componentes web. Desta forma, após o desenvolvimento de componentes, diversas aplicações podem ser desenvolvidas utilizando-se estes pequenos pedaços de funcionalidade que possuem, além do layout, código próprio. Você pode utilizar os mesmos componentes inúmeras vezes na mesma página, aplicativo ou até em aplicativos diferentes.

Polymer ainda está em desenvolvimento, porém está em uma versão bem estável, sendo que diversos pequenos já estão utilizando a biblioteca. Este pequeno tutorial utilizou a versão 0.5.1 do Polymer.

Neste artigo irei mostrar como construir um componente bem simples, que irá receber um object (ou uma string JSON) com dados de algumas pessoas e irá renderizar a lista destas pessoas.

Importante !
Se voce ainda não conhece o Polymer, sugiro que leia este artigo primeiro Polymer: Instalação Básica. Assim você poderá instalar todas as ferramentas necessárias para utilizar o Polymer.

Existe muita informação sobre o Polymer em Polymer website

Seu trabalho com o Polymer ficará muito mais simples caso opte por instalar as ferramentas sugeridas.

Na primeira parte deste tutorial irei construir um novo componente que irá mostrar uma lista de pessoas. Depois, em um segundo artigo, irei fazer algumas alterações para melhorar a aparência e utilizar outros componentes já disponibilizados pela própria biblioteca.

Construindo o novo componente (Element)

Para este argito irei criar um novo componente a fim de mostrar informações sobre algumas pessoas (nome, endereço e profissão). Sendo assim, crie primeiro um arquivo chamado  listcard-person.html com o template básico para o novo componente.

Como voce pode ver dei ao componente o nome de listcard-person na tag html e também no script de criação.

Crie também um arquivo index.html que irá utilizar o listcard-person.html. A pagina html básica, sem informações sobre o Polymer:

Adicione os links que serão necessários. O link para webcomponents.js, é a parte principal do Polymer.

Iremos utilizar outro componente da biblioteca do Polymer chamada core-list, porque nosso componente precisa dele para fazer a renderização da lista. Então primeiro precisamos instalar as dependências primeiro, e faremos isso utilizando o Bower (verifique Polymer: Instalação Básica para mais informações sobre o Bower).

Finalmente adicione o link para o novo componente

<link rel="import" href="listcard-person.html">

Adicione o componente ao corpo do ndex.html, e dê a ele um id

<listcard-person id="personlist" />

Neste momento o index.html se aparenta com isso:

Retornando ao nosso listcard-person.html, dentro da tag <template> iremos adicionar o layout para nosso componente. Você pode usar qualquer tag html que desejar. Como iremos mostrar uma lista com informações de diversas pessoas, precisamos utilizar um componente chamado <core-list>. Este componente da própria biblioteca é o ponto de partida para desenvolver a carga dos dados a partir da nossa fonte de dados. Nosso plano é passar um string JSON ou um objeto para nosso componente com a informações de diversas pessoas e repassar ao componente  <core-list> para que ele varra cada item e renderize a informação.

No elemento <core-list> você pode verificar que adicionei um atributo chamado data com o valor de {{personData}}. Este personData é a nossa fonte de dados. Iremos popular através do javascript uma variável chamada personData com os dados das pessoas que iremos listar.
Dentro da tag template de <core-list> nós iremos fazer o layout a ser utilizado na renderização dos dados de cada pessoa, e fazer o bind dos dados da variável para o html. Dentro de core-list nós temos acesso à variável datasource através de uma outra variável chamada model que aponta para cada elemento do nosso datasource. Este nosso datasource tem esse formato:

Sendo assim usamos model.name para recuperar o nome, model.address para recuperar o endereço e assim por diante.

Agora devemos receber os dados e fazer a associação do bind. Irei mostrar duas formas que faremos isso.

Populando a lista utilizando atributos

Para passar dados para um componente podemos utilizar a passagem  de dados  através de tags html para valores estáticos. Altere index.html

<listcard-person id="personlist"/>
para

Como você pode ver, utilizei um novo atributo chamado initialData para passar um string JSON para o novo componente e em listcard-person.html precisamos agora receber o valor.

Altere a primeira linha onde definimos o elemento de

<polymer-element name="listcard-person" layout vertical>

para

<polymer-element name="listcard-person" layout vertical attributes="initialData">

Isto informa ao componente que esperamos receber um atributo chamado initialData

Agora a alteração do script. Quando o componente estiver pronto (quando tudo já tiver sido carregado), iremos verificar se quem chamou o componente passou alguma informação no atributo initialData. Caso possua algum valor, iremos converter de JSON para um objeto e utilizar ele para fazer o bind das informações através de personData (nosso datasource no atributo “data” do  <core-list>).

Agora você já pode salvar todas as alterações e recarregar a página para ver a funcionalidade. Você irá ver uma lista bem simples com todos os valores.

Populando a lista utilizando javascript

A segunda forma que iremos implementar para popular o componente é através de uma chamada javascript.

Em listcard-person.html, adicione uma função javascript chamada loadData que irá receber um objeto e associá-lo ao datasource de <core-list>.

Faça outra alteração em index.html para chamar nossa nova função a fim de popular o datasource.

Altere a definição de nosso componente em index.html novamente de

para

<listcard-person id="personlist"/>

Adicione o script abaixo ao arquivo index.html. O que fiz foi adicionar um listener ao evento “polymer-ready“, que irá ser chamado quanto o Polymer estiver pronto para iniciar (todas as dependências já foram baixadas).
Neste momento, iremos localizar nosso componente (demos a ele o nome de personlist), criaremos um novo objeto com os valores que desejamos popular o componente e chamaremos a função loadData que implementamos no componente.

Quando você carregar a pagina agora os dados serão mostrados através desta chamada a loadData().

No próximo artigo ire mostrar como fazer um layout mais agradável e bem trabalhado com outras funcionalidades da biblioteca do Polymer.

oleonardomachado

Software architect with expertise in Microsoft technologies (C#, WCF, Azure etc) and now developing for mobile

Deixe uma resposta