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:

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