Tags:

Template HTML – Utilizando Json e jQuery

JSON

JSON é uma estrutura de dados utilizada para troca de informações entre sistemas. Comparado a estrutura no formato XML, JSON possui uma forma mais simples de entender e de usar.

As vantagens que proporciona são: velocidade maior na execução e transmissão de dados, o arquivo que ele gera é menor comparado a outras estruturas, o mecanismo de parse e leitura é mais simples e suporta objetos. Sua estrutura é baseada em chave/valor.

jQuery

jQuery é uma biblioteca de javascripts que são utilizados para interagir com páginas HTML, onde podemos atribuir eventos e ações a componentes entre outras funcionalidades, reduzindo o tempo de desenvolvimento e facilitando a manutenção da página.

Template

Template é um modelo que é usado para construir um layout.

Podemos fazer uma analogia quando usamos um template de iReport para construir um relatório. No nosso caso podemos construir um template em HTML que será preenchido pelo jQuery com informações passadas por json.

Para melhor entendimento, vamos imaginar o seguinte cenário: é preciso preencher uma tabela com as informações de alguns funcionários. Ao invés de criarmos uma linha para cada registro de forma estática, vamos fazer com que a página leia um arquivo json com os dados que queremos na tabela e crie as linhas dessa tabela baseando-se em um template. Para isso é necessário apenas 4 passos:

  1. Criar um arquivo json conforme a imagem abaixo:

2.            Criar um arquivo HTML onde primeiro importamos as bibliotecas do jQuery que permitem criar e manipular templates.

3.          O próximo passo é criar o template que será usado; no nosso caso, um template para gerar linhas em uma tabela.

4.   Depois crie uma função que será chamada no momento em que a página é carregada (ela pode ser chamada de diversas maneiras, como por exemplo, no clique de um botão), que irá ler o arquivo json e preencher o template.

Basicamente o que a figura acima nos mostra é que primeiro é lido o arquivo dados.json, onde suas informações são armazenadas na variável data.

A próxima linha é utilizada para dar um nome para o template com id templateStructure; no exemplo o nome atribuído é myTemplate.

Depois disso é chamada uma função do jQuery que recebe o nome do template e uma lista de funcionários (é neste momento que passamos quais são os dados que queremos usar para preencher o template).

A função do jQuery appendTo é usada para informar onde deverá ser inserido o template preenchido. No nosso exemplo cada linha do template preencherá uma tabela com id templateTable, conforme a imagem abaixo:

Pronto! Com poucas linhas criamos um template e preenchemos uma tabela com dados obtidos por json.

Utilizando estas ferramentas podemos definir vários templates para uma página, basta criar cada um com um id diferente. Esta é uma maneira rápida e fácil de trabalhar com manipulação e exibição de dados.

Referências

http://www.codeproject.com/Articles/159026/jQuery-Templates

http://www.tidbits.com.br/o-que-e-json-como-e-quando-utilizar

http://jquery.com/

http://www.infoq.com/br/news/2010/10/jQuery-Template

Por MONISE COSTA

Formada em Sistemas de Informação pela PUC Campinas, MATERANA desde 2011. Apaixonada pela área de TI, Analista de Requisitos na maior parte do tempo e desenvolvedora Java/Android por lazer.

Postado em: 04 de junho de 2013

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário