Handerson Frota - WEB2.0

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

Para aqueles que me acompanham devem ter percebido que estou sem postar a um bom tempinho e estou devendo a finalização do artigo Criando uma lista na sessão com DWR.

Realmente estou sem tempo para postar, mas já adianto que assim que as coisas se normalizarem vou voltar com tudo.

Estou abrindo essa exceção apenas para divulgar um excelente vídeo com a retrospectiva do CEJUG de 2007. O vídeo é bastante interessante pois mostra uma boa parte do que foi feito pela comunidade em 2007. O vídeo foi feito pelo Hildeberto Mendonça.

O Hildeberto Mendonça só esqueceu de acrescentar a participação do CEJUG no III Natal Java Day em 2007, mas tudo bem, no mais o vídeo é bastante empolgante, confiram abaixo:

Isso mostra que quando queremos e quando a comunidade se junta tudo é possível, me sinto cada vez mais orgulhoso de fazer parte desta comunidade, parabéns CEJUG e vida longa ao JAVA ;D.

Na parte 3 do nosso artigo vamos ver que tipos de métodos iremos criar no nosso FacadeAjaxSession explicado no artigo anterior.

Agora veremos os trechos dos novos métodos:

Método para adicionar um objeto na sessão:

public void addMapSession(BeanSession beanSession){
Session session = new SessionFacade();//01
Map<String, BeanSession> sessionMap = null;//02

if(session.getAttribute("sessionMap") != null){ //03
sessionMap = (Map) session.getAttribute("sessionMap");//04
}else{
sessionMap = new HashMap<String, BeanSession>();//05
}
String keyMap = beanSession.getId() + "_" +  beanSession.getName();//06

beanSession.setKeyMap(keyMap); //07

sessionMap.put(keyMap, beanSession); //08

session.setAttribute("sessionMap", sessionMap); //09
}

Listagem 03: Método que adiciona em um atributo da sessão o objeto passado como parâmetro.

Na listagem 03 vimos o método addMapSession() que espera como parâmetro um BeanSession(ver listagem 01), veja baixo:

01:Criamos o objeto session a partir de nossa classe SessionFacade;
02:Criamos um Map(sessionMap);
03: Recuperamos da sessão o atributo utilizado, e verificamos se o mesmo já existe;
04:Caso o Atributo exista(linha 03) pegamos o valor desse atributo e adicionamos no Map(sessionMap);
05:Caso o atributo não exista inicializamos o sessionMap;
06:Criamos uma variável que servirá como identificador do objeto, que será utilizado no lado JavaScript para identificar o objeto que o usuário está clicando. OS: Como não estou utilizando dados de um banco, tive que fazer essa “adaptação” para simular o id. O que eu fiz foi nada mais que garantir que o objeto que estou inserindo neste momento não terá o mesmo id do próximo;
07:Adiciono esse keyMap(identifica o mapa, linha 06) no meu BeanSession;
08:Adiciono no sessionMap a chave do meu mapa(keyMap) e o meu objeto(BeanSession).

Método para listar um objeto na sessão:

public Map listMapSession() throws Throwable {
Session session = new SessionFacade();
Map<String, BeanSession> sessionMap = null;

if (session.getAttribute("sessionMap") != null) {
sessionMap = (Map) session.getAttribute("sessionMap");
} else {
sessionMap = new HashMap<String, BeanSession>();
}

return sessionMap;
}

Listagem 04: Método que retorna um Map da sessão.

Este método dispensa explicação mais detalhada, ele apenas retorna um Map que está salvo em um determinado atributo na sessão.

Método para excluir um objeto da sessão:

public void removeValueMap(BeanSession beanSession) throws Throwable {
Session session = new SessionFacade();
Map sessionMap = null;

if (session.getAttribute("sessionMap") != null) {
sessionMap = (Map) session.getAttribute("sessionMap");
} else {
sessionMap = new HashMap<String, BeanSession>();
}

if (sessionMap.containsKey(beanSession.getKeyMap())) {
sessionMap.remove(beanSession.getKeyMap());
}

session.setAttribute("sessionMap", sessionMap);
}

Listagem 05: Método que exclui o objeto passado como parâmetro da sessão.

Um método também bem simples. Recebe o objeto como parâmetro, recupera o valor da sessão, verifica se existe um objeto no Map através da chave (keyMap), caso exista ele remove o objeto do Map e adiciona novamente o Map na sessão.

São métodos simples e claro precisam de mais alguns requintes, mas, esse não é o objetivo do nosso artigo. Quero apenas exemplificar essa funcionalidade.

No próximo artigo(parte 4) iremos ver a implementação no lado JavaScript.

Abraços

Dando continuidade…..

Vimos no artigo anterior a parte teórica deste artigo, agora vamos dar início a parte mais divertida: código ;D

Criando o Bean

Para iniciarmos o nosso exemplo sem mais delongas vamos criar o bean que iremos utilizar. Veja a listagem 01

public class BeanSession {

private String id;
private String keyMap;
private String name;

public String getId() {
return id;
}
public String getKeyMap() {
return keyMap;
}
public String getName() {
return name;
}
public void setId(String id) {
this.id = id;
}
public void setKeyMap(String keyMap) {
this.keyMap = keyMap;
}
public void setName(String name) {
this.name = name;
}
}

Listagem 01: Código do BeanSession com 3 propriedades(id, keyMap e name) e seus respectivos Get´s e Set´s.

Iremos utilizar esse bean para auxiliar o transporte dos dados entre o Java e o JavaScript. Mas o uso do mesmo não é obrigatório como vocês já sabem. No meu modelo eu utilizo Bean´s, mas caso você esteja utilizando outra forma também é possível, tanto com objetos JSON, Parâmetros como Integer, String etc, são aceitos com tranqüilidade pelo DWR.

Alterando o FacadeAjaxSession.java

Segue o código que tínhamos:

public class FacadeAjaxSession {

public String exampleSession1(String attribute){
WebContext wc = WebContextFactory.get();

String valueSession = "";
if(wc.getHttpServletRequest().getSession().getAttribute(attribute)!= null){
valueSession = wc.getHttpServletRequest().getSession().getAttribute(attribute).toString();
}else{
valueSession = "Session is null";
}

return valueSession;
}

public void createSession(String attribute, String value){
WebContext wc = WebContextFactory.get();

wc.getHttpServletRequest().getSession().setAttribute(attribute, value);
}

public String exampleSession2(String attribute){
Session session = new SessionFacade();

String valueSession = "";

if(session.getAttribute(attribute)!= null){
valueSession = session.getAttribute(attribute).toString();
}else{
valueSession = "Session is null";
}

return valueSession;
}

}

Listagem 02: Código do FacadeAjaxSession que utilizamos no último artigo.

Por hoje é só, na parte 3 deste artigo vamos ver o restante da classe FacadeAjaxSession.

Abraços