hfdwrsimbolo.jpg


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>

      <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>

      <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>

      <meta http-equiv="pragma" content="no-cache">

      <meta http-equiv="cache-control" content="no-cache">

      <meta http-equiv="expires" content="0">   

      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

      <meta http-equiv="description" content="This is my page">

 

<!— Import do FaçadeAjax -->

<script type='text/javascript' src='/DWRProject/dwr/interface/FacadeAjax.js'></script>

 

<!— Import do DWREngine -->

<script type='text/javascript' src='/DWRProject/dwr/engine.js'></script>

 

<!— Import do DWRUtil -->

<script type='text/javascript' src='/DWRProject/dwr/util.js'></script>

 

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

<script type='text/javascript' src='js/formBeans.js'></script>

 

  </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 creator="new" javascript="FacadeAjax" scope="request">

            <param name="class" value="com.dwr.facade.FacadeAjax" />

      </create>

     

      <convert converter="bean" match="com.dwr.bean.BeanPeople" />

      <convert converter="bean" match="com.dwr.bean.BeanPeopleCharacteristics" />

  </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>

<div id="renderSetBean"></div>

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.

 

hftbpart1fig01.jpg 

Figura 01.

 

hftbpart1fig02.jpg 

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>

<form action="" method="get" id="formBean" name="formBean">

<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.

 

hftbpart1fig03.jpg 

Figura 03.

 

hftbpart1fig04.jpg 

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).