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:
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):
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:
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:
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
