DWR – Directed Web Remoting
Trabalhando com Bean’s - Parte II
Nesta segunda parte vamos dar continuidade aos exemplos.
(Trabalhando com Bean’s - Parte I)
Vamos agora utilizar o DWRUtil.getValues() para pegar os valores de um formulário. Imagine que você tem um formulário de “N” campos e você quer enviar esses valores do seu formulário para a sua camada de negócio, um cadastro, por exemplo, veja como é simples.
Adicionamos um botão no formulário, ver Listagem 19.
<input type="button" name="submit" value="Method SendBeanForm" onclick="sendBeanForm()"/>
Listagem 19. Botão que executa o sendBeanForm(ver Listagem 20).
Função JS que vai pegar esses valores do formulário e enviar para a classe java, ver Listagem 20.
function sendBeanForm(){
var bean = DWRUtil.getValues("formBean");
FacadeAjax.setBean(renderBean, bean);
}
Listagem 20. Função que utiliza o DWRUtil.getValues(“nomeDoFormulario”) para enviar um BeanPeople já “populado” para a método setBean(ver Listagem 08 ) e como retorno chama a função renderBean(ver Listagem 14 ) para renderizar o resultado.
DWRUtil.getValues();
Essa função vai receber como parâmetro: nome do formulário.
Com uma única linha, DWRUtil.getValues(), você consegue pegar todos os campos do formulário que possuem ID. Se os id’s forem iguais as propriedades de um determinado Bean, por exemplo o BeanPeople(ver Listagem 06) então automaticamente quando você passar esses valores para o DWR ele irá fazer o parse e você terá um Bean populado com apenas uma única linha.Ver Listagem 21.
var bean = DWRUtil.getValues("formBean");
Listagem 21. Pegando valores de um formulário e criando um beanJS para ser enviado para o java, "populando” um beanJava correspondente.
Veja nas figuras 05 e 06 o resultado deste exemplo.
Figura 05.
Figura 06.
Exemplos mais Avançados
Bem ate agora vimos como criar, enviar, pegar e setar(DWRUtil.getValues(), DWRUtil.setValues()) valores em um bean. Mais e um bean que possui uma propriedade que é outro bean ?
Na Listagem 07 vimos o BeanPeopleCharacteristics que é um Bean que identifica as características de uma pessoa(BeanPeople ver Listagem 06).
Na Listagem 06 temos o BeanPeople(ver Listagem 06) que possui uma propriedade peopleCharacteristics que é do tipo BeanPeopleCharacteristics.(Ver Listagem 06 e Listagem 22)
private BeanPeopleCharacteristics peopleCharacteristics = null;
Listagem 22. Trecho do BeanPeople(Ver Listagem 06) onde se define uma propriedade do tipo BeanPeopleCharacteristics(Ver Listagem 07) .
Para executarmos nosso exemplo vamos adicionar um trecho logo abaixo da nossa tabela do nosso formulário. Ver Listagem 23.
<br>
<br>
Method <a href="javascript:setBeanCharacteristics()">setBeanCharacteristics()</a>
<div id="renderSetBeanCharacteristics"></div>
Listagem 23. Trecho no JPS para a chamada da função setBeanCharacteristics(Ver Listagem 24)definindo um div onde será renderizado o resultado.
function setBeanCharacteristics(){
var bean = {
id:1,
name:"Handerson Frota",
telephone:"3333333",
address:"Mr Hull",
peopleCharacteristics:{idCharacteristics:2,characteristics:"Black"}
}
FacadeAjax.setBean(renderSetBeanCharacteristics, bean);
}
Listagem 24. Função que cria um beanJS de BeanPeople(ver Listagem 06) e adiciona um segundo beanJs agora de características(ver Listagem 07) na propriedade peopleCharacteristics.
function renderSetBeanCharacteristics(bean){
DWRUtil.setValue("renderSetBeanCharacteristics", "Id:" + bean.id + "<br>" + "Name: " + bean.name + "<br>" +
"Telephone: " + bean.telephone + "<br>" + "Address: " + bean.address + "<br>" +
"<strong>BeanCharacteristicsId: " + bean.peopleCharacteristics.idCharacteristics + "<br>" +
"BeanCharacteristics: " + bean.peopleCharacteristics.characteristics + "</strong>");
}
Listagem 25. Função que renderiza o resultado do método setBean(ver Listagem 08).
Vimos que na Listagem 24 dizemos que a propriedade peopleCharacteristics recebe um bean, claro que com as mesmas propriedades do BeanPeopleCharacteristics(Ver Listagem 07). Poderíamos fazer também da seguinte maneira obtendo o mesmo resultado (ver Listagem 26).
function setBeanCharacteristics(){
var beanCharacteristics = {
idCharacteristics:2,
characteristics:"Black"
}
var bean = {
id:1,
name:"Handerson Frota",
telephone:"3333333",
address:"Mr Hull",
peopleCharacteristics:beanCharacteristics
}
FacadeAjax.setBean(renderSetBeanCharacteristics, bean);
}
Listagem 26. Uma segunda forma de fazer o que a Listagem 24 fez.
Veja agora o resultado deste exemplo nas figuras 07 e 08.
Figura 07.
Figura 08.
Vamos ver a seguir o mesmo exemplo, porém pegando os valores de um formulário, que é o que mais interessante mesmo.
Adicionamos no JSP o seguinte trecho abaixo em negrito.
CharacteristId: <input type="text" name="idCharacteristics" id="idCharacteristics" value=""/>
<br>
Characterist: <input type="text" name="characteristics" id="characteristics" value=""/>
<br>
<input type="button" name="submit" value="Method SendBeanForm" onclick="sendBeanForm()"/>
<br>
<input type="button" name="submit" value="Method sendBeanFormCharacteristics" onclick="sendBeanFormCharacteristics()"/><br>
Listagem 27. Trecho em negrito adicionado no JSP que contém o formulário de exemplo. Adicionando mais dois campos input e um botão.
function sendBeanFormCharacteristics(){
var bean = DWRUtil.getValues("formBean");
var beanCharacteristics = {
idCharacteristics:bean.idCharacteristics,
characteristics:bean.characteristics
};
bean.peopleCharacteristics = beanCharacteristics;
FacadeAjax.setBean(renderSetBeanCharacteristics, bean);
}
Listagem 28. Função sendBeanFormCharacteristics que “popula” um bean a partir dos dados de um formulário e renderiza na tela com o método renderSetBeanCharacteristics(Ver Listagem 25)
Na Listagem 28 estamos novamente utilizando o DWRUtil.getValues() para recuperar os dados do formulário e coloca-los em um beanJS, mas porque então o trecho da Listagem 29 ?
var beanCharacteristics = {
idCharacteristics:bean.idCharacteristics,
characteristics:bean.characteristics
};
bean.peopleCharacteristics = beanCharacteristics;
Listagem 29. Trecho que recupera os dados do formulário e individualmente os dados referentes ao BeanPeopleCharacteristics(ver Listagem 07)
Nas versões 1.x o DWR não consegue como já foi dito trabalhar adequadamente com um list de beans e beans aninhados, já na versão 2.0M2 ele trabalha sem problemas, mas ainda não esta perfeito, pois ainda possui determinadas funcionalidade que ele ainda não implementa, no nosso caso popular automaticamente um bean aninhado através de um formulário, assim como ele faz com um simples bean.
Mas quando o bean possui uma propriedade que é outro bean, ele ainda não converte automaticamente com o getValues() para o bean correspondente, fazendo com que você seja obrigado a criar “na mão” este bean(ver Listagem 28 e Listagem 29 ) e logo após adicionar esse beanJS na propriedade correspondente e assim o DWR consegue fazer o parse corretamente.
Porem já na versão RC2 essa funcionalidade já esta sendo implementada, mas como a versão RCX ainda possui vários bug’s, eu não vou comentar e ou citar exemplos, pois a mesma ainda esta em fase beta teste e a maneira que esta atualmente poderá ser alterada.
O resultado do exemplo anterior pode ser visto nas figuras 09 e 10.
Figura 09.
Figura 10.
Para finalizar nosso artigo vamos agora demonstrar como fazer o mesmo processo dos exemplos anteriores, só que agora utilizaremos um List de Beans.
Na Listagem 06 temos o BeanPeople(ver Listagem 06) que possui uma propriedade listPeopleCharacteristics que é do tipo List<BeanPeopleCharacteristics>, ou seja, um list de beanPeopleCharacteristics.(Ver Listagem 06 e 30)
private List<BeanPeopleCharacteristics> listPeopleCharacteristics = new ArrayList<BeanPeopleCharacteristics>();
Listagem 30. Trecho do BeanPeople(Ver Listagem 06) onde se define uma propriedade do tipo List<BeanPeopleCharacteristics>(Ver Listagem 06 e 07) .
No nosso JSP vamos agora fazer algumas mudanças.
Vamos adicionar o trecho de código da Listagem 22 na Listagem 23
Method <a href="javascript:setBeanCharacteristics()">setBeanCharacteristics()</a>
<div id="renderSetBeanCharacteristics"></div>
<ol id="olCharacteristics"></ol>
Listagem 31. Adicionando OL para lista numeradas.
Vamos utilizar na Listagem 31 uma lista numerada, e utilizar outras funcionalidades do DWR, que é o DWRUtil.addOptions() e DWRUtil.removeAllOptions(), esses últimos não vamos entrar em detalhes pois um artigo já foi elaborado para este assunto e esta no link a seguir: DWRUtil.addOptions().
Logo após a Listagem 31 vamos adicionar o trecho de código da Listagem 32.
<br>
<br>
<input type="checkbox" id="type" name="types" value="Black"/>Black
<input type="checkbox" id="type" name="types" value="White"/>White
<input type="checkbox" id="type" name="types" value="Indian"/>Indian
<input type="checkbox" id="type" name="types" value="Mexican"/>Mexican
<br>
<input type="button" name="submit" value="Method sendBeanList" onclick="sendBeanList()"/><br>
Listagem 32. Trecho referente ao conjunto de Características que o usuário poderá selecionar, sendo um ou várias características.
DWRUtil.removeAllOptions("olCharacteristics");
DWRUtil.addOptions("olCharacteristics", bean.listPeopleCharacteristics, "characteristics");
Listagem 33. Trecho adicionado ao código da Listagem 25 para ser possível montar um list de beans.
function sendBeanList(){
1.var bean = DWRUtil.getValues("formBean");
2.var beanCharacteristics = {
idCharacteristics:bean.idCharacteristics,
characteristics:bean.characteristics
};
3.bean.peopleCharacteristics = beanCharacteristics;
4.var array = document.getElementsByName("types");
5.var listBean = [];
var x = 0;
6.for(var i=0;i<array.length;i++){
7.if(array[i].checked){
8.var beanCheck = {
9.characteristics:array[i].value
};
10.listBean[x] = beanCheck;
x++;
}
}
11.bean.listPeopleCharacteristics = listBean;
12.FacadeAjax.setBeanList(bean,renderSetBeanCharacteristics);
}
Listagem 34. Função que recupera os valores de um formulário e popula um bean especifico, enviando o retorno para a função renderSetBeanCharacteristics (ver Listagem 25 e Listagem 33).
- Recuperando todos os dados do formulário e adicionando no beanJS.
- Criando “na mão” um beanJS para BeanPeopleCharacteristics, já que nessa versão o getValues não consegue já preencher automático o bean com uma propriedade que é um bean ou um list de beans.
- Após a criação deste bean na linha 2, e com os valores já preenchidos, esse bean é adicionado na propriedade que é um BeanPeopleCharacteristics.
- Recupera-se os elementos com o nome: “types”, que na verdade são checkbox e adicionados em um array.
- É criando um Array que será adicionado a propriedade que é um list de beans
- Inicia-se um For para percorrer o array de checkbox
- É verificado se o checkbox está “ticado”(selecionado)
- É inicializado um bean do tipo BeanPeopleCharacteristics
- O valor que foi selecionado no checkbox é adicionado na propriedade do beanJS criando na linha 8.
- Esse beanJS gerado nas linhas de 8 a 9 é adicionado dentro do listBean, gerado na linha 5.
- Por fim, esse listBean que possui vários beanJS de BeanPeopleCharacteristics é adicionado a propriedade listPeopleCharacteristics do BeanPeople.
O resultado deste último exemplo você confere nas figuras 11 e 12.
Figura 11.
Figura 12.
Conclusão
A maneira de trabalhar com um bean no JAVA e no JavaScript(DWR ou javascript puro) são muito parecidas, e intuitivas, TODOS os exemplos que utilizam o FacadeAjax.metodo(), passam o beanJS criado para o java, com os system.out.println() você poderá ver no console os valores do bean no lado Java e poder comprovar que o bean que você criou no JS popula o bean que você tem no Java.
A simplicidade, facilidade, usabilidade e robustez que você adquire trabalhando com bean no DWR é notável. Temos várias possibilidades de uso, fica a cargo da sua necessidade.
Você viu também como é simples pegar N campos de um formulário e como é simples popular esses mesmos N campos, utilizando o getValues e setValues, lembrando que para utilizar o setValues e getValues você não é obrigado a utilizar um beanJava, você tem que entender que ele é um objeto JavaScript que contem propriedades e que quando esse objeto vai para o Java através do DWR o mesmo faz os parses necessários para “converte-lo” em um BeanJava.
Espero que eu tenha conseguido passar uma visão geral e mais prática de algumas maneiras de se usar um bean com o DWR e que você tenha visto e entendido como é simples e fácil de trabalhar.
A versão FINAL do DWR 2.0 promete muita coisa boa, muito mais integração, simplicidade e facilidade de uso, vale a pena ficar no aguardo e enquanto a versão 2.0 não sai, ficamos com a versão 2.0M2 que funciona sem problemas.
Para baixar o projeto deste artigo e sql do banco clique no link abaixo.
OBS: As informações sobre a tabela do banco esta na pasta BD dentro do projeto, caso queria utilizar dados do banco.
Baixar projeto aqui.
Obrigado e Boa Sorte.
Até o próximo artigo.
Handerson Frota
(handersonbf@gmail.com)
