Polymer: Criando um novo componente de lista – Parte 2

Agora que já expliquei como fazer um novo componente, vou otimizá-lo e adicionar um visual mais agradável..

Alterações ao componente the listcard-person

Alterei o componente listcard-person tornando-o mais eficiente. Primeiramente, removi a utilização do componente core-list e agora estou utilizando a própria tag template utilizando o atributo repeat.

Anteriormente

Nova versão

Usando a funcionalidade de repeat do <template> foi possivel reduzir a complexidade, haja vista que o componente core-list é muito robusto para a simplicidade que o exemplo apresenta. Repeat é utilizado para fazer o bind de uma coleção ao conteúdo do template. Neste exemplo, irei trabalhar com a coleção personData e cada elemento desta coleção será atribuido à variável “person” para cada item da coleção.

Dentro do template utilizamos a variável “person” a fim de acessar os dados de cada elemento (i.e. person.name, person.address and person.profession).

Algumas mudanças foram realizadas no estilo do componente e estão disponíveis no download abaixo.

Alterações em Index.html

O arquivo index.html foi alterado a fim de melhorar o visual, removendo alguns componentes e adicionando outros.

Agora os componentes em uso são:

Utilizei um css especialmente preparado para ser utilizado com o Polymer. Este css pode ser baixado de PolymerTemplates onde voce encontrará diversos outros templates css gratuitos. Utilizei o template The Times neste exemplo.

O conteudo completo de index.html foi alterado, entretanto a seção do script continua a mesma do componente mostrado na parte 1 deste artigo.

Você pode verificar o resultado na imagem abaixo. Você perceberá que optei por apresentar uma aparência similar ao material design.

ImgSample1

 

Voce pode fazer o download dos arquivos deste projeto no link a seguir. O download não inclui os componentes nativos do Polymer que devem ser baixados/instalados utilizando o bower (como mostrado no artigo Polymer: Basic installation).

Faça o download RAR file ou ZIP file.

Na próxima parte deste artigo irei mostrar como inserir dados na lista utilizando os componentes do Polymer.

oleonardomachado

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

Deixe uma resposta