Estendendo HTML criando tags personalizadas

Às vezes, apenas usar uma tag HTML não é suficiente para a funcionalidade necessária em aplicativos da web. Normalmente, isso é resolvido usando várias tags HTML junto com JavaScript e CSS, mas essa solução não é tão elegante.

Uma solução mais elegante seria usar uma tag personalizada – um identificador entre <> que é interpretado pelo navegador para renderizar nossa funcionalidade pretendida. Assim como acontece com as tags HTML normais, devemos ser capazes de usar uma tag personalizada várias vezes em uma página, e também devemos ter atributos de tag e subtags para auxiliar a funcionalidade da tag personalizada. Então, vamos ver um exemplo!

Exemplo nº 1: Criando uma tag HTML personalizada do Gravatar

Vamos criar uma tag personalizada que exibirá a imagem do Gravatar para um determinado endereço de e-mail. Chamaremos esta etiqueta e passaremos o endereço de e-mail como um atributo chamado email.

Você pode nomear suas tags personalizadas como quiser, mas uma coisa a notar é que neste exemplo o nome da tag personalizada começa com codingdude-. É uma prática recomendada usar prefixos como este para suas tags personalizadas para evitar conflitos de nome com outras tags personalizadas. Além disso, obviamente é uma boa ideia não usar nomes de tags que já estejam definidos pelo HTML.

Para implementar e testar nossa tag, precisaremos criar algumas coisas:

• Uma pasta para guardar os arquivos do projeto; vamos chamar esta pasta gravatar-custom-tag.
• Um arquivo HTML index.html dentro de gravatar-custom-tag pasta. Este arquivo conterá o código HTML.
• Um arquivo JS codingdude-gravatar.js dentro de gravatar-custom-tag pasta. Este arquivo conterá o código JavaScript que implementa a tag personalizada.

Vamos editar o index.html arquivo e faça com que seu conteúdo fique assim:

    
        
    

    This is my Gravatar picture: 
    

se nós carregarmos index.html no navegador agora, o resultado não é tão impressionante porque ainda temos que implementar o código para nossa tag personalizada:

Uma coisa a notar é que o navegador é muito tolerante, então você pode ter tags desconhecidas em um documento e o navegador simplesmente as ignorará. Para que nossa tag personalizada realmente exiba a imagem do Gravatar no meu e-mail, primeiro precisamos entender como o Gravatar funciona.

Gravatar funciona traduzindo um endereço de e-mail para um URL de uma imagem PNG que o usuário selecionou. A tradução é feita calculando o hash MD5 do endereço de e-mail. O URL da imagem do Gravatar é assim: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Então, primeiro precisamos de uma função para calcular o hash MD5 de uma string. Para isso, usaremos uma biblioteca de código aberto que adicionaremos ao index.html arquivo assim:

    
        
        
    

    This is my Gravatar picture: 

Agora vamos passar para a implementação da tag personalizada. Precisaremos implementar o código que primeiro identifica nossa tag personalizada no documento e, em seguida, precisamos implementar a funcionalidade de nossa tag personalizada. Isso tudo vai em nosso codingdude-gravatar.js arquivo e ficará assim:

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function codingdudeGravatar(element){
		//code for rendering the element goes here
		if (element.attributes.email){
			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "";
		}
}	

customTag("codingdude-gravatar",codingdudeGravatar);

Olhando para o código, vemos a função customTag() que encontra ocorrências de uma tag personalizada por nome (o tagName parâmetro) e executa a funcionalidade associada a essa tag personalizada (através do fn parâmetro).

o document.createElement(tagName) chamada é necessária para alguns navegadores (IE em particular) para informar ao navegador que estaremos usando uma tag personalizada com o nome tagNamecaso contrário, a tag pode não funcionar.

o fn parâmetro é a função que implementa o que a tag personalizada deve fazer. No nosso caso, fn é codingdudeGravatar(). Esta função recebe como parâmetro uma referência ao elemento de tag customizado. Se a tag personalizada tiver um atributo chamado email então ele vai passar esse valor para o md5() função de nossa biblioteca de código aberto. O resultado é então usado para compor a URL da imagem do Gravatar, que é adicionada por meio de um elemento dentro do nosso elemento de tag personalizado.

A última linha do script chama o customTag() função com o nome da tag personalizada e sua função de implementação associada. A função de tag personalizada pode ser reutilizada para qualquer tipo de tag personalizada; você só terá que implementar a função que faz o que você precisa.

Agora, se carregarmos nosso index.html arquivo em um navegador, veremos o Gravatar do meu e-mail:

Exemplo 2: Tag HTML personalizada avançada para desenhar um gráfico de pizza

Em nosso exemplo anterior, vimos uma implementação de tag HTML personalizada muito simples. Você pode usar a mesma abordagem para implementar qualquer tag personalizada que desejar.

Vamos ver como implementar uma tag personalizada mais avançada, que podemos usar para desenhar um gráfico de pizza. Vamos criar os arquivos necessários para esta tag personalizada:

• Crie uma pasta e nomeie-a piechart-custom-tag. Esta será a nossa pasta do projeto.
• Dentro de piechart-custom-tag pasta, crie um arquivo HTML e nomeie-o index.html. Este arquivo conterá o código HTML.
• Crie também um arquivo JavaScript codingdude-piechart.js que conterá a implementação de nossa tag personalizada.

As tags personalizadas são frequentemente usadas como wrappers para várias funcionalidades. No nosso caso, usaremos o tag como um wrapper para desenhar um gráfico de pizza. Se você perdeu meu tutorial sobre Como desenhar gráficos usando JavaScript e HTML5 Canvas, você pode querer dar uma olhada rápida. Usaremos o código desse tutorial e envolveremos sua funcionalidade em nossa tag personalizada.

Então edite o codingdude-piechart.js e adicione as seguintes funções do tutorial:

• drawLine()
• drawArc()
• drawPieSlice()
• Piechart()

Agora vamos editar o arquivo index.html e coloque a tag personalizada para desenhar o gráfico de pizza assim:

    
        
    

    
      10
      14
      2
      12
    

A intenção aqui é definir a largura e a altura do gráfico de pizza usando os atributos width e height. o colors O atributo define as cores usadas para as fatias do gráfico de pizza.

Como mencionado anteriormente, essa tag personalizada é um pouco mais complexa, pois queremos usar subtags para essa tag personalizada. Queremos usar o sub-tags aqui para definir os dados para o gráfico. Vamos agora dar uma olhada em como implementar o código para essa tag personalizada.

Edite o arquivo codingdude-piechart.js e, após as funções retiradas do tutorial do gráfico de pizza, coloque o seguinte código:

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
    
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
    
    //load the chart data from the  sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i
o customTag() função é a mesma usada no Exemplo #1.  A implementação do  a tag personalizada está contida no PiechartTag() função.  Esta função cuida dos seguintes aspectos:

Ele cria o  elemento onde o gráfico será desenhado e o adiciona dentro da tag personalizada.  A largura e a altura da tela são obtidas dos atributos da tag personalizada.
Ele procura o colors atributo do elemento e o transforma em uma matriz de cores usada para as fatias do gráfico de pizza.
Ele carrega o  elementos um por um na estrutura de dados passados ​​para o gráfico de pizza.  Como os elementos têm conteúdo de texto, o navegador os renderizará e o conteúdo de texto será mostrado.  Como não queremos isso, podemos apenas remover os elementos depois de pegar os dados.
Por último, chamamos a Piechart() construtor com as opções necessárias e, em seguida, chame o draw() função para desenhar o gráfico de pizza.

Se você carregar index.htmlvocê pode ver que a tag personalizada é renderizada como um gráfico de pizza e deve ter esta aparência:

E aí está, um lindo gráfico de pizza.  Alterando a  atributos irão alterar o gráfico de pizza de acordo.  Essa mesma técnica de tags personalizadas foi usada para o desenvolvimento da Biblioteca de Tags HTML de Gráficos e Gráficos Infográficos da CodeCanyon.

A biblioteca contém tags personalizadas não apenas para gráficos de pizza, mas também para gráficos de linhas, gráficos de barras e outros tipos de gráficos.
Pensamentos finais
Neste tutorial, vimos dois exemplos de como criar tags HTML personalizadas para duas funcionalidades diferentes.  Usando o customTag() função, você pode desenvolver facilmente suas próprias tags personalizadas.
Se você gostou deste tutorial, também temos uma grande variedade de outros tutoriais sobre HTML5 e tecnologias relacionadas, então não hesite em dar uma olhada também.