Trabalhando com Bean’s

DWR – DIRECTED WEB REMOTING

Trabalhando com Bean’s - Parte I

Uma das facilidades de se lhe dar com o DWR é a forma como ele trabalha com bean’s, coisas que você antes se preocuparia e muito, agora é simples de se fazer.

Antes de iniciar-mos o artigo vamos esclarecer para o leitor algumas informações.

No inicio do artigo resolvi adotar o DWR 1.1.4 que é a versão estável atualmente do DWR, mas essa versão não daria suporte para alguns dos recursos que queríamos demonstrar, então resolvi utilizar o DWR 2.0 M2, que é a versão ainda em desenvolvimento do DWR, porém das versões Milestone é a mais estável e que utilizo já em alguns projetos em produção, por isso você não terá problemas, pelo menos até agora eu não tive nenhum e ela já está em 4 projetos grandes e já faz algum tempo.

PS1: A versão que está para download no site do DWR atualmente é a versão DWR2.0 RC2 que esta NÃO é indicada no momento pois ainda apresenta alguns problemas e bugs, claro que por motivos óbvios, ela ainda esta em desenvolvimento.

PS2: Vamos utilizar nomes de funções, métodos, parâmetros e variáveis em inglês, pois esse artigo usará o mesmo projeto para a vídeo aula da Java Magazine e para a mesma esse padrão em inglês tem que ser seguido.

Preparando o ambiente

Aproveitando a estrutura dos artigos anteriores e do projeto de algumas vídeo aulas da JavaMagazine vamos aproveitar o mesmo projeto e vamos fazer nesse artigo alguns exemplos de como utilizar e trabalhar com Bean’s com o DWR.

Antes vamos citar algumas diferenças e configurações para se utilizar o DWR2.0 no nosso projeto, mas caso prefira baixe o projeto aqui.

Versão DWR2.0M2 download

Definição do WEB.XML

Você fará uma única alteração no seu web.xml, alterando apenas o Servlet do DWR.

Para versões 1.x.x

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

Listagem 01. Trecho do mapeamento do DWR 1.x.

Para versões 2.x.x

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

Listagem 02. Trecho do mapeamento do DWR 2.x

Definição do DWR.XML

Agora no seu dwr.xml

Para versões 1.x.x

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

Listagem 03. Inicio da declaração do dwr.xml versão 1.x

Para versões 2.x.x

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

Listagem 04. Inicio da declaração do dwr.xml versão 2.x

IDE e ferramentas utilizadas

Vamos utilizar o MyEclipse versão 5.1.1 GA, Aptana e Tomcat 5.5.17

Criando o JSP

Na Listagem 05 temos o nosso JSP(indexBean.jsp), será um JSP simples que no decorrer do artigo vamos incrementando novas funcionalidades.

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<html>

<head>

<title>DWR Working with bean</title>

<!— Import do FaçadeAjax -->

<!— Import do DWREngine -->

<!— Import do DWRUtil -->

<!— Import do arquivo JS que será utilizado para os exemplos -->

</head>

<body>

</body>

</html>

Listagem 05. JSP

Criaremos um arquivo JS(JavaScript) chamado formBeans.js é nele que iremos trabalhar os exemplos, e na Listagem 05 fizemos o import do mesmo.

Preparando o FacadeAjax e os Bean’s JAVA

BeanPeople e BeanPeopleCharacteristics

Para demonstrar a real funcionalidade deste artigo vamos criar Beans Java para demonstrarmos como ele trabalha do JS para o Java e suas facilidades.

BeanPeople

private int id = 0;

private String name = "";

private String telephone = "";

private String address = "";

private BeanPeopleCharacteristics peopleCharacteristics = null;

private List<BeanPeopleCharacteristics> listPeopleCharacteristics = new ArrayList<BeanPeopleCharacteristics>();

public String getXXX()...

public void setXXX(XXX)...

...

Listagem 06. BeanPeople com seus gets e sets

BeanPeopleCharacteristics

private int idCharacteristics = 0;

private String characteristics = "";

public String getXXX()...

public void setXXX(XXX)...

...

Listagem 07. BeanPeopleCharacteristics com seus gets e sets

Métodos para utilizar os Beans no JAVA.

Vamos utilizar dois métodos para trabalharmos com os Beans que estamos criando no JS e veremos como o DWR faz esse parse.

Classe FacadeAjax

public BeanPeople setBean(BeanPeople beanPeople){

System.out.println("Bean");

System.out.println(beanPeople.getId());

System.out.println(beanPeople.getName());

System.out.println(beanPeople.getTelephone());

System.out.println(beanPeople.getAddress());

return beanPeople;

}

...

Listagem 08. Método setBean.

Na Listagem 08 vimos um exemplo de como receber esse bean na camada JAVA, como podem ver é um método simples que recebe como parâmetro um BeanPeople e apenas dá um System.out.println() em cada propriedade.

public BeanPeople setBeanList(BeanPeople beanPeople){

System.out.println("Bean");

System.out.println(beanPeople.getId());

System.out.println(beanPeople.getName());

System.out.println(beanPeople.getTelephone());

System.out.println(beanPeople.getAddress());

List<BeanPeopleCharacteristics> list = beanPeople.getListPeopleCharacteristics();

for(int i=0;i<list.size();i++){

System.out.println(list.get(i).getCharacteristics());

}

return beanPeople;

}

...

Listagem 09. Método setBeanList.

Na Listagem 09 vimos um exemplo bem semelhante ao da Listagem 08 e claro poderíamos ter utilizado o mesmo, mas para efeito de teste e explicação eu criei outro método que faz a mesma coisa da Listagem 08, só que agora eu executo um loop no List de Beans que é uma propriedade do BeanPeople

Mapeamento dwr.xml

Agora vamos mapear o FacadeAjax, não vamos entrar em detalhes do mapeamento pois o mesmo já foi explicado no artigo DWR – Directed Web Remoting – Parte I.I.

Dwr.xml

<dwr>

<allow>

</create>

</allow>

</dwr>

Listagem 10. DWR.xml mapeando os Beans e a Classe FacadeAjax

Iniciando os Exemplos

Iniciaremos com exemplos simples e vamos aumentando o nível no decorrer do artigo. Vamos exemplificar as principais maneiras de se trabalhar com um bean, e algumas facilidades, lembrando que vamos focar sempre de como trabalhar com Beans no JS para o Java.

A versão 1.1.4 do DWR trabalha perfeitamente e sem problemas com Bean’s e list de Beans do Java para o JS, porém tem algumas limitações do JS para o Java, por isso a escolha da versão 2.0 M2.

Criando um Simples Bean no JavaScript

Primeiramente vamos saber como criar um Bean no JavaScript para que ao passar para o java esse mesmo “popule” o “real” bean.

Para você criar um bean e o DWR “enxergar” o mesmo no java e fazer a conversão, você precisa seguir um “padrão”, veja Listagem 11.

var bean = {

id:1,

name:"Handerson Frota",

telephone:"3333333",

address:"Mr Hull"

}

Listagem 11. BeanPeople sendo criado no JS.

Observe que as propriedades do nosso beanJS(vamos chama-lo assim) são AS MESMAS do nosso beanJava, quando você utiliza o DWR para enviar esse beanJS para a sua classe java e essa mesma espera um Bean que possui as mesmas propriedades ele faz um parse dos valores e “popula” o beanJava.

E para dar um “get” nos valores do Bean é mais simples ainda.

bean.id;

bean.name;

bean.telephone;

bean.address;

Listagem 12. Pegando os valores do beanJS dentro do JavaScript.

Vamos ao um exemplo mais prático.

Criemos a seguinte função javascript no nosso formBean.js. Ver Listagem 13 e Listagem 14.

function setBean(){

var bean = {

id:1,

name:"Handerson Frota",

telephone:"3333333",

address:"Mr Hull"

}

FacadeAjax.setBean(renderBean, bean);

}

Listagem 13. Função setBean que cria um beanJS e envia o mesmo para um método da classe java(setBean ver Listagem 08 ).

function renderBean(bean){

DWRUtil.setValue("renderSetBean", "Id:" + bean.id + "<br>" + "Name: " + bean.name + "<br>" +

"Telephone: " + bean.telephone + "<br>" + "Address: " + bean.address + "<br>");

}

Listagem 14. Função que “renderiza” o retorno do método setBean(ver Listagem 08 ) e monta o resultado na tela.

Na Listagem 14 o parâmetro do retorno será um BeanJava “populado” por um BeanJS.

Agora vamos criar a chamada para executar essa função e o div que vai renderizar o resultado. Ver Listagem 15.

Method <a href="javascript:setBean()">setBean()</a>

Listagem 15. Chamada para a função setBean(ver Listagem 13) do JS

O resultado da execução desta operação esta logo abaixo. Ver Figura 01 e Figura 02.

Figura 01.

Figura 02.

Imagine a seguinte situação: Você tem um formulário e quer popular o mesmo com um bean que esta vindo de um JS qualquer ou do DWR, não importa, e fazer isso com apenas uma linha como você faria ?

Simples, veja Listagem 16 a 18.

Method <a href="javascript:setBeanForm()">setBeanForm()</a>

<table>

<tr>

<td>

Id: <input type="text" name="id" id="id" value=""/><br>

Name: <input type="text" name="name" id="name" value=""/><br>

Telephone: <input type="text" name="telephone" id="telephone" value=""/><br>

Address: <input type="text" name="address" id="address" value=""/><br>

</td>

</tr>

</table>

</form>

Listagem 16. Formulário criado para o nosso exemplo.

Na Listagem 16 observe que criamos um formulário simples e básico, a única coisa que devemos nos atentar é para o ID de cada INPUT, pois é com ele que o DWR vai se identificar para preencher os valores respectivos. Claro que o nome dos ID’s tem que ser o mesmo do seu beanJS e beanJava.

Vamos agora criar a função que irá preencher esses dados no formulário.

function setBeanForm(){

var bean = {

id:2,

name:"Handerson Frota",

telephone:"3333333",

address:"Mr Hull"

}

FacadeAjax.setBean(renderBeanForm, bean);

}

Listagem 17. Função setBeanForm que cria um beanJS e envia o mesmo para um método da classe java(setBean ver Listagem 08 ).

function renderBeanForm(bean){

DWRUtil.setValues(bean);

}

Listagem 18. Função que “renderiza” o retorno do método setBean(ver Listagem 08 ) só que agora utilizamos a função DWRUtil.setValues().

Na Listagem 17 é basicamente é a mesma função que usamos anteriormente, Listagem 13, com a diferença que agora a função de retorno(Listagem 18) ao invés de pegar propriedade por propriedade utiliza o DWRUtil.setValues() para “renderizar” automaticamente os valores, essa função é muito útil e simples de utilizar, vamos entende-la melhor.

DWRUtil.setValues();

Essa função vai receber como parâmetro: propriedades ou beans.

Quando você utilizar essa propriedade como assim foi feito na Listagem 18 a mesma vai percorrer na página procurando pelos ID’s os nomes dessas propriedades e colocar os valores respectivos. Ver resultado nas figuras: 03 e 04.

Figura 03.

Figura 04.

Por enquanto paramos aqui, veremos na segunda parte exemplos mais avançados.

Obrigado e Boa Sorte.

Até o próximo artigo.

Handerson Frota

(handersonbf@gmail.com).

Trabalhando com Bean’s - Parte I

Uma das facilidades de se lhe dar com o DWR é a forma como ele trabalha com bean’s, coisas que você antes se preocuparia e muito, agora é simples de se fazer.

Artigos relacionados