VRaptor's Ajax

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.

@Remotable

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.

JSON

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.

Cliente

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!