DWR – Directed Web Remoting
Combos Aninhadas
Primeiramente quero agradecer aos leitores por todos os comentários, e-mails de agradecimentos e críticas que tenho recebido. Obrigado a todos.
Tenho recebido vários e-mails de usuários com elogios, críticas e dúvidas e com esse grande número de leitores venho recebendo algo em comum, muitos tem dúvidas e/ou querem saber como fazer combos aninhadas, vendo essa demanda resolvi fazer algo por esses leitores que tanto me prestigiam. Então esse artigo irá abordar o que muitos me perguntam:
-Como fazer combos aninhadas com o DWR ?
PS1: Vamos utilizar nomes de funções, métodos, parâmetros e variáveis em inglês, pois esse artigo será também utilizado 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 e ferramentas
Vamos criar um projeto java e web, utilizar o banco de dados MySql para nossos dados.
Segue abaixo o nosso ambiente:
IDE: MyEclipse 5.1.1GA
ContainerWeb: Tomcat 5.5.17
DWR: Versão 2.0.1
Banco de Dados: MySql Server 5.0.24, MySql Client 5.0.11
JAVA: JKD5.0 ou superior.
Criando o banco
Para criar o banco que iremos utilizar basta executar o sql que esta para download aqui: sqlDownload.(Recomendo que rode pelo MySQL Administrator, e o mesmo está dentro do projeto na pasta “bd”)
Informações do banco de dados
Banco: bddwrjm
Tabelas: users, permissions, user_permissions, characteristics
Estrutura do projeto
Para você não perder tempo tentando entender da camada de Negócio para baixo, vou explicar agora rapidamente, como está nossa estrutura para podermos partir para o que realmente interessa.
Quando você rodar seu Dump(arquivo sql, aconselho a usar o MySQL Administrator) talvez você precise configurar um arquivo para que a sua classe de conexão consiga acessar o seu banco. O arquivo você deve atualizar é a classe ConnectDAO, localizado em: com.jm.dao.
Explicando a estrutura
A nossa estrutura esta dividida em:
· Classe de Negócio(NgcBusinessGeneral): Esta será a classe que vai fazer as chamadas aos seus DAO’s e executar alguma regra de negócio.
· Classe de acesso ao banco(ConnectDAO): Classe que se conectar ao banco.
· Classes de Persistência(UsersDAO, PermissionsDAO): Classes responsáveis por executar os sql no banco.
· Classe de controler do DWR(FacadeAjax) : Essa será a classe que vai se comunicar com sua classe de negócio e retornar para o seu javascript.
· Página de exibição dos exemplos(combo.jsp): Página JSP para exibir os resultados.
· JavaScript de exemplos(combos.js): JavaScript com os as chamadas DWR.
Com essas informações já podemos dar início ao nosso exemplo, não se prenda nas funcionalidades e como foram implementadas, vamos abstrair isso, vamos observar apenas como o DWR vai trabalhar, ou seja, vamos observar o nosso FacadeAjax e JS’s, pois da camada de negócio para baixo pode ser implementada da forma que você desejar ou que já esta implementada. Você vai observar também que vamos trabalhar muito com beans e List(java.util.List), então se o seu sistema já trabalha com esses tipos de objetos você verá que será bem tranqüilo, mas não que dizer se você usa Map’s(java.util.Map) ele não irá funcionar, o DWR trabalha com praticamente todos os principais tipos do Java.
No nosso exemplo eu já deixei montado uma grid com todos os usuários cadastrados, para que você observe os resultados dos exemplos.
Iniciando os Exemplos
Exemplo 1. Carregando uma combo a partir de uma outra combo.
Esse é o mais simples, você terá uma combo que vai possuir alguns valores, ao selecionar um desses valores ele vai passar para o FacadeAjax através de uma função chamada selectPermissiosUsers(this.value); e o mesmo vai enviar a chamada para a classe de negócio que vai ao banco, executa o select e é retornado o resultado solicitado para ser populada a segunda combo. Veja abaixo.
HTML
Example 1:
Users: <select id="comboUsers" onchange="selectPermissiosUsers(this.value);">
</select>
Permissions: <select id="comboPermissionsUsers"></select>
Listagem 01 – HTML cujo foi definido uma tag <select> com id igual a “comboUsers”, e abaixo um segundo <select> com id igual a “comboPermissionsUsers” onde será carregado o resultado baseado no id do usuário carregado na primeira combo(“comboUsers”).
Javascript
function selectPermissiosUsers(idValue){
var bean = {id:idValue};
FacadeAjax.getPermissionsUsers(bean,{
callback:function(list){
DWRUtil.removeAllOptions("comboPermissionsUsers");
DWRUtil.addOptions("comboPermissionsUsers", list,"id_permission", "permission");
},
errorHandler:function(errorString, exception) {
setMsgError(errorString, 'block');
},
timeout:50000
});
}
Listagem 02 – Chamada do DWR para recuperar uma lista de permissões através de um usuário selecionado em uma combo. Utilizando o addOptions() ele gera uma combo com os valores trazidos do banco.
JAVA(FacadeAjax)
public List<BeanPermissions> getPermissionsUsers(BeanUsers beanUsuario) throws Throwable{
List<BeanPermissions> listPermissionsUsers = BusinessGeneral.getInstancia().getPermissionsUsers(beanUsuario);
return listPermissionsUsers;
}
Listagem 03 – Método da classe FacadeAjax que retorna um List de Beans do tipo BeanPermissions.
Resultado da execução do Exemplo 1:
Figura 01 – As duas combos, uma já carregada com uma lista de usuários e a outra aguardando ser carregada as permissões deste usuário.
Figura 02 – Selecionando um usuário para carregar as suas permissões na próxima combo. O resultado da segunda combo são todas as permissões daquele usuário.
Figura 03 – Combo de permissões carregada com as permissões do usuário selecionado.
Exemplo 2. Carregando duas combos e uma grid.
Esse exemplo é um pouco mais complexo, desta vez vamos ter o mesmo cenário do primeiro exemplo, uma combo cujos valores são carregados no load da página, e que ao selecionar um valor desta, ela carrega a segunda combo através da função selectPermissiosUsers2(this.value); que é igual a função selectPermissiosUsers(this.value); só alterando o id passado nas funções removeAllOptions() e addOptions().
Mas desta vez vamos ao selecionar algum dado da segunda combo(“comboPermissionsUsers2”) carregar um grid.
HTML
Example 2:
Users: <select id="comboUsers2" onchange="selectPermissiosUsers2
(this.value);"></select>
Permissions: <select id="comboPermissionsUsers2"
onchange="getListAllUsersPermissions(this.value);"></select>
<br><br>
<table id="tableUser" border="0" align="left" cellpadding="4" cellspacing="0"
style="border: 1px solid black; display: none">
<thead>
<tr style="background-color: white;">
<td colspan="4" style="color: black; font-weight: bold;"
align="center">Permissions for Users</td>
</tr>
<tr style="background-color: gray;">
<td style="color: white; font-weight: bold">Id</td>
<td style="color: white; font-weight: bold">Name</td>
<td style="color: white; font-weight: bold">Login</td>
<td style="color: white; font-weight: bold">Permissions</td>
</tr>
</thead>
<
...
20/10/2010 19:50:00
2010
2010
52
3
