Image Image Image Image Image
Scroll to Top

Topo

ajax

23

nov
2011

Sem Comentários

Em Blog
Código
Java

Por Allison

Criando uma Tag Library para carregar a imagem de um perfil do Gravatar

Em 23, nov 2011 | Sem Comentários | Em Blog, Código, Java | Por Allison

Há alguns dias eu estava querendo um tempo para estudar um pouco a API do Gravatar, que por sinal funciona muito bem aqui no WordPress. Lendo a documentação de uso, percebi que muito fácil de você obter a imagem de um perfil do Gravatar usando um hash do e-mail do usuário com criptografia MD5.

Primeiramente, como sou um usuário fanático do jQuery, tentei resolver a bronca direto por Javascript, mas acabei empacando na geração do hash MD5, não sei porque, mais aqui nenhuma implementação Javascript para MD5 funcionou, assim parti para o plano B, usando a API Java para gerar o hash MD5, perfeito, funcionou corretamente, tá bom, mas agora eu tenho a implementação lá em uma classe Java, como que eu ligo isto com a minha view HTML/JSP ?

Usando o VRaptor 3.4, fiz uma requisição AJAX/JSON e retornava o hash e fazia o carregamento da imagem via jQuery, assim:

01	$(document).ready(function(){
02	   $('#button').bind('click', function(){
03	      var email = $('#email').attr('value');
04
05	      var url = "<c:url value='/gravatar/get-md5/'/>";
06	      $.post(url, {email: email}, function(data){
07	         var url = "http://www.gravatar.com/avatar/" + data.string + "?s=200";
08	         $('#result').html($("<img/>").attr('src', url)).append('<br/><i>' + data.string + "</i>");
09	      });
10	   });
11	});

Na minha aplicação Java eu tinha duas classes, uma que implementava o hash MD5 e a outra que era o meu controller da requisição AJAX/JSON:

01	package com.wp.carlos4web.cpropriedades.md5;
02
03	import java.io.UnsupportedEncodingException;
04	import java.security.MessageDigest;
05	import java.security.NoSuchAlgorithmException;
06
07	public class MD5 {
08	    public static String hex(byte[] array) {
09	        StringBuffer sb = new StringBuffer();
10	        for (int i = 0; i < array.length; ++i) {
11	            sb.append(Integer.toHexString((array[i] & 0xFF) | 0x100).substring(
12	                    1, 3));
13	        }
14	        return sb.toString();
15	    }
16
17	    public static String md5Hex(String message) {
18	        try {
19	            MessageDigest md = MessageDigest.getInstance("MD5");
20	            return hex(md.digest(message.getBytes("CP1252")));
21	        } catch (NoSuchAlgorithmException e) {
22	        } catch (UnsupportedEncodingException e) {
23	        }
24	        return null;
25	    }
26	}
27	// Controller.
28	package com.wp.carlos4web.cpropriedades.controllers;
29
30	import com.wp.carlos4web.cpropriedades.md5.MD5;
31
32	import br.com.caelum.vraptor.Get;
33	import br.com.caelum.vraptor.Post;
34	import br.com.caelum.vraptor.Resource;
35	import br.com.caelum.vraptor.Result;
36	import br.com.caelum.vraptor.view.Results;
37
38	@Resource
39	public class HomeController
40	{
41	    private Result result;
42
43	    public HomeController(Result result) {
44	        super();
45	        this.result = result;
46	    }
47
48	    @Get("/")
49	    public void index ()
50	    {
51
52	    }
53
54	    @Post("/gravatar/get-md5/")
55	    public void generateMD5Hash(String email)
56	    {
57	        String hash = MD5.md5Hex(email);
58
59	        this.result.use(Results.json()).from(hash).serialize();
60	    }
61	}

O código é bem simples, e funcionou, atendendo o que eu precisava, só que daí pensei em ‘componentizar’ essa solução, daí acabei refletindo e vi que seria inviável inicialmente, logo então pensei em uma solução alternativa à uma interação/codificação Javascript/AJAX, logo a única saída seria escrever uma tag própria para isso, pronto, encapsula a lógica em uma classe Java e vincula a mesma em uma tag acessível pelo HTML/JSP.

As tag libraries, ou tag support do Java são bem simples de serem utilizadas e implementadas, não sou um grande conhecedor, mas com algumas pesquisas na documentação consegui desenvolver a solução sem muitos problemas. Bom primeiramente precisamos criar a nossa classe que contém a implementação necessária, mais qual implementação ?

A implementação/ligação com a classe que gera o hash e que cria o elemento IMG para ser inserido no corpo da página HTML/JSP, o código da classe está na listagem abaixo e é bem simples, repare que os atributos ‘email’ e ‘imageSize’ são os parâmetros da nossa tag na página HTML/JSP.

01	package com.wp.carlos4web.gravatar;
02
03	import java.io.IOException;
04
05	import javax.servlet.jsp.JspException;
06	import javax.servlet.jsp.tagext.TagSupport;
07
08	import com.wp.carlos4web.cpropriedades.md5.MD5;
09
10	public class GravatarTag extends TagSupport
11	{
12	    private static final long serialVersionUID = 1066237315711135837L;
13
14	    protected String    email;
15
16	    protected int       imageSize = 200;
17
18	    @Override
19	    public int doEndTag() throws JspException
20	    {
21	        if(email != null && !email.isEmpty())
22	        {
23	            try
24	            {
25	                // Gera o hash MD5.
26	                String hash = MD5.md5Hex(email);
27
28	                // Monta a URL para a imagem remota.
29	                String url = "http://www.gravatar.com/avatar/" + hash + "?s=" + imageSize;
30
31	                // Monta a tag HTML IMG com a URL remota.
32	                String img = "<img src='" + url + "'/>";
33
34	                // Insere no corpo da página onde a tag está sendo chamada.
35	                this.pageContext.getOut().write(img);
36	            } catch (IOException e) {
37	                e.printStackTrace();
38	            }
39	        }
40	        return super.doEndTag();
41	    }
42
43	    public String getEmail() {
44	        return email;
45	    }
46
47	    public void setEmail(String email) {
48	        this.email = email;
49	    }
50	    public void setImageSize(int imageSize) {
51	        this.imageSize = imageSize;
52	    }
53
54	    public int getImageSize() {
55	        return imageSize;
56	    }
57	}

Como vocês viram o código é bem simples. Não existe regra sobre qual pacote deve ficar a sua classe, somente no arquivo TLD de descrição você deverá informar o caminho dela, exemplo: ‘br.pacote.pacote.SuaClasse’. Não esqueça:

  • Criar os métodos setters para os seus atributos, caso falte algum será gerada uma exception na sua aplicação.

Caso contrário não irá funcionar.

O próximo passo e a estruturação da nossa tag, para isso eu segui o padrão do desenvolvimento de tags, no meu diretório WEB-INF, eu criei um diretório tags e dentro dele um diretório com um nome significativo, neste caso ‘gravatar’. Dentro dele, seguindo a convenção, criei um arquivo .TLD com o nome da minha classe, logo ‘gravatar.tld’. Abaixo segue a codificação do mesmo, que também é bem simples e segue um padrão.

01	<?xml version="1.0" encoding="ISO-8859-1" ?>
02	<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
03
04	<taglib>
05	    <tlibversion>1.0</tlibversion>
06	    <jspversion>1.1</jspversion>
07	    <shortname>gravatar</shortname>
08	    <uri>http://carlos4web.wordpress.com/</uri>
09	    <info>Insere uma tag IMG com o gravatar de um usuário a partir do seu E-mail.</info>
10
11	    <tag>
12	        <name>gravatar</name>
13	        <tagclass>com.wp.carlos4web.gravatar.GravatarTag</tagclass>
14	        <bodycontent>JSP</bodycontent>
15	        <info>Say Hi</info>
16
17	        <attribute>
18	            <name>email</name>
19	            <required>true</required>
20	            <rtexprvalue>true</rtexprvalue>
21	        </attribute>
22	        <attribute>
23	            <name>imageSize</name>
24	            <required>false</required>
25	            <rtexprvalue>true</rtexprvalue>
26	        </attribute>
27	    </tag>
28	</taglib>

O próximo passo é usar a nossa tag, esta é a parte mais fácil da brincadeira, primeiramente, declare o import da nossa tag library:

1	<%@ taglib prefix="carlos" uri="/WEB-INF/tags/gravatar/gravatar.tld" %>

Agora é só chamar quando você precisar:

01	<table>
02	    <tr>
03	        <td valign="top">
04	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="30"/>
05	        </td>
06	        <td valign="top">
07	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="50"/>
08	        </td>
09	        <td valign="top">
10	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="100"/>
11	        </td>
12	        <td valign="top">
13	            <carlos:gravatar email="carlosjrcabello@gmail.com" imageSize="300"/>
14	        </td>
15	    </tr>
16	</table>

Lembrando pessoal, que segundo a API do Gravatar, quando a imagem do perfil não é encontrada, é retornado uma imagem padrão com a logo do gravatar. Caso você queira, existem mais parâmetros na API para customizar isso.

Conclusão

Bom pessoal, essa é uma solução do ‘mundo real‘ no desenvolvimento de aplicações WEB, porque? Com esse código, você investe um tempo X para fazê-lo, depois você ganha muito tempo somente reusando ele, lembrem-se dos princípios de agilidade e reusabilidade de código.

Este é um exemplo didático, está bem simples, quem quiser enriquecer esta solução com os outros recursos da API do Gravatar fique a vontade, no final será uma solução muito bacana e utilizável.

Download

Para quem quiser baixar o exemplo da tag, estou deixando disponível lá no Github o código junto da estrutura do projeto, segue o endereço abaixo:

https://github.com/carlosjrcabello/gravatar-tag-support

Referências


http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags6.html – contém exemplos bem claros de como utilizar.


http://stackoverflow.com/questions/224748/jsp-custom-tag-library-unable-to-find-setter-method-for-the-attribute – contém a solução para um problema que uma hora ou outra você irá passar, que é a ordem da declaração dos elementos no arquivo TLD.


http://java.sun.com/developer/technicalArticles/xml/WebAppDev3/ – Mais exemplos de como trabalhar com o arquivo TLD.

http://en.gravatar.com/site/implement/ – informações sobre a API e implementações.

Por enquanto é só pessoal, um abraço e até a próxima.

Dúvidas e comentário usem o espaço de comentários abaixo.

Fonte: Carlos4web

Tags | , , , , , , , , ,

13

nov
2011

Sem Comentários

Em Blog

Por Allison

Usando Ajax com jQuery

Em 13, nov 2011 | Sem Comentários | Em Blog | Por Allison

Realmente eu achava chato programar em javascript, algo complicado, cheio de lerolero, mas então eu encontrei o jQuery, e programar em javascript se tornou algo fácil e muito divertido. Realmente eu fiquei muito feliz a descobrir este framework (se é que pode ser chamado assim). Hoje vou falar de uma das funcionalidades mais uteis e mais requisitadas que podemos usar para sistemas web, o ajax.

Tirando da Wikipedia: AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Mas na linguagem mais simples, conseguimos fazer uma requisição a um arquivo (pagina) sem precisar fazer reload de tela. Sim, isto torna muito mais rápido a execução do seu código, e muito mais bonito e elegante tbm.

Uma coisa que vamos aprender como jQuery é que vamos separar totalmente o nosso código javascript do nosso html. Gosto de pensar a programação web em camadas, sendo elas: conteúdo (html), estilo (css) e ação (javascript). Ainda temos a tomada de decisão (php), mas acho que falar sobre isto é coisa para outro tutorial. Vamos ao que interessa.

Primeiro, precisamos baixar o jQuery direto da fonte: http://docs.jquery.com/Downloading_jQuery

Vamos entender como funciona a estrutura básica:

<!doctype html>
<html>
  <head>
    <!-- aqui vamos fazer o nosso include da biblioteca do jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
      <!-- aqui vamos escrever nosso código javascript -->
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Muito simples, fizemos a requisição do nosso arquivo jQuery, e logo em seguida escrevemos nosso código entre as tags .

Mas vamos agora ao nosso código:

<!doctype html>
<html>
  <head>
 
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
    $(document).ready(function(){
      $("#button_busca").click(function () {
        $("form").submit(function () { return false; });
        var busca = $("#busca").val();
        $.ajax({
            type: "POST",
            url: "busca.php",
            data: "busca="+busca,
            success: function(html){
                $("#resposta").html(html);
            }
        });
    });
    });
    </script>
  </head>
  <body>
    <div id="resposta"> </div>
    <form>
    <fieldset>
        <legend>Busca</legend>
        <dl>
            <dt><label for="busca">Palavra Chave:</label></dt>
            <dd><input type="text" name="busca" id="busca" /></dd>
        <dd class="botao"><button id="button_busca">Busca</button></textarea></dd>
            </dl>
    </fieldset>
    </form>
  </body>
</html>

Primeiro fazemos o include da biblioteca jQuery. Depois temos a linha: “$(document).ready(function(){” isto faz com que assim que a pagina termine de ser carregada ele aplique as rotinas que vamos escrever abaixo dele. Abaixo temos “$(“#button_busca”).click(function () {” que vai associar ao id button_busca uma ação quando ele for clicado.

Usamos a função “$(“form”).submit(function () { return false; });” para que quando o botão for clicado ele não faça um reload de tela enviando para a action do form.

Criamos uma variável e atribuímos a ela o valor que estiver no campo de input com o id busca (“var busca = $(“#busca”).val();”).

A nossa chamada ajax ocorre na linha 13, onde chamamos a função e passamos os parâmetros:

  • type: tipo de encoding que vai ser enviado para o arquivo.
  • url: caminho completo do arquivo que vai ser requisitado.
  • data: os valores que serão passados, no nosso exemplo estão passando a variável busca, com o valor que pegamos do input com o id busca.
  • success: dizemos que caso tudo funcione ok, execute isto, no nosso caso estamos pegando o retorno da requisição e jogando o mesmo como html na div de id resposta.

Segue ainda o código php:

<?php
       echo "Resultado da Consulta aqui: $_POST[busca]";
?>

Fonte: Rafael Cirolini/NerdHead

Tags | , , , , , ,

12

ago
2011

Sem Comentários

Em Blog

Por Allison

WaveMaker: Ferramenta Java RAD para aplicações Web

Em 12, ago 2011 | Sem Comentários | Em Blog | Por Allison

WaveMaker é uma (IDE) gráfica, baseada em navegador, com um ambiente de desenvolvimento integrado . É uma ferramenta Java baseado no desenvolvimento rápido de aplicatições (RAD), que lhe permite construir aplicações Web sem escrever nenhum código, ou seja, por apenas arrastando e soltando widgets na tela. Por isso é melhor para os usuários que não sabem muito sobre programação, mas querem construir rapidamente aplicações web.

WaveMaker é de fonte aberta, um verdadeiro estúdio visual de desenvolvimento de arrastar e soltar, que é executado em um browser e gera aplicações Java padrão para a implantação. As aplicações geradas pelo WaveMaker executam do lado do cliente usando Ajax e a biblioteca Dojo JavaScript para se comunicar com o código do servidor, escrito em Spring e Hibernate. Ele executa banco de dados de engenharia reversa para criar a aplicação do banco de dados fornecido. O WaveMaker tem suporte embutido para HSQLDB, mas você pode usar uma variedade de bases de dados (incluindo MySQL, PostgreSQL, Oracle, etc) para construir sua aplicação. Banco de dados de engenharia reversa é uma das maneiras de criar o aplicativo, mas não é o único. Você também pode usar serviços da Web, Twitter, RSS, Youtube, etc.

WaveMaker vem em dois tipos – Versão Comunidade Open Source e versão Enterprise. Versão Enterprise é uma versão paga que oferece funções corporativas como suporte LDAP, suporte de segurança avançada, suporte Oracle.

Fonte: Wavemarker

Tags | , , , , , , , ,