DWR: Trabalhando com objetos

Olá pessoal! 

Em primeiro momento, agradeço aqueles que têm acompanhado o blog e ao feedback positivo.

Dando continuidade do estudo do DWR Direct Web Remoting, demonstrarei o uso de objetos Java no código JavaScript. Para ilustrar o exemplo, utilizarei a estrutura do projeto iniciado no primeiro post de DWR (http://serjava.blogspot.com/2011/10/dwr-primeio-projeto.html), simulando o cadastro de Funcionários.

O primeiro passo é criarmos um objeto que contenha as características do funcionário, para tanto, utilizarei o padrão DTO – Data Transfer Object, criando então FuncionarioDTO:

Esta classe deverá conter os seguintes atributos:

package br.com.serjava.dto;

public class FuncionarioDTO {

 private Integer codigo;
 
 private String nome;
 
 private String cargo;
 
 private Double salario;

//getters and setters

O próximo passo, é mapear esta classe no arquivo dwr.xml, para isso basta adicionarmos a sequinte linha no referido arquivo:

<convert converter="bean" match="br.com.serjava.dto.FuncionarioDTO" javascript="Funcionario"/>

Uma vez tendo mapeado tal classe, permitimos que esta seja reconhecida dentro do context do DWR, no atributo javascript, informamos o nome de Funcionario, este será o nome para o acesso via JavaScript.

Criaremos a classe para tratar as chamadas Ajax referentes ao funcionário, chamaremos de FuncionarioAjax, conforme imagem:

Criaremos dois métodos nesta classe, um que será responsável pelo cadastro dos funcionários, e outro que deverá obter os funcionários cadastrados. Observe que foi criada uma lista de funcionários estática, para armazenar os funcionários. Evidentemente que esta, num ambiente real, deverá ser substituída pelo repositório de dados.

package br.com.serjava.dwr;

import java.util.ArrayList;
import java.util.List;

import br.com.serjava.dto.FuncionarioDTO;

public class FuncionarioAjax {

 private static List<FuncionarioDTO> listaFuncionarios = new ArrayList<FuncionarioDTO>();
 
 public void cadastrarFuncionario(FuncionarioDTO funcionarioDTO) {
  
  System.out.println("funcionariod: " + funcionarioDTO.toString());
  listaFuncionarios.add(funcionarioDTO);
 }
 
 public List<FuncionarioDTO> obterFuncionarios() {
    
  return listaFuncionarios;
 }
}

Devemos mapear a classe FuncionarioAjax no arquivo dwr.xml, de modo a poder ser acessada via função JavaScript, para tanto:

<create creator="new" javascript="FuncionarioAjax">

    <param name="class" value="br.com.serjava.dwr.FuncionarioAjax"/>

</create>

Criaremos uma página jsp para conter o cadastro destes funcionários, esta ficará na raiz de WebContent. 

Depois de criada a página, antes de mais nada, devemos adicionar os imports para uso posterior, o que inclui, as funções do DWR e a classe mapeada para receber as solicitações ajax, então deve-se adicionar, dentro da tag head:

Criaremos agora o esboço para o formulário de cadastro, dentro da tag body:

    
Código
    

    
Nome
    

    
Cargo
    

    
Salário
    

Observe que o botão cadastrar chama uma função javascript, esta será responsável por criar o objeto JavaScript que representa nosso objeto FuncionarioDTO, esta função foi implementada do seguinte modo, dentro da tag head:

function cadastrarFuncionario() {
   
   var funcionario = {
    codigo: dwr.util.getValue('idCodigo'),
    nome: dwr.util.getValue('idNome'),
    cargo: dwr.util.getValue('idCargo'),
    salario: dwr.util.getValue('idSalario')
   };
   
   FuncionarioAjax.cadastrarFuncionario(funcionario, {
    callback:function() {
     alert('funcionário cadastrado');
    }
   });
  }

Observe que a variável criada como funciona'rio, tem seus atributos nomeado de forma idêntica aqueles da classe FuncionarioDTO, usamos a função dwr.util.getValue, para obter o value de um elemento informado seu id, observe que os valores informados correspondem com os ids denominados para cada input; ela é similar a função document.getElementById.

Como pode ser observado, atribuímos os valores correspondentes a cada atributo do objeto funcionario, em seguida chamamos a função cadastrarFuncionario;

Para melhorar nosso modelo, a cada funcionário cadastrado, será exibido numa tabela abaixo do formulário de cadastro, para isso criaremos uma tabela do seguinte modo, abaixo do referido formulários:

Observe que não foi feita nenhuma implementação para esta tabela.

Criaremos uma função javaScript responsável por obter os dados para popular a tabela:

function carregarTabela() {
   
   var cellsFuncionario = [
                  function(funcionario) {return funcionario.codigo;},
                  function(funcionario) {return funcionario.nome;},
                  function(funcionario) {return funcionario.cargo;},
                  function(funcionario) {return funcionario.salario;},
                  ];
   
   FuncionarioAjax.obterFuncionarios({
    callback:function(listaFuncionarios) {
     dwr.util.removeAllRows('tableFuncionarios');
     
     dwr.util.addRows( "tableFuncionarios", listaFuncionarios, cellsFuncionario, {escapeHtml:false});
    }
   });
  }

Para que depois de cadastrado um funcionário a tabela seja atualizada, na função de cadastro, onde verifica-se o alert, remova-o e adicione uma chamada a esta função, devendo ficar do seguinte modo:

function cadastrarFuncionario() {
   
   var funcionario = {
    codigo: dwr.util.getValue('idCodigo'),
    nome: dwr.util.getValue('idNome'),
    cargo: dwr.util.getValue('idCargo'),
    salario: dwr.util.getValue('idSalario')
   };
   
   FuncionarioAjax.cadastrarFuncionario(funcionario, {
    callback:function() {
     carregarTabela();
    }
   });
  }

Por fim, o resultado esperado, depois de uma inclusão deverá ser similar a:

Espero que tenham gostado! Em breve postarei mais especificidade e recursos sobre o DWR.