DWR � Directed Web Remoting � Parte II.I

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.

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

</select>

�

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

�

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>

�

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>

�

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>

�

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>

�

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>

�

/**

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

�

/**

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

�

/**

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

�

/**

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

�

/**

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

�

/**

* 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

Tecnologias:

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Handerson Em 2006

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso