DWR – Directed Web Remoting – Parte II.I

Neste artigo vamos abordar algumas funcionalidades um pouco mais avançadas do DWR.

DWR – Directed Web Remoting – Parte II.I

 

Dando continuidade ao nosso artigo vamos iniciar a segunda parte. Neste artigo vamos abordar algumas funcionalidades um pouco mais avançadas do DWR.

Vamos também utilizar alguns exemplos com acesso ao banco de dados (MySql).

 

Parte 2 – Combos e Grids(addOptions(), addRows())

 

Introdução

 

Vimos como instalar, configurar e rodar o DWR, agora vamos ver como é feito um preenchimento de uma combo utilizando o DWR.

 

Vamos utilizar um banco de dados(MySql), temos as seguintes tabelas de exemplo como foi citado no artigo anterior. Vemos agora a estrutura que iremos utilizar no MySql.

 

Nome do Banco: test

 

Tabela: pessoa

Colunas:

Tipo:

Id

integer

Nome

varchar

Endereço

varchar

Cidade

varchar

Telefone

varchar

 

Tabela: usuário

Colunas:

Tipo:

Id

int

Login

varchar

Senha

varchar

 

Sql para gerar o banco:

http://www.milfont.org/blog/wp-content/upload/artigoDWR/BancoArtigoDWR0061107_1509.sql

Agora o próximo passo será criar uma simples classe para conexão com o banco, chamaremos essa classe de ConectaBanco.java localizada no pacote com.celulajava.palestradwr.dao

 

Precisaremos também de algumas classes DAO’s para executarem os sql’s. Então criaremos os seguintes DAO’s: DAOPessoa.java e DAOUsuario.java, que também estarão localizadas no pacote DAO.

 

Não vamos muito focar nos DAO’s e nem no banco, apenas saiba que estaremos utilizando um banco de dados para recuperar valores.

 

Bem agora temos nosso ambiente pronto para acessarmos o banco de dados, vamos dar inicio então aos tão esperados exemplos.

 

Parte 2.1 – Combos (addOptions())

 

Criando combos(DWRUtil.addOptions())

 

O DWR tem uma lib chamada util.js, que é nela que se localiza as principais funcionalidades do DWR. Vamos falar agora sobre o addOptions() que tem como finalidade gerar e popular uma comboBox(<select></select>), e/ou uma lista numerada ou de símbolos do html(<ul></ul>, <ol></ol>).

 

Reutilizando a estrutura do nosso projeto anterior vamos criar um jsp chamado combos.jsp, e logo em seguida um link na nossa index.jsp que tenha acesso ao combos.jsp, criaremos também só por motivo didático um novo js, destinado apenas para as combos, vamos chama-lo de combos.js, veja abaixo:

 

Trecho de código na index.jsp.

<br>

<a href=”combos.jsp”>Exemplos de Combos</a>

 

Figura 1. Combo.jsp

 

Observe que os importes das bibliotecas .js são os mesmo, exceto pelo novo importe, que é o do nosso combos.js.

 

Explicando o addOptions();

O addOptions é uma função da biblioteca util.js que tem a finalidade de gerar uma combo dinâmica utilizando o conceito de ájax e que rode em qualquer browser. Com ela você poderá gerar uma combo com dados de um banco, com o formato de arrays, map, list de beans e ainda gerar uma lista numerada.

 

Utilizando o addOptions:

Primeiro entenda a sintaxe de um select.

<select>

      <option value=”valor”>Texto</option>

</select>

 

  1. Array:  Recebe um simples Array com texto e valor.
    1. DWRUtil.addOptions(selectid, array);

 

  1. Array de Objetos (texto da <option> = valor da <option>): Cria a combo a partir de um array de objetos, e definindo que o valor da <option> será o mesmo do texto da <option> do elemento <select>
    1. DWRUtil.addOptions(selectid, arrayObjects, propriedade);
    2. Exemplo de Array de Objetos: List de Beans, List de Maps, Collection etc.
    3. Exemplo da option gerada:

DWRUtil.addOptions(“combo”, listBeans, “nome”);

    <option value=”Handerson”>Handerson</option>

 

  1. Array de Objetos (texto da <option> != valor da <option>): Cria a combo a partir de um array de objetos, definindo que o valor da <option> será diferente do texto da <option> do elemento <select>
    1. DWRUtil.addOptions(selectid, arrayObjects, valorPropriedade, valorTexto);
    2. Exemplo de Array de Objetos: List de Beans, List de Maps, Collection etc
    3. Exemplo da option gerada:

DWRUtil.addOptions(“combo”, listBeans, “id”, “nome”);

<option value=”2”>Handerson</option>

 

  1. Objeto: Gerar a combo a partir de um Objeto qualquer, caso você utilize um Bean(Pessoa) com as seguintes propriedades(cidade, endereço, nome, telefone), ele irá carregar no campo value o valor da propriedade e no texto ele irá colocar o nome da propriedade.
    1. DWRUtil.addOptions(selectid, arrayObjects, valorPropriedade);
    2. Exemplo de Objeto: Beans
    3. Exemplo da option gerada:

DWRUtil.addOptions(“combo”, bean, “nome”);

<option value=”1”>id</option>

<option value=”Handerson”>nome</option>

<option value=”>cidade</option>

<option value=”Rua Francisco”>endereco</option>

<option value=”3444444”>telefone</option>

 

  1. Mapa de Objetos: Gera uma combo a partir de um Map.
    1. DWRUtil.addOptions(selectid, map);
    2. Exemplo de Objeto: Map, Hashtable, HashMap.
    3. Exemplo da option gerada:

DWRUtil.addOptions(“combo”, map);

<option value=”2”>Handerson</option>

 

 

  1. Lista de <ol> ou <ul>:  Gera uma lista numerada ou com símbolo.
    1. DWRUtil.addOptions(ul, list, valorPropriedade);
    2. Exemplo de Objeto: List, Array, List de Beans.
    3. Exemplo da option gerada:

DWRUtil.addOptions(“ul”, listBean,  “nome”);

?  Chirstiano Milfont

?  Handerson Frota

Tag html: <ul id="ul"></ul>

DWRUtil.addOptions(“ol”, listBean,  “nome”);

1. Chirstiano Milfont

2. Handerson Frota

Tag html: <ol id="ol"></ol>

 

Agora para entendermos melhor, vamos visualizar como ficou na nossa camada do JAVA, que é o nosso FacadeAjax e DAO’s, para facilitar a compreensão de como serão utilizado os acessos e chamadas dos nossos métodos, e saberemos também o tipo de retorno e como esta sendo criado para o envio ao nosso JS. Vamos utilizar os seguintes métodos para acessar o banco de dados.

 

FacadeAjax:

/**

* Método que faz um simples select no banco e retorna um list de beans Pessoa.

       *

       * @return listResult - List de Object Bean Pessoa

       *

       * @throws Throwable

       * @throws Exception

       */

      public List selectAllPessoa() throws Throwable, Exception{

            List<Pessoa> listResult = new ArrayList();

           

            listResult = DAOPessoa.selectAllPessoa();

           

            return listResult;

      }

 

/**

* Executa um select na tabela pessoa, mais so retorna um objeto Pessoa.

       *

       * @return pessoa - Object Bean Pessoa.

       * @throws Throwable

       * @throws Exception

       */

      public Pessoa selectPessoa() throws Throwable, Exception{

            List<Pessoa> listResult = new ArrayList();

            Pessoa pessoa = new Pessoa();

           

            listResult = DAOPessoa.selectAllPessoa();

           

            pessoa = listResult.get(0);

           

            return pessoa;

      }

 

/**

* Executa um select na tabela pessoa e retorna um Map com os *valores(id, nome)

       *

       * @return mapResult - Map com os dados do select.

       *

       * @throws Throwable

       * @throws Exception

       */

      public Map selectPessoaMap() throws Throwable, Exception{

            Map mapResult = new HashMap<Pessoa, Pessoa>();

           

            mapResult = DAOPessoa.selectPessoaMap();

           

            return mapResult;

      }

 

 

DAOPessoa:

/**

* Método que faz um simples select no banco e retorna um list de beans Pessoa

       *

       * @return dadosPessoaList List de Object Bean Pessoa

       * */

      public static List selectAllPessoa() throws Throwable, Exception{

            List<Pessoa> dadosPessoaList = new ArrayList();     

 

        PreparedStatement stmt = null;

        ResultSet rs = null;

       

stmt = conecta.getConnection().prepareStatement("select * from pessoa order by nome asc");

     

        rs = stmt.executeQuery();

       

        Pessoa pessoa = null;

        while(rs.next()){

            pessoa = new Pessoa();

           

            String id         = rs.getString("id");

            String nome       = rs.getString("nome");

                  String endereco   = rs.getString("endereco");

                  String cidade     = rs.getString("cidade");

                  String telefone   = rs.getString("telefone");

                 

                  pessoa.setId(id);

                  pessoa.setNome(nome);

                  pessoa.setEndereco(endereco);

                  pessoa.setCidade(cidade);

                  pessoa.setTelefone(telefone);

                 

            dadosPessoaList.add(pessoa);                  

            }

       

        stmt.close();

        rs.close();

        conecta.closeConnection();

       

            return dadosPessoaList;

      }

     

/**

* Executa um select na tabela pessoa e retorna um Map com os valores(id, nome)

       *

       * @return mapResult - Map com os dados do select.

       *

       * @throws Throwable

       * @throws Exception

       */

      public static Map selectPessoaMap() throws Throwable, Exception{

            Map dadosPessoa = new HashMap();  

 

        PreparedStatement stmt = null;

        ResultSet rs = null;

       

stmt = conecta.getConnection().prepareStatement("select * from pessoa order by nome asc");

     

        rs = stmt.executeQuery();

       

        while(rs.next()){

            String id         = rs.getString("id");

            String nome       = rs.getString("nome");

                 

            dadosPessoa.put(id, nome);

            }

       

        stmt.close();

        rs.close();

        conecta.closeConnection();

       

            return dadosPessoa;

      }

 

Como foi visto temos métodos que acessão o banco de dados, métodos simples apenas para  exemplificar.

 

Bem agora que vimos os nossos métodos que iremos utilizar, vejamos os exemplos:

 

Criamos uma função JS para limpar as combos, sendo a mesma genérica, recebendo apenas o nome do select e/ou as tags de lista numerada que você deseja limpar:

 

function cleanAddOptions(local){

      DWRUtil.removeAllOptions(local);

}

 

Vou listar abaixo os exemplos equivalentes a explicação das assinaturas do addOptions(), e neles o respectivo código JSP e JS.

 

Exemplo 1 e 2(Array, Array de Objetos (texto da <option> = valor da <option>)):

 

JSP

<strong>1,2 - DWRUtil.addOptions("combo1_2", listBeans, "nome");</strong><br>

Exemplo combo 1 e 2:

<a href="javascript:carregaCombo1_2()">Carregar</a> /

<a href="javascript:cleanAddOptions('combo1_2')" >Limpar</a>

<select id="combo1_2"></select>

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaCombo1_2(){

      FacadeAjax.selectAllPessoa(montaCombo1_2);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaCombo1_2(listBeans){

      DWRUtil.removeAllOptions("combo1_2");

      DWRUtil.addOptions("combo1_2", listBeans, "nome");

}

 

Exemplo 3 (Array de Objetos (texto da <option> != valor da <option>):):

 

JSP

<strong>3 - DWRUtil.addOptions("combo3", listBeans, "id", "nome");</strong><br>

Exemplo combo 3:

<a href="javascript:carregaCombo3()" >Carregar</a> /

<a href="javascript:cleanAddOptions('combo3')" >Limpar</a>

<select id="combo3"></select>

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaCombo3(){

      FacadeAjax.selectAllPessoa(montaCombo3);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaCombo3(listBeans){

      DWRUtil.removeAllOptions("combo3");

      DWRUtil.addOptions("combo3", listBeans, "id", "nome");

}

 

Exemplo 4(Objeto):

 

JSP

<strong>4 - DWRUtil.addOptions("combo4", bean, "nome");</strong><br>

Exemplo combo 4:

<a href="javascript:carregaCombo4()" >Carregar</a> /

<a href="javascript:cleanAddOptions('combo4')" >Limpar</a>

<select id="combo4"></select>Até o próximo.

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaCombo4(){

      FacadeAjax.selectPessoa(montaCombo4);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaCombo4(bean){

      DWRUtil.removeAllOptions("combo4");

      DWRUtil.addOptions("combo4", bean, "nome");

}

 

Exemplo 5(Mapa de Objetos):

 

JSP

<strong>5 - DWRUtil.addOptions("combo5", maps);</strong><br>

Exemplo combo 5:

<a href="javascript:carregaCombo5()" >Carregar</a> /

<a href="javascript:cleanAddOptions('combo5')" >Limpar</a>

<select id="combo5"></select>

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaCombo5(){

      FacadeAjax.selectPessoaMap(montaCombo5);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaCombo5(maps){

      DWRUtil.removeAllOptions("combo5");

      DWRUtil.addOptions("combo5", maps);

}

 

 

 

Exemplo 6(Lista de <ol> ou <ul>):

 

JSP - <UL>

<strong>6 - DWRUtil.addOptions("ul", listBeans, "nome"); / DWRUtil.addOptions("ol", listBeans, "nome");</strong><br>

Exemplo 6:<br>

Exemplo com a tag UL<br><a href="javascript:carregaUl()" >Carregar UL</a> /

<a href="javascript:cleanAddOptions('ul')" >Limpar</a><br>

<ul id="ul"></ul>

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaUl(){

      FacadeAjax.selectAllPessoa(montaUl);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaUl(listBeans){

      DWRUtil.removeAllOptions("ul");

      DWRUtil.addOptions("ul", listBeans, "nome");

}

 

JSP –  <OL>

Exemplo com a tag OL<br><a href="javascript:carregaOl()" >Carregar OL</a> /

<a href="javascript:cleanAddOptions('ol')" >Limpar</a><br>

<ol id="ol"></ol>

 

JS

/**

* Função que acessa o método da classe java(FacadeAjax), e retorna

* como callback para a função montaXXX();

 */

function carregaOl(){

      FacadeAjax.selectAllPessoa(montaOl);

}

 

/**

 * Função de callback que limpa a combo e depois a remonta.

 * O processo para remover a combo é necessário se não os valores

 * seram somados com os já existentes.

 * @param {Object} listBeans

 */

function montaOl(listBeans){

      DWRUtil.removeAllOptions("ol");

      DWRUtil.addOptions("ol", listBeans, "nome");

}

 

Estão listados acima as principais assinaturas do addOptions(). Podemos ver o quão fácil é gerar uma combo ou lista dinâmica com o DWR.

 

Para baixar esse projeto para executar os exemplos basta acessar o link abaixo:

http://www.milfont.org/blog/wp-content/upload/artigoDWR/versao2.1/PalestraDWR.rar

 

Veremos no próximo artigo (Parte 2.2) o addRows():

 

Handerson Frota

(handersonbf@gmail.com)

Leia também

Artigos relacionados