Criando uma lista na sessão com DWR – Parte 4
Dando continuidade nossa série de artigos vamos ver nesta penúltima parte como implementar no lado JavaScript a nossa funcionalidade. No artigo anterior vimos os métodos que iremos utilizar.
Alterando o session.js
Vamos ver logo abaixo as funções em JavaScript para cada método Java que criamos.
Função que adiciona o objeto na sessão:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function addValue() { var bean = DWRUtil.getValues("formCreateMapSession");//01 FacadeAjaxSession.addMapSession(bean,{ callback:function(){ DWRUtil.setValue("msgSession", "Value add !");//02 listMap();//03 }, errorHandler:function(errorString, e){ DWRUtil.setValue("msgSession", errorString); }, timeout:50000 } );} |
Listagem 06: Função que pega os valores do formulário e envia para a classe Java para ser adicionado em um Map que será adicionado na Sessão.
01:Com o getValues recuperamos todos os dados contidos no formulário e criamos um objeto JS,que será convertido em um BeanSession(ver listagem 01);
02:Após executar o método addMapSession(ver listagem 03), no seu retorno envia uma mensagem com o setValue de sucesso. 03:Executa a função que monta a lista(ver adiante)
Função que cria a grid(tabela):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function listMap(){ FacadeAjaxSession.listMapSession({ callback:function(map){ DWRUtil.removeAllRows("mapList"); var cellFuncs = [ function(bean) { return bean.keyMap; }, function(bean) { return bean.id; }, function(bean) { return bean.name; } ]; DWRUtil.addRows( "mapList", map, cellFuncs, { rowCreator:function(options) { row = document.createElement("tr"); row.id = options.rowData.keyMap; row.style.cursor = "pointer"; if(validateBrowser()){ row.attachEvent("onmouseover", function(e){changeto(e, '#ff0000')}); row.attachEvent("onmouseout", function(e){changeback(e, '')}); row.attachEvent("onclick", function(e){removeValue(this.id)}); }else{ row.addEventListener("mouseover", function(e){changeto(e, '#ff0000')}, false); row.addEventListener("mouseout", function(e){changeback(e, '')}, false); row.addEventListener("click",function(e){removeValue(this.id)},true); } return row; }, cellCreator:function(options) { var td = document.createElement("td"); return td; } }); }, errorHandler:function(errorString, e){ DWRUtil.setValue("msgSession", errorString); }, timeout:50000 }); } |
Listagem 07: Função que monta uma grid(tabela) com os dados que estão salvos na sessão.
Na listagem 07 vou explicar apenas o que está contido dentro do rowCreator pois o resto do código já foram explicados em vários outros artigos anteriores.
Então vamos focar no seguinte trecho:
|
1 2 3 4 5 6 7 8 9 10 11 |
rowCreator:function(options) { row = document.createElement("tr"); row.id = options.rowData.keyMap;//01 ... if(validateBrowser()){ row.attachEvent("onclick", function(e){removeValue(this.id)});//02 }else{ row.addEventListener("click",function(e){removeValue(this.id)},true);//02 } return row; |
Listagem 08: Trecho retirado da listagem 07.
01: Através do parâmetro do rowCreator(rowCreator:function(parametro)) iremos pegar a propriedade do nosso BeanSession(ver listagem 01) keyMap, que contém um determinado valor que identifica o objeto dentro do Map(ver listagem 03), e que vai identificar a linha que esse objeto será exibido. Adiciono esse valor ao id da minha linha gerando mais ou menos o código abaixo:
Ex: < tr id=”keyMap” />
02: Montamos agora um evento adicionando o removeValue(será mostrado mais a frente) e com ele adicionando o id de cada linha que criamos. Isso é feito para o IE como para a família MOZILLA.
Função que exclui o objeto da sessão:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function removeValue(key){ var bean = { keyMap:key }; FacadeAjaxSession.removeValueMap(bean,{ callback:function(){ DWRUtil.setValue("msgSession", "Remove success !"); listMap(); }, errorHandler:function(errorString, e){ DWRUtil.setValue("msgSession", errorString); }, timeout:50000 }); } |
Listagem 09: Função que exclui o objeto da sessão.
Bem como vocês podem observar não tem muito o que explicar aqui, ele recebe a chave(keyMap) e adiciona em um objetoJS que será convertido para o BeanSession(ver listagem 01).
Ele vai verificar essa chave e excluir do Map(ver listagem 05).
Lembrando que os dados que serão inseridos da sessão podem ser: HashMaps(no caso do nosso exemplo), Array, ArrayList, List, Collection etc. Os dados contidos nessas listas podem ser qualquer objetos e claro se forem objetos criados por você(objetos fora da Api padrão: String, Integer etc) é só mapear no dwr.xml que o DWR vai enxergar seu objeto.
No próximo artigo iremos ver o código HTML deste exemplo.
Arquivos para baixar: session.js, FacadeAjaxSession.java
Abraços
0 Comments on “Criando uma lista na sessão com DWR – Parte 4”