Olá leitores iMasters! Antes de tudo, gostaria de agradecer pela ótima recepção que o meu primeiro artigo teve. Realmente foi uma surpresa Agradeço também aos moderadores do Fórum iMasters, com um ótimo trabalho, em especial o Adriano Alves, Lex e Bruno Dulcetti.

Nesse segundo artigo vou tentar explicar passo a passo a criação de um componente conhecido por todos, mas geralmente incompreendido quando se trata de desenvolvê-lo do começo ao fim, que é o Treeview.

Existem diversos modelos prontos na internet, mas geralmente são extremamente difíceis na hora de dar manutenção, sem contar que eu particularmente prefiro sempre desenvolver uma versão própria desse tipo de componente, mesmo que mais simplificada, do que utilizar códigos prontos. Nem sempre o tempo nos permite, mas a satisfação é com certeza muito maior.

Além disso, vamos complementar o Treeview com a possibilidade de carregar os seus nós via Ajax. Não é o intuito do artigo ensinar todos os detalhes do Ajax, apenas vou fazer uma introdução sobre o tema que, com certeza, merece artigos mais detalhados. Depois vamos partir direto para a sua utilização. Se um dos problemas em Treeviews grandes era a demora no seu carregamento, o Ajax chega como uma possível solução: os nós são carregados apenas quando o usuário clica sobre o seu respectivo nível superior. Mas é claro, não vamos engessar o nosso componente, ele funcionará tanto com ou sem o Ajax, cabe a você escolher se deseja utilizá-lo.

Antes de começar com os detalhes técnicos, vou tentar abstrair a maneira como eu criei esse treeview. Essa é apenas a minha visão sobre o mesmo, está longe de ser perfeita, mas como nunca tive paciência de estudar as milhares de linhas dos exemplos prontos (que são escritos da maneira mais complexa possível) acabei criando o meu próprio jeito.

Segue uma imagem de como ficará o nosso componente pronto:

Para ver o exemplo online clique aqui:

Link para http://200.201.133.6/cinei2br/artigos/2/

Olhando a imagem acima, é fácil identificar duas das principais características do Treeview:

- Os nós filhos têm uma margem na esquerda em relação ao seu respectivo nível superior. Isso denota a hierarquia deles, dá uma visão clara de quem está subordinado.

- O sinal de “+/-“ exerce a função de mostrar ou ocultar todos os filhos do nó que foi clicado. É o ponto fundamental da navegação em um treeview, o usuário navega pela árvore da maneira que desejar, abrindo e fechando os nós.

A maneira de se alcançar isso é realmente muito simples. Como vamos montar todo o nosso exemplo com tableless, ou seja, sem nenhuma tabela no HTML, é o CSS que vai fazer esses dois trabalhos para nós.

Cada nó terá no mínimo dois elementos no HTML, que é um div e um âncora (tag a). No âncora estará o texto do nó, clicável a apontando para uma url qualquer. O div serve apenas como container, e precisamos dele principalmente se esse nó tiver outros nós subordinados a ele.

Se um nó tem filhos, então um div será criado dentro do div de seu respectivo pai, e assim por diante. A estrutura será essa, nada mais do que divs dentro de um outro div. Para alcançar o primeiro objetivo, que é os filhos estarem deslocados para a direita demonstrando a hierarquia, criamos apenas isso:

Ou seja, teremos um div que vai conter todo o treeview, que batizei como “menuPrincipal”. O que esse CSS faz é declarar que todos os divs que estiverem dentro do “menuPrincipal” tenham uma margem na esquerda de 20 pixels.

Como a margem é sempre calculada em relação ao seu pai na estrutura do HTML, a hierarquia está criada.

Se um div estiver dentro de outro div, que está dentro do “menuPrincipal”, a sua margem será de 40 pixels. Isso porque sua margem é de 20 pixels, e a do seu pai também é de 20 pixels, e como a sua margem é sempre calculada em relação ao seu pai, o nó fica da maneira como queremos.

A estrutura do HTML gerado vai ser essa:

Todo esse código não existe explicitamente escrito. Vamos gerar todo ele por javascript. Uma das maiores dificuldades que encontrei quando comecei a trabalhar com a criação de elementos HTML via javascript foi que não conseguia ver se o código gerado estava certo, tudo que foi criado não aparece no código fonte, é o browser que interpreta e o exibe na página.

Uma solução, que é a que eu uso, é uma Extensão do Firefox que se chama View Rendered Source Chart. Com ela instalada, basta clicar com o botão direito na página, clicar em "View Rendered Source Chart" que uma janela é aberta mostrando da maneira que está essa imagem acima, não apenas o código HTML que você escreveu, mas também tudo que foi renderizado pelo browser, como o código que o nosso javascript gerou. É muito bom, e o Firefox dispensa apresentações, é um browser excelente.

Download do Firefox
http://www.getfirefox.com

Extensões disponíveis para o Firefox
https://addons.mozilla.org/extensions/

Download do View Rendered Source Chart (atualmente está na versão 1.2.03)
https://addons.mozilla.org/extensions/moreinfo.php?...numpg=10&id=655

A segunda funcionalidade levantada, que é a de poder ocultar ou mostrar os filhos de um nó, vai ser alcançada dessa maneira:

O que eu fiz foi criar uma classe CSS chamada "nodeFechado". Vou explicar com detalhes logo abaixo como ficaram as classes, mas essa parte em particular é a que faz todo o serviço. Se um nó está com seus filhos visíveis, ela estará com a classe "nodeAberto". Se está fechado, estará com a classe "nodeFechado".

O que esse seletor faz é, pra todos os divs que estão subordinados ao elemento que tem a classe CSS "nodeFechado", fiquem invisíveis. É isso que o "display:none" faz, oculta um elemento. Então, só de atribuir para o div que foi clicado essa classe, automaticamente todos os seus filhos desaparecem, não perdendo o seu estado original, ou seja, se um filho também estava expandido, ele permanecerá da mesma maneira se o usuário "reabrir" esse nó, isso porque os seus filhos continuam com a mesma classe CSS, não modificamos nada neles. Esse CSS em especial, fez todo o trabalho sem nenhuma linha de javascript. Simples, não é? Vamos ver depois como será feita essa troca das classes.

Agora estamos prontos para começar a entender o código, vamos por partes estudando o HTML, depois o CSS e o javascript por partes, primeiro a parte do funcionamento, depois a implementação do Ajax e por ai em diante. Na parte do Ajax, optei por trabalhar com o Asp para fazer a integração com o servidor, mas ficou tão simples que mesmo alguém que não conheça essa linguagem não vai ter dificuldade em compreender.

HTML

O HTML fixo é praticamente esse, muito simples. Ocultei a parte do DOCTYPE, Head e afins, mas o exemplo para download está completo, vou comentar apenas o que é relevante.

Dentro do corpo da página temos dois divs, um com a mensagem de "Aguarde o Carregamento" para que o usuário espere enquanto os nós estáticos são criados e um div com id "menuPrincipal", que vai servir como container para todo o nosso treeview. Ao carregar a página, o "menuPrincipal" estará invisível e só vai ser mostrado ao término do carregamento.

CSS

Vamos ver com detalhes essa primeira parte do CSS:

- Linha 1 a 4: Tiramos a margem e padding de todas as tags;

- Linha 5 a 7: Tiramos a borda que as imagens apresentam por default;

- Linha 8 a 12: Tipo de fonte, tamanho e cor de fundo para a página;

- Linha 13 a 18: Formatação para a mensagem de carregando, apenas fonte e espaçamento, nada de novo;

- Linha 19 a 22: Formatação para o div "menuPrincipal", container do treeview. O display:none faz com que ele fique oculto, vamos mostrá-lo via javascript, mas no carregamento da página ele não vai estar visível. O padding cria um espaçamento interno dentro do div;

- Linha 23 a 28: Formatação para todos os links que estiverem dentro do "menuPrincipal";

- Linha 29 a 33: Efeito de hover para os links que estiverem dentro de um div que não tenha filhos. A classe "node" é explicada logo abaixo;

- Linha 34 a 37: Esse é o seletor que estudamos antes, que cria as margens para os divs do treeview. Além disso, o “clear:left” impede que os itens fiquem desalinhados em relação ao seu posicionamento normal. Como vamos usar o "float:left" nos sinais de "+/-" para que eles flutuem em relação ao texto do nó, o clear impede que ele flutue sobre o div que está abaixo. O Firefox e o Opera funcionam perfeitamente sem o clear, nunca que o sinal de "+/-" vai sobrepor um div abaixo, mas como o Internet Explorer estava ficando desalinhado, tive que colocar esse atributo;

- Linha 37 a 42: Formatação para as classes que vamos associar aos divs. Como elas têm algumas características em comum, criei esse bloco em uma tacada só.

As classes vão ser utilizadas na seguinte maneira:

- “node” quando um nó não tiver nenhum filho;
- “nodeAberto” para um nó que tem filhos e que estão expandidos;
- “nodeFechado” para um nó que tem filhos mas que estão ocultos.;

A formatação novamente não tem nada de novo para quem conhece um pouco de CSS, exibimos o div como um bloco pelo "display:block" e criamos um espaçamento interno para que os nós não fiquem colados uns aos outros.

Vamos para a segunda parte do CSS:

Linha 43 a 45: Declaramos aqui que a classe "node" têm um espaçamento interno na lateral esquerda de 18 pixels. Com isso, fazemos com que os nós que não tem filhos fiquem no mesmo alinhamento com os que têm filhos. Como os nós que tem filhos terão o link para expandir/contrair os seus filhos, eles não precisam desse espaçamento.

Linha 46 a 48: Já discutimos isso anteriormente, é o que faz os nós filhos desaparecem quando um div recebe a classe "nodeFechado".

Linha 49 a 52: Deixa o link de um nó que tenha filhos em negrito, dando destaque aos mesmos.

Linha 53 a 56: Deixa o link dos nós que não tem filhos em letra normal. Como o seletor anterior atinge qualquer link que esteja subordinado a um nó com filhos, todos sem exceção ficariam em negrito. Com isso anulamos esse efeito cascata, apenas os diretamente abaixo do nó com filhos ficam em negrito, os divs com classe “node” aplicam esse efeito em seus links.

Linha 57 a 61: Classe que vai ser aplicada no item que for clicado. Serve apenas para dar destaque, coloquei um fundo em laranja e uma borda que facilita na visualização.

Linha 62 a 69: Classe que vai ser utilizada nos links de expandir/contrair os nós. Os links não terão texto nenhum, então toda a formatação fica no css. Colocamos float:left para que ele flutue para a esquerda em relação ao link do treeview. As margens fazem com que ele tenha um espaçamento entre os textos, dando um total de 18 pixels (2 da margem esquerda, 9 na largura e 7 na margem direita) quando somados a largura do link. É o equivalente dos 18 pixels de padding na esquerda que a classe “node” teve, com isso o alinhamento fica correto.

Linha 70 a 73: Para todos os links com a classe declarada acima e que estejam dentro de um div com classe “"nodeAberto", coloca a imagem do sinal de "-" no fundo. Com isso, não precisamos ficar trocando as imagens de "+" ou "-" no link, trocando a classe do div, a imagem do fundo do link é automaticamente trocada. Novamente, o CSS está fazendo muito do trabalho sozinho, é só criar uma boa estrutura nos seletores que já estará com metade do caminho andado.

Linha 74 a 77: Equivalente ao anterior, mas agora coloca a imagem com o sinal de "+" nos links que tenham a classe "“linkAbreFechaNode" e que estejam dentro de um div com a classe "nodeFechado".

Linha 78 a 85: Mensagem de carregando que será atribuída para um span quando os nós estiverem sendo carregados pelo Ajax. No seu background, coloquei a imagem de uma barra de progresso para ilustrar que algum processamento está sendo realizado. Não que ela demonstre em que estágio está o carregamento, é meramente ilustrativa.

Talvez você não tenha entendido todas as declarações feitas no CSS, mas com o desenrolar da parte do javascript vou comentar novamente quando for necessário.

Agora vamos para a codificação em javascript. Nesse exemplo, optei por trabalhar com a criação de uma classe para o treeview, vamos utilizar os recursos da orientação a objeto na criação do mesmo. Assim, fica muito mais fácil o reaproveitamento do componente em diversos projetos, as funcionalidades ficam encapsuladas na classe e podemos facilmente com alguns ajustes ter mais de um treeview na mesma página, por mais difícil que seja disso acontecer. Antes de começarmos com a classe, vou mostrar como vamos utilizá-la. É dessa maneira que vamos adicionar os nós no treeview, criamos uma instância e chamamos os seus métodos. Veja a imagem a seguir:

Linha 1 a 3: Criamos um temporizador para a execução do carregamento do menu. Ao término do carregamento da página, ele inicia a execução do código;

Linha 6: Criamos uma instância do treeview em "trv". É através dessa instância que vamos adicionar os nós. O único parâmetro que ele espera na criação de uma instância é o id do div que vai ser o container no treeview, no nosso caso, o “"menuPrincipal", que já está criado no HTML.

Linha 8 a 9: Exemplo de como se adiciona um nó no treeview. O método que foi criado foi o "add", que é quem vai executar o trabalho. Ele espera quatro parâmetros:

- O texto que vai ser exibido no nó. É o que o usuário vai visualizar, nesse primeiro exemplo passamos o texto "Autores de Quadrinhos", você pode passar o texto que desejar;

- Qual link esse nó vai apontar. Nesse exemplo, passei "javascript:void(null);" porque não quero que o nó aponte para nenhum lugar ao ser clicado, mas em uma aplicação o link seria passado;

- Qual é o target desse link. É aqui que você especifica se ele deve abrir na mesma janela (_self), em uma janela em branco (_blank) e assim por diante;

- Esse é o último parâmetro é o mais importante, que é qual vai ser o pai desse nó. É dessa maneira que criamos a hierarquia, precisamos passar para a nossa classe em que posição ele deve ser criado. Nesse exemplo, passei “null” como parâmetro, então a classe entende que recebendo "null", crie o nó na raiz no treeview. Se o id de algum nó fosse passado, ele seria criado logo abaixo do seu pai.

Agora fica a pergunta, como descobrimos qual o id de um nó que já adicionamos? É pensando nisso que o nosso método “"add" retorna qual o id que foi gerado. Isso está encapsulado, não precisamos ter esse controle de ids únicos, mas na hora de criar hierarquia, precisamos saber como passar quem é o pai. Repare na linha número 8, existe uma atribuição na chamada do método.

a = trv.add(“texto”, “link”, “target”, null);

Então dessa maneira, criamos um nó qualquer e atribuímos em "a" qual foi o id gerado no método. Daí, se quiséssemos criar um nó que fosse filho desse que acabamos de criar, passaríamos como parâmetro a variável "a" como pai.

trv.add(“texto 2”, “link 2”, “target 2”, a);

Assim o método sabe a quem ele é subordinado. E melhor, não nos interessa que código ele executou, qual foi o critério na criação dos ids, está tudo encapsulado.

Linha 10: Aqui vemos outro método que foi chamado, que é o "addLoader". É nesse método que marcamos que um nó deve executar o Ajax. Mas repare, esse método não cria um nó, apenas marca um nó já criado como um executor do carregamento pelo Ajax. Então, a chamada seria dessa maneira:

a = trv.add(“texto”, “link”, “target”, null);
trv.addLoader(“action=carregaSeiLaOQue”, a);

O método faz isso, pega o nó que foi passado como parâmetro (no nosso caso, o id foi retornado em "a" pelo "add") e cria nele que uma chamada ao Ajax deve ser feita. O usuário, ao clicar nesse nó, vai fazer uma requisição no Ajax que vai carregar os nós que ainda não estavam prontos. Veremos tudo isso na criação da classe.

Linha 23 a 24: Ocultamos a mensagem de carregando”.

Linha 25 a 26: Mostramos o nosso Treeview ao usuário, com todos os seus nós que foram adicionados.

Agora que já sabemos como utilizar o treeview, vamos ver a classe em si.

Se não sabe trabalhar com classes no javascript, recomendo a leitura desses artigos que o Thiago Prado escreveu antes:

Criando e manipulando objetos
http://www.imasters.com.br/artigo.php?cn=1981&cc=78

Prototype e herança de objeto
http://www.imasters.com.br/artigo.php?cn=2003&cc=78

Não vamos fazer nada de avançado, pode ficar tranqüilo, usaremos apenas o básico.

A classe do Treeview é composta a princípio de dois atributos e um método. O Ajax veremos depois, primeiro vamos deixá-lo funcional.

- this.id : Atributo que vai guardar o id do div que está servindo como container do treeview. Esse atributo será utilizado na criação dos divs e links que são subornidados a ele, evitando a duplicidade no caso de termos mais de um treeview na mesma página;

- this.idGen : Esse atributo será utilizado como um autonumerador na criação do id dos nós. A cada chamada do método "add", adicionamos um em “idGen” e utilizamos esse valor concatenado no id do div, assim nunca teremos duplicidade. Lembre-se, o id sempre tem que ser único;

- this.add : Método para adicionar os nós do treeview;

Agora, vamos estudar o método "add":

Linha 5 a 6: Declaração do método. Como já vimos, ele espera quatro parâmetros, o texto, o link, target e qual o seu nó pai.

Linha 8: Adicionamos um a variável "idGen". Com isso, a cada chamada do método o id dos divs será único, vamos concatenar esse atributo com os outros valores. Veremos isso logo abaixo;

Linha 10: Criamos em “" noh" um div através do document.createElement. Lembre-se do que comentei acima, as tags não existem direto no HTML, vamos criar tudo por javascript.

Linha 11: Atribuímos um id para esse div que acabamos de criar. Repare que concatenamos o id do div container, a string “_divNodes” que deixamos fixa e qual é o valor de “idGen” naquele instante. Assim, evitamos a duplicidade de ids;

Linha 12: Atribuímos para o div que acabamos de criar a classe "node". Como comentei acima, essa classe vai ser utilizada nos itens que não tem nenhum nó filho.

Linha 13: Essa condição é muito importante. Se o pai veio como "null", o trabalho é muito simples, apenas precisamos dar um appendChild para que o div apareça na página. Mas se veio algum pai, teremos dois trabalhos, que é adicionar o recém criado na página e modificar o pai para que ele funcione como um nó com filhos. Repare, o mesmo método faz tudo, adiciona os nós e modifica o pai para ter as funcionalidades de abrir e fechar os seus filhos.

Linha 14: Se o pai veio como "null", adicionas o div criado no próprio container do treeview. Como o seu id foi guardado em this.id, damos um getElementById no mesmo e um appendChild com o elemento criado.

Linha 16: Recuperamos em "nodePai" qual foi o nó passado por parâmetro como pai.

Linha 17: Adicionamos dentro de "nodePai" pelo appendChild o div que acabamos de criar. Só após isso que o elemento aparece na página, então como estamos adicionando um filho, o div criado ficará dentro do div que foi passado como pai.

Linha 19 a 22: Se o div não está com nenhuma das duas classes criadas para os nós com filhos, atribui a classe “nodeFechado”.

Linha 24 a 25: Recupera em "paiIdGen"  qual era o valor de "idGen" no momento da criação do nó pai. Essa variável vai ser utilizada para recuperar qual foi o id do link com o texto que foi criado para esse nó.

Linha 26 a 27: Recupera em "nodePaiLk" o objeto em si do link para o nó pai.

Linha 28: Cria em uma variável qual vai ser o id do link de expandir/contrair o treeview. Os passos da linha 24 a 28 servem apenas para recuperar os três objetos que são criados para um nó com filhos (o div em si que contém o nó, o link com o texto do nó e o link de expandir/contrair o treeview) e não criar os mesmos elementos duas vezes. Se um nó já tem o seu link de expandir/contrair, não precisamos criá-lo de novo.

Linha 30: Testa se o nó que foi passado como pai já tem um link de expandir/contrair. Se não tiver, será criado a partir da próxima linha.

Linha 31: Cria em "linkN”" um link que vai ser o expandir/contrair;

Linha 32: Atribui o seu id, que foi criado na linha 28;

Linha 33: Atribui a sua classe CSS. É essa classe que faz o link ter o comportamento do botão de expandir/contrair.

Linha 34 a 35: Atribui para o link que ao ser clicado ele deve chamar a função “openNode”, passando como parâmetro o id do div do nó que está sendo modificado. Repare, é o div que é passado, e não o seu link;

Linha 36: Insere o link de expandir/contrair na página. Repare que ao contrário dos demais, não utilizamos o appendChild, e sim o insertBefore. Os dois tem a mesma função, mas com uma diferença, enquanto o appendChild insere o elemento cria no final do código HTML do seu container (seja ele qual for), no insertBefore você passa dois parâmetros, qual o objeto que está sendo criado e antes de qual elemento ele deve ser inserido. Isso é importante porque queremos que o nosso link fique antes do texto do nó, e não no final;

Documentação - appendChild
http://www.mozilla.org/docs/dom/domref/dom_el_ref32.html

Documentação - insertBefore
http://www.mozilla.org/docs/dom/domref/dom_el_ref47.html

Linha 40: Agora podemos finalmente criar o link que vai conter o texto do nó. Da linha 16 até a 36 estávamos apenas tratando se o nó como foi passado como pai já continha filhos, se não tivesse, precisava ser modificado. O link é criado em "nohText";

Linha 41 a 42: Cria o id do link e o atribui para o objeto;

Linha 43: Atribui para o link recém-criado qual vai ser o seu texto. Conseguimos isso fazendo a atribuição pelo innerHTML;

Linha 44 a 45: Atribuímos o href e target para o link criado. Ambos valores foram passados por parâmetro para o método;

Linha 46: Adicionamos o nó na página, através do appendChild;

Linha 48 a 50: Chamamos a função para adicionar um Listener de evento para o link que acaba de ser criado. Essa função vai ser a responsável por controlar qual item foi clicado e o ativa pela troca do CSS, vamos ver essa função logo abaixo. A função "adicionaEvento" espera três parâmetros, qual o objeto que vai ter um evento adicionado, qual a função que deve ser chamada na execução do evento, e qual evento propriamente dito nós queremos tratar, que no nosso caso é o clique;

Linha 52: Retorna qual id foi gerado na criação do nó. É dessa maneira que fazemos a recuperação do id gerado como já foi explicado antes.

Com isso finalizamos a primeira parte da nossa classe, ela já está quase funcional, faltam apenas algumas funções para tratar os eventos. Vamos vê-las a seguir:

Linha 1 a 8: Função que é chamada ao clicar no link de expandir/contrair os nós do treeview. O seu funcionamento é extramente simples, ela apenas recupera o objeto que foi passado por parâmetro e testa qual é a sua classe CSS naquele instante. Se ele está com seus nós expandidos, então está com a classe "nodeAberto" e a função troca a sua classe para a "nodeFechado". E vice-versa, se ela está com a "“nodeFechado", atribui a classe "nodeAberto". Da maneira como montamos o HTML na criação dos nós e a com a estrutura dos seletores no CSS, a navegação fica muito mais simples do que se fizéssemos, por exemplo, um loop por todos os seus filhos ocultando-os um a um.

Linha 10: Declaramos uma variável global que vai guardar qual foi o último nó clicado. É através dela que vamos desabilitar o link que foi clicado anteriormente, não vamos fazer loops nem nada, ela vai guardar esse valor.

Linha 12: Função vai ser chamada quando o link de um nó for clicado, foi para isso que adicionamos um Listener no link dentro do método "add", para que ele execute essa função além de chamar o link estipulado no "href”" .

Linha 13 a 16: Se algum link já foi clicado, o seu id vai estar guardado na variável "nodeAtivo". Caso ela tenha algum valor, recuperamos o seu objeto e limpamos a sua classe CSS, ela vai ficar com o valor default que foi previamente declarado. Repare que nenhum link tirando o ativo tem alguma classe CSS explícita, sempre usamos o div na qual ela está inserida para criar a formatação visual. Após isso, limpamos a variável;

Linha 18 a 20: Recuperamos o objeto através do id que foi passado por parâmetro para a função, atribuímos a classe CSS “nodeAtivo” para ele, que foi a que criamos no CSS com a cor de fundo laranja entre outras formatações e guardamos na variável global qual foi o id passado por parâmetro. Dessa maneira, na próxima vez que a função for chamada ela já saberá qual foi o link previamente clicado pelo valor dessa variável;

Linha 23 a 29: Função genérica (amplamente difundida na internet, não fui eu quem a desenvolvi) que adiciona Listeners de eventos para o objeto que foi passado por parâmetro. Com isso conseguimos que ao acontecer determinado evento com um objeto, uma função seja chamada.

Existem dois trechos distintos de código simplesmente porque o Internet Explorer não utiliza o padrão addEventListener, e sim o attachEvent. Como queremos que o nosso código funcione pelo menos nos browsers mais comuns, nós precisamos fazer esse teste.

Com isso finalizamos a primeira parte do artigo. Nosso treeview está completamente funcional. Na próxima semana vamos criar a possibilidade de carregarmos os nós pelo Ajax.

Dúvidas, críticas, sugestões para novos artigos e elogios podem ser deixados nos comentários ou enviados para o meu e-mail.

É isso! Um abraço!