Desde da versão 2.2.3 VRaptor oferece ajax para as suas lógicas. Isso significa que você pode acessar as lógicas usando javascript.
Para usar ajax com suas lógicas você deve marcar elas como @Remotable. Por exemplo:
public class UserLogic { private List<User> users; @Remotable public void list() throws ParseException { users = new ArrayList<User>(); users.add(new User(1, "Paulo", new SimpleDateFormat("dd/MM/yyyy HH:mm").parse("11/10/1979 14:22"))); users.add(new User(2, "Guilherme", new SimpleDateFormat("dd/MM/yyyy HH:mm").parse("10/03/1982 20:11"))); } public List<User> getUsers() { return users; } }
e a classe de modelo:
public class User { private Integer id; private String name; private Date birthday; //getter and setters public User(Integer id, String name, Date birthday) { this.id = id; this.name = name; this.birthday = birthday; } }
Agora você pode usar o URL user.list.ajax.logic para suas chamadas ajax.
VRaptor usa JSON (JavaScript Object Notation) como formato para trocar dados entre servidor e cliente. JSON é um subset do javascript, funciona em qualquer browser comum e é padrão de muitos frameworks javascript.
Se você chamar o URL user.list.ajax.logic, você receberá uma lista de usuários no formato JSON:
{"users":[{"birthday":308510520000,"id":1,"name":"Paulo"},{"birthday":384649860000,"id":2,"name":"Guilherme"}]}
Objetos do tipo Date e Calendar são retornados em milisegundos.
VRaptor já é configurado para ajax. Agora vamos criar o cliente. Existem varios opções como fazer a chamada ajax .... Eu mostrarei usando o javascript framework prototype.
Vamos importar o arquivo prototype.js num jsp:
<script type="text/javascript" src="prototype.js"></script>
... e definir a função ajaxRequest(). Nesse método criaremos um new Ajax.Request(). Isso é uma das funções do prototype.
function ajaxRequest() { var url = 'user.list.ajax.logic'; var pars = ''; //create the ajax request var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse } ); //outras coisas :) }
O parâmetro onComplete define o nome da função "callback" (showResponse). Ela será automaticamente chamada quando a requisição ajax terminar.
Nesse método "callback" vamos criar um objeto json com a resposta. O método recebe o parâmetro data. Nós teremos que chamar data.responseText e eval para avaliar os dados e criar um objeto json válido.
Como já foi mencionado, objetos do tipo Date e Calendar são representados em milisegundos. Você também pode criar um objeto javascript do tipo Date usando milisegundos. or
Em javascript:
new Date(valor_em_milisegundos)
O que falta é formatar o objeto. Para formatação usamos aqui uma função do Matt Krusse - javascript date functions.
Para criar a data formatada temos que chamar a função formatDate e passar o novo objeto javascript Date e a formato desejado. A função retorna uma string formatada:
formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm")
O resto é javascript comum, criando os usuários jsonObject.users e atualizando o dom:
//ajax callback method function showResponse(data) { //get the jsonObject var jsonObject = eval('(' + data.responseText + ')'); //get the user array from the json object var users = jsonObject.users; //update html var html = ""; for(i=0;i<users.length;i++) { html += users[i].name + " - " + formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm") + "<br/>"; } var div = document.getElementById("ajaxResultDiv"); div.innerHTML = html; }
O html completo poderia ser:
<html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="date.js"></script> <script> function ajaxRequest() { var url = 'user.list.ajax.logic'; var pars = ''; //create the ajax request var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse } ); } //ajax callback method function showResponse(data) { //get the jsonObject var jsonObject = eval('(' + data.responseText + ')'); //get the user array from the json object var users = jsonObject.users; //update html var html = ""; for(i=0;i<users.length;i++) { html += users[i].name + " - " + formatDate(new Date(users[i].birthday),"dd/MM/yyyy HH:mm") + "<br/>"; } var div = document.getElementById("ajaxResultDiv"); div.innerHTML = html; } </script> </head> <body > <input type="button" value="vraptor's easy ajax" name="click" onclick="javascript:ajaxRequest();" > <br/> <div id="ajaxResultDiv"></div> </body > </html>
Coloque o arquivo html no seu projeto web ... Pronto!