Trabalhando com Session no DWR - Parte 2.3

 

Para finalizar esses artigos básicos sobre session vamos ver adiante como salvar, excluir e listar objetos na sessão, será um exemplo bem simples mas ao mesmo tempo muito útil para quem pretende fazer algo semelhante.

 

Iremos continuar utilizando o projeto anterior.

 

Preparando o ambiente e ferramentas

Segue abaixo o nosso ambiente:

 

IDE: MyEclipse 6.0

ContainerWeb: Tomcat 5.5.17

DWR: Versão 2.0.1

JAVA: JKD5.0 ou superior.

 

Informações Iniciais

Iremos criar uma funcionalidade bem simples, mas também bem útil. Teremos um formulário onde entraremos com alguns dados, salvaremos esses dados na sessão, podemos adicionar um ou mais dados formando assim uma lista desses dados. A funcionalidade também irá permitir listar e excluir esses dados da sessão. Não iremos salvar no banco, mas nada impede que você o faça.

 

Para você acompanhar melhor esse artigo você deve ler as seqüências de artigos localizados nos links que passarei mais a frente, isso será necessário caso você ainda não tenha visto ou não saiba o básico para trabalhar com sessão utilizando o DWR, com isso você terá um bom entendimento do que será apresentado.

 

Trabalhando com Session no DWR parte 1

Trabalhando com Session no DWR parte 2

Vídeo-aula 1

Vídeo-aula 2

Vídeo-aula 3

Vídeo-aula 4

 

Estrutura.

Vamos utilizar a implementação do último artigo. Session e SessionFacade. Iremos manter a estrutura desde o primeiro artigo e vamos inserir essa nova funcionalidade no “sistema”.

 

Criando o Bean

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

 

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 1. 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.

 

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 2. Código do FacadeAjaxSession que utilizamos no último artigo

 

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 3. Método que adiciona em um atributo da sessão o objeto passado como parâmetro

 

Na Listagem 3 vimos o método addMapSession() que espera como parâmetro um BeanSession(ver Listagem 1), 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 4. 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 5. 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étodo simples e claro precisam de mais alguns requintes, mas, esse não é o objetivo do nosso artigo. Quero apenas exemplificar essa funcionalidade, quem sabe, mas a frente, escrevo um artigo com uma solução mais “elegante”.

 

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 6. 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 artigo sobre beans);

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 7. 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(artigos).

 

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 8. 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 9. 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 1). Ele vai verificar essa chave e excluir do Map(ver Listagem 5).

 

Alterando o session.jsp e session2.jsp

Para finalizar vamos agora ver os trechos de códigos que devemos inserir para que essa funcionalidade esta finalizada.

 

Formulário(session.jsp):

 

Map Session:<br>

<form name="formCreateMapSession" id="formCreateMapSession">

      <label>ID:</label>

      <input type="text" id="id" name="id" value="" /><br>

      <label>Name:</label>

      <input type="text" id="name" name="name" value="" /><br>

      <input type="button" value="Save" onclick="javascript:addValue();">

</form>

 

Tabela - Grid(session.jsp):

 

<table width="100%" border="0" cellspacing="1" cellpadding="0" style="border: 1px solid black;">

<tr style="background-color: gray;">

        <td style="color: white; font-weight: bold">KeyMap</td>

        <td style="color: white; font-weight: bold">ID</td>

        <td style="color: white; font-weight: bold">NAME </td>

      </tr>

      <tbody id="mapList"></tbody>

</table>

 

Link - Tabela - Grid(session2.jsp):

 

<br>

<a href="javascript:listMap();">Get Values MAP</a><br>

 <table width="100%" border="0" cellspacing="1" cellpadding="0" style="border: 1px solid black;">

<tr style="background-color: gray;">

         <td style="color: white; font-weight: bold">KeyMap</td>

         <td style="color: white; font-weight: bold">ID</td>

         <td style="color: white; font-weight: bold">NAME </td>

</tr>

<tbody id="mapList"></tbody>

</table>

 

Telas

Veremos abaixo as telas para essa funcionalidade:

 

Adicionando um valor:

 

hftsdwrp23fig01.jpg 

Figura 01

 

Listando o valor adicionado:

 

hftsdwrp23fig02.jpg 

Figura 02

 

Clicando na linha para excluir um registro:

 

hftsdwrp23fig03.jpg 

Figura 03

 

Resultado da exclusão:

 

hftsdwrp23fig04.jpg 

Figura 04

 

Recuperando a lista em outro JSP(session2.jsp):

 

hftsdwrp23fig05.jpg 

Figura 05

 

Resultado:

 

hftsdwrp23fig06.jpg 

Figura 06

 

Conclusão

Como já dito em outros artigo é muito simples de usar o DWR e utilizar a session com Ajax usando o DWR. Queria com esse artigo apenas exemplificar uma utilidade interessante para a session e usando o DWR para facilitar a sua implementação.

 

Espero que tenham gostado deste artigo e que ele seja útil para o aprendizado.

 

Projeto de exemplo: aqui

 

Obrigado e Boa Sorte.

 

Handerson Frota

handersonbf@gmail.com

www.handersonfrota.com.br