Este artigo tem como objetivo principal ser rápido, direto e ilustrar como criar um combobox (elemento select do HTML) de estados e no evento de onchange criar a lista de cidades a partir do estado.
Como configurar
A primeira coisa que deve ser feita é acessar o site do framework DWR. Após isso, baixe a última versão estável do framework, no momento da escrita deste artigo a versão é 2.0.5.
No próprio site do DWR, existe um tutorial Get Started que ensina passa a passo como instalar, configurar e ainda alguns
exemplos do que pode ser feito e de como fazê-los. Neste artigo será
feito um passo a passo mais resumido que o encontrado no site, caso
queira mais detalhes, entre no site do framework. Abaixo segue um passo
a passo do que deve ser feito:
- Adicione a lib do DWR (dwr.jar) ao classpath da aplicação (copie o arquivo dwr.jar para a pasta WEB-INF/lib, por exemplo);
- Adicione o seguinte trecho de código ao arquivo web.xml, que está dentro da pasta WEB-INF;
<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>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>- Crie dentro da pasta WEB-INF um arquivo chamado dwr.xml, adicione o seguinte conteúdo dentro dele (este arquivo será explicado mais tarde);
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="AjaxDwr">
<param name="class" value="br.com.phpaulo.dwr.exemplo.util.AjaxDwr"/>
</create>
<convert converter="bean" match=" br.com.phpaulo.dwr.exemplo.bean.Fornecedor" />
<convert converter="bean" match=" br.com.phpaulo.dwr.exemplo.bean.Municipio" />
</allow>
</dwr>Pronto! Sua aplicação já está utilizando o framework DWR.
Código Java e JavaScript
Para atingir o objetivo do artigo, que é ser simples e direto, assumimos que o código Java e a página JSP da aplicação estão prontas e somente necessitem de ajustes para o DWR. Caso precise de mais algum suporte, deixe um comentário ou mande um e-mail. Vamos à parte visual para este exemplo. Adicione na sua página JSP a chamada das bibliotecas JavaScript necessárias:
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/util.js'></script>Quando o arquivo dwr.xml foi criado, adicionamos o seguinte bloco de código:
<create creator="new" javascript="AjaxDwr">
<param name="class" value="br.com.phpaulo.dwr.exemplo.util.AjaxDwr"/>
</create>Este bloco significa que um novo arquivo JavaScript será criado e o nome desse arquivo será AjaxDwr, veja as opções no bloco acima, bem intuitivo não. O conteúdo desse arquivo será o mesmo que a classe Java que está mapeada no parâmetro value dentro da tag create, com todos os métodos dessa classe com uma função de retorno (callback).
Adicione na página que você deseja ter o suporte ao DWR a seguinte linha:
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/AjaxDwr.js'></script>Esta linha poderá ser alterada, tudo dependerá do nome que você der ao JavaScript da classe. O <%=request.getContextPath() %> é apenas para referenciar o contexto da aplicação. Com esse processo feito agora só precisamos criar a função JavaScript que será executada no evento onchange do combo de estados, essa função pode ser vista abaixo:
function atualizaCombo() {
var uf = dwr.util.getValue("uf");
AjaxDwr.getCidades(uf, montaCombo);
}
function montaCombo(data){
dwr.util.removeAllOptions("cidade");
dwr.util.addOptions("cidade", data, "idMunicipio", "nmMunicipio");
}Repare na função, usamos variáveis do DWR. Abaixo é explicado linha a linha o que é feito no código acima:
- Linha 1. Declara a função atualizaCombo, sem parâmetro;
- Linha 2. Armazena o valor selecionado no combo cujo id seja igual a uf;
- Linha 3. Invoca a classe AjaxDwr, definida no arquivo dwr.xml e chama o método getCidades passando como parâmetro o id do estado, através da variável uf definida na Linha 2 e chama uma função no callback da getCidades, chamar no callback, quer dizer que ela será executada quando o método getCidades da classe Java for concluído, no caso essa função chama montaCombo e deverá ser passada sem parâmetros, pois está implícito que ele recebe o retorno da função getCidades;
- Linha 6. Declara a função montaCombo, recebendo como parâmetro a o retorno do método getCidades;
- Linha 7. Remove todos os elementos <option> que o combo de tiver, essa função recebe como parâmetro o id do elemento que queremos remover as opções;
- Linha 8. Adiciona toda a lista de elementos que vir de retorno do método getCidades, no caso, essas opções são as cidades, a assinatura do método é dwr.util.addOptions(id_do_elemento, conteúdo_de_retorno, campo_que_representa_o_value, campo_que_representa_o_texto_do_valor); Onde:
id_do_elemento: representa o id do combo que deve receber os dados;
conteúdo_de_retorno: representa o conteúdo que deve ser retornado pelo método, qualquer nome válido pode ser usado;
campo_que_representa_o_value: nome do atributo que está definido no bean que representa o id;
campo_que_representa_o_texto_do_valor: nome do atributo que está definido no bean que representa o texto a ser exibido no option.
Para mais informações de possibilidades de adicionar opções, veja o seguinte link http://directwebremoting.org/dwr/browser/util/lists.html.
O método getCidades da classe Java, deve ser um método simples, deve retornar uma lista de cidades, como o método abaixo:
public List<Cidade> getCidades(int idEstado){
List<Cidade> listaCidades = new ArrayList<Cidade>();
if( idEstado > 0 ) {
try {
listaCidades = new CidadeDAO().getMunicipios(idEstado);
} catch(SQLException e){
e.printStackTrace();
}
}
return listaCidades;
}Um detalhe importante para que isso funcione é que criemos um converter no DWR para que ele saiba qual bean pode converter, o por isso dessa linha no arquivo dwr.xml.
<convert converter="bean" match=" br.com.phpaulo.dwr.exemplo.bean.Fornecedor" /> Para cada bean que for utilizar crie um converter para o DWR saber em quais classes ele pode converter e dessa forma realizar a conversão de forma correta.
Conclusão
Da forma que foi exibido acima, você poderá criar um combo com uma lista de opções de qualquer classe e no evento onchange filtrar opções para o próximo combo.
Caso o erro “data is null” for exibido, verifique se não esqueceu de configurar o converter, ou reveja as opções definidas no método addOptions.
A
idéia foi mostrar de forma clara e objetiva como criar o clássico caso
de selecionar um estado e gerar a lista de cidades. Espero que
aproveitem e que este artigo faça com que o seu trabalho fique mais
produtivo.
Links
De 0 a 10, o quanto você recomendaria este artigo para um amigo?