pedrocacique

Taglibs Personalizadas

18 de abril de 2016

Olá pessoas!

Quando desenvolvemos uma aplicação Java Web, trabalhamos com diferentes linguagens que se unem para a construção do projeto. Estamos falando por exemplo de HTML, CSS, JS, por exemplo, como linguagens para a camada de apresentação do conteúdo.

Em uma arquitetura JEE em camadas, sempre temos uma delas relacionada específicamente com a forma em que a informação é apresentada ao usuário. Por isso, usamos algumas linguagens de marcação e estilo.

O grande foco da JEE é a separação das tarefas de cada parte do projeto, de modo a diminuir o acoplamento entre suas partes e facilitar a manutenção do sistema.

Entretanto, algumas vezes precisamos usar um pouco de lógica para desenhar a tela do sistema, e não simplesmente criar uma página estática com HTML e CSS puros. Quando trabalhamos com JAVA, usamos as JSPs (Java Server Pages) para conectar a lógica do sistema (em JAVA), com a sua apresentação (normalmente HTML).

O JSP se parece muito com o HTML, pois possui a mesma estrutura de marcação. À primeira vista, um código JSP é igual ao html. Mas existem diferenças importantes que permitem a execução de códigos JAVA no corpo da página.

Uma forma de inserir código é o Scriptlet, que permite a programação em JAVA diretamente no interior de tags <% %>

Contudo, se o objetivo é justamente separar a parte lógica da apresentação, essa mistura pode gerar um alto acoplamento entre a página JSP e a lógica.

Uma solução para este problema são as Bibliotecas de Tags, ou simplesmente taglibs. Com elas, podemos criar um trecho de código e associá-lo a uma tag personalizada. Existem algumas tags que fazem parte do núcleo da linguagem e são chamadas de JSTL (Java Standar Tag Libs). Estas permitem o acesso às principais estruturas da linguagem JAVA, como por exemplo a declaração de variáveis, estruturas de repetição e condicionais, etc.

O mais interessante é que podemos criar as nossas próprias tags para simplificar a apresentação e permitir que um profissional web (que não programa em java) possa utilizar o nosso código tranquilamente.

Vamos ver como podemos definir nossas próprias taglibs!

Customização de taglibs

O primeiro ponto é definir o que é importante para o sistema que deve ser apresentado em uma página JSP com certa frequência, precisa de interação lógica e pode ter seu código simplificado em pequenos blocos.

Vamos fazer primeiro alguns exemplos de apresentação de textos simples, para vermos a sintaxe da criação da tag e em seguida faremos um exemplo um pouco mais útil.

Faremos então os seguintes exemplos:

  • Tags sem conteúdo interno
  • Tags com conteúdo interno
  • Tags com atributos

Tags sem conteúdo interno

Paa este primeiro exemplos, faremos um Hello World simples, ou seja, uma taglib que apresenta sempre este mesmo texto onde for inserida.

O processo tem três partes:

  1. Criação do código em java
  2. Criação do descritor da taglib
  3. Inserção da tag no arquivo JSP

Para começar, crie um projeto do tipo Aplicação Java Web. Caso a sua IDE inicialize o projeto comum arquivo index.html, substitua-o por um no formato index.jsp

Crie um pacote específico para abrigar suas taglibs. No meu caso, criei o pacote com.br.cacique.taglibs. Vamos criar uma classe chamada HelloTag.java que estende a classe pai SimpleTagSupport. Essa classe possui os métodos principais para a conexão entre o código e o JSP.

Como método principal, temos o doTag(). Nele deve ser inserido o código desejado. Por exemplo, começamos criando um JspWriter, para escrever na página JSP e chamamos o método print() que receberá como parâmetro a nossa frase Hello World!. Observe que podemos colocar trechos de código HTML na String argumento.

Agora vamos criar um arquivo descritor para esta tag, que será responsável por determinar o prefixo utilizado, os atributos (quando existirem), o versionamento, entre outros.

Na pasta WEB-INF, localizada em Páginas Web, do projeto, criamos um arquivo no formato .tld (TagLib Descriptor). Veja o código a seguir:

Perceba que, além das tags para versionamento, criamos uma tag com o nome deste descritor: <short-name>; em seguida, indicamos a uri (identificador do recurso), que é o caminho para este arquivo; e, por fim, declaramos a tag. Para isso, definimos o seu nome, a classe relacionada e tipo de conteúdo <body-content>, que nesse caso recebe o valor empty, pois não temos conteúdo associado à tag.

Por fim, a utilização!

O primeiro passo é importar a sua biblioteca. Veja a linha número 2 do código a seguir. Estamos atribuindo a descrição que criamos ao prefixo h (você pode escolher o prefixo que melhor se adapte ao seu código).

Para utilizar a biblioteca, basta então chamarmos a tag no local desejado. Por exemplo, a colocamos diretamente no corpo da página. Como esta tag não tem nem corpo, nem atributos, basta chamá-la pelo seu nome, com fechamento na mesma tag. Assim:

<h:Hello/>

Neste caso, observe que usamos o prefixo h, seguido do nome da tag que definimos no descritor.

Ao executar o projeto, você deve ser capaz de enxergar a frase Hello World! como um título.

Tags com conteúdo interno

Ok! Vamos dizer agora que a nossa taglib vai receber o valor de seu conteúdo e apresentá-lo como um título. Novamente: este código é bem simples e nem precisaria de uma taglib para tal, mas estamos fazendo isso para estudar o seu funcionamento.

Para que a tag possa pegar o conteúdo interno das tags de abertura e fechamento, precisamos fazer algumas poucas alterações.

Primeiro, vamos alterar o descritor, dizendo que o body-content agora possui algo. Observe a alteração na linha 9, no código a seguir:

Observe que no arquivo HelloTag.java, criamos agora um StringWriter e atribuimos a ele o conteúdo da nossa tag, através dos métodos getJspBody() (que pega o conteúdo da tag) e invoke(sw) (que coloca este conteúdo no StringWriter sw).

Observe que a utilização da tag no index será diferente, pois ela terá um conteúdo que é o texto a ser mostrado

O resultado então será o texto inserido apresentado como título:

Tags com atributos

Agora vamos adicionar um atributo a esta tag que criamos. Digamos que queremos passar a cor do texto apresentado. Assim, teremos uma tag com conteúdo interno, que será o texto, e um atributo que conterá a cor.

Novamente, precisamo alterar o descritor da taglib para que tenha a regra do atributo. Veja:

Para o element <tag> adicionamos um novo elemento <attribute> que contém alguns possíveis parâmetros, a saber:

  • name - nome do atributo
  • required - se é um atributo obrigatório (true | false)
  • type - tipo de dados do atributo (por padrão é String)
  • description - informação do atributo
  • fragment - declara se o atributo deve ser tratado como um JspFragment

Para o nosso exemplo, criei um atributo chamado color que é obrigatório.

Observe agora como tratamos o HelloTag.java:

Para que o atributo seja acessado no método principal, é necessário que haja uma variável global com o mesmo nome e um método Setter para ela. Caso a variável não seja obrigatória, lembre-se de tratar o caso em que ela seja nula.

Por fim o uso:

Assim como no HTML, um atributo de tag deve ser encarado como um par: nome + valor (entre aspas).

Poderíamos então colocar um tratamento para os possíveis valores, para evitar erros. Mas essas são melhorias que podemos fazer além do básico explorado aqui.

Este é o resultado esperado:

Weather Widget

Pensando nas taglibs, criei um exemplo um pouco mais complexo. No projeto a seguir, criei uma classe para consumo de uma API de previsão do tempo, disponível em OpenWeatherAPI.

Esta classe faz uma conexão via socket com o servidor da OpenWeather, passando os parâmetros na URL de acordo com os parâmetros da taglib.

A taglib então é responsável por chamar o método de consumo do serviço e criar um elemento HTML que contenha o nome da cidade, a temperatura (em diferentes métricas) e o ícone relacionado ao clima.

Em um próximo tutorial explorarei o consumo do serviço, neste momento apenas apresento o projeto. Caso tenha alguma dúvida, entre em contato, ok?

O projeto está disponível em meu perfil no GitHub e você pode baixar uma cópia AQUI

Espero que tenha gostado e que você possa criar as tags customizadas que precisa para seus projetos.

Até a próxima!