Páginas

Mostrando postagens com marcador ajax.. Mostrar todas as postagens
Mostrando postagens com marcador ajax.. Mostrar todas as postagens

sexta-feira, agosto 10, 2012

DWR: The first project

DWR – Direct Web Remoting


DWR is a framework used to work with Ajax call on Java implementation. An Ajax call is an asynchronous request of the system resource, in other words, while the request is processed, the user can interact with other resource of the system until the response of the first request.


Is part of the Ajax call: HTML, XHTML, CSS, DOM XML, XMLHttpRequest, JavaScript. The great benefit of the Ajax utilization, certainly, is the possibility of providing better interaction of use with the application, build rich applications for web and finally there’s a better response time. 
In order to optimize the development of Java Applications using Ajax, the use of DWR is a good choice, because it is an OpenSource tool, it provides security calls to Java codes by integrable browser with the features of the main frameworks market. It encapsulates details and complexity of the implementation of XMLHttpRequest, and performs Java class conversion for a JavaScript implementation, this way, allowing the use of a browser.

The diagram below shows the DWR use in an Ajax request to Java implementation.
   

 
THE PROJECT

Using the Eclipse IDE, create a new Dynamic Web Project, as shown on the picture below.

 
To obtain the dwr.jar file, do the download that in: http://directwebremoting.org/dwr/downloads/index.html;
The DWR use the artifact commons-logging.jar, so, this file is necessary and can be obtained from: http://commons.apache.org/logging/
Copy the two files into the WEB-INF\lib of your project.
We must set the DWR servlet in our project, open the file web.xml of your project and add:


  DWR Servlet
  dwr-invoker  
  org.directwebremoting.servlet.DwrServlet
  
     debug
true dwr-invoker /dwr/*


It’s also necessary the creation of a file as shown below, this should be included on the WEB-INF directory of your project with the name dwr.xml.

  
    
          
  


After these settings have been done, the DWR should be ready to use. Start your server, in this tutorial was used the Tomcat7, and access your application as the following one:

 

Note that the Project lists the JavaScript to JDate, it contains the java.util.Date class in a JavaScript version, in other words, this class was converted to JavaScript.
This project shows the IMC calculus, in this case, the call for this method and the response presentation will be by Ajax. For this, create a new class as the following picture:
 

We implement the logic as:
package br.com.serjava.dwr;

public class CalculoIMCAjax {

 public String calcularImc(Double peso, Double altura) {

  Double imc = (peso / Math.pow(altura, 2));

  if (imc < 18.5) {
   return "Seu imc é: " + imc + " Abaixo de 18,5 Você está abaixo do peso ideal";
  } else if (imc >= 18.5 && imc < 24.9) {
   return "Seu imc é: " + imc + " Entre 18,5 e 24,9 Parabéns — você está em seu peso normal!";
  } else if (imc >= 24.9 && imc < 29.9) {
   return "Seu imc é: " + imc + " Entre 25,0 e 29,9 Você está acima de seu peso (sobrepeso)";
  } else if (imc >= 29.9 && imc < 34.9) {
   return "Seu imc é: " + imc + " Entre 30,0 e 34,9 Obesidade grau I";
  } else if (imc >= 34.9 && imc <= 39.9) {
   return "Seu imc é: " + imc + " Entre 35,0 e 39,9 Obesidade grau II";
  } else {
   return "40,0 e acima Obesidade grau III";
  }

 }
 
}


The next step will be the mapping of the class above as a DWR object, for this, you must edit the file dwr.xml and insert:

       


The last stage we are going to create the page that will show the content, creat, if it doesn’t exist, the page index.jsp into the WebContent directory, following the implementation below: 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>




Insert title here
   
     
   
 
 






Altura (m)
Peso (kg)

The expected result will be:

 Wait for new posts!

segunda-feira, novembro 14, 2011

DWR: Trabalhando com objetos

Olá pessoal! 
Em primeiro momento, agradeço aqueles que têm acompanhado o blog e ao feedback positivo.

Dando continuidade do estudo do DWR Direct Web Remoting, demonstrarei o uso de objetos Java no código JavaScript. Para ilustrar o exemplo, utilizarei a estrutura do projeto iniciado no primeiro post de DWR (http://serjava.blogspot.com/2011/10/dwr-primeio-projeto.html), simulando o cadastro de Funcionários.

O primeiro passo é criarmos um objeto que contenha as características do funcionário, para tanto, utilizarei o padrão DTO – Data Transfer Object, criando então FuncionarioDTO:


Esta classe deverá conter os seguintes atributos:
package br.com.serjava.dto;

public class FuncionarioDTO {

 private Integer codigo;
 
 private String nome;
 
 private String cargo;
 
 private Double salario;

//getters and setters


O próximo passo, é mapear esta classe no arquivo dwr.xml, para isso basta adicionarmos a sequinte linha no referido arquivo:
<convert converter="bean" match="br.com.serjava.dto.FuncionarioDTO" javascript="Funcionario"/>


Uma vez tendo mapeado tal classe, permitimos que esta seja reconhecida dentro do context do DWR, no atributo javascript, informamos o nome de Funcionario, este será o nome para o acesso via JavaScript.

Criaremos a classe para tratar as chamadas Ajax referentes ao funcionário, chamaremos de FuncionarioAjax, conforme imagem:
Criaremos dois métodos nesta classe, um que será responsável pelo cadastro dos funcionários, e outro que deverá obter os funcionários cadastrados. Observe que foi criada uma lista de funcionários estática, para armazenar os funcionários. Evidentemente que esta, num ambiente real, deverá ser substituída pelo repositório de dados.

package br.com.serjava.dwr;

import java.util.ArrayList;
import java.util.List;

import br.com.serjava.dto.FuncionarioDTO;

public class FuncionarioAjax {

 private static List<FuncionarioDTO> listaFuncionarios = new ArrayList<FuncionarioDTO>();
 
 public void cadastrarFuncionario(FuncionarioDTO funcionarioDTO) {
  
  System.out.println("funcionariod: " + funcionarioDTO.toString());
  listaFuncionarios.add(funcionarioDTO);
 }
 
 public List<FuncionarioDTO> obterFuncionarios() {
    
  return listaFuncionarios;
 }
}



Devemos mapear a classe FuncionarioAjax no arquivo dwr.xml, de modo a poder ser acessada via função JavaScript, para tanto:
<create creator="new" javascript="FuncionarioAjax">
    <param name="class" value="br.com.serjava.dwr.FuncionarioAjax"/>
</create>
Criaremos uma página jsp para conter o cadastro destes funcionários, esta ficará na raiz de WebContent. 
Depois de criada a página, antes de mais nada, devemos adicionar os imports para uso posterior, o que inclui, as funções do DWR e a classe mapeada para receber as solicitações ajax, então deve-se adicionar, dentro da tag head:



Criaremos agora o esboço para o formulário de cadastro, dentro da tag body:


Código
Nome
Cargo
Salário
Observe que o botão cadastrar chama uma função javascript, esta será responsável por criar o objeto JavaScript que representa nosso objeto FuncionarioDTO, esta função foi implementada do seguinte modo, dentro da tag head:
function cadastrarFuncionario() {
   
   var funcionario = {
    codigo: dwr.util.getValue('idCodigo'),
    nome: dwr.util.getValue('idNome'),
    cargo: dwr.util.getValue('idCargo'),
    salario: dwr.util.getValue('idSalario')
   };
   
   FuncionarioAjax.cadastrarFuncionario(funcionario, {
    callback:function() {
     alert('funcionário cadastrado');
    }
   });
  }
Observe que a variável criada como funciona'rio, tem seus atributos nomeado de forma idêntica aqueles da classe FuncionarioDTO, usamos a função dwr.util.getValue, para obter o value de um elemento informado seu id, observe que os valores informados correspondem com os ids denominados para cada input; ela é similar a função document.getElementById.

Como pode ser observado, atribuímos os valores correspondentes a cada atributo do objeto funcionario, em seguida chamamos a função cadastrarFuncionario;

Para melhorar nosso modelo, a cada funcionário cadastrado, será exibido numa tabela abaixo do formulário de cadastro, para isso criaremos uma tabela do seguinte modo, abaixo do referido formulários:
Observe que não foi feita nenhuma implementação para esta tabela.

Criaremos uma função javaScript responsável por obter os dados para popular a tabela:
function carregarTabela() {
   
   var cellsFuncionario = [
                  function(funcionario) {return funcionario.codigo;},
                  function(funcionario) {return funcionario.nome;},
                  function(funcionario) {return funcionario.cargo;},
                  function(funcionario) {return funcionario.salario;},
                  ];
   
   FuncionarioAjax.obterFuncionarios({
    callback:function(listaFuncionarios) {
     dwr.util.removeAllRows('tableFuncionarios');
     
     dwr.util.addRows( "tableFuncionarios", listaFuncionarios, cellsFuncionario, {escapeHtml:false});
    }
   });
  }

Para que depois de cadastrado um funcionário a tabela seja atualizada, na função de cadastro, onde verifica-se o alert, remova-o e adicione uma chamada a esta função, devendo ficar do seguinte modo:
function cadastrarFuncionario() {
   
   var funcionario = {
    codigo: dwr.util.getValue('idCodigo'),
    nome: dwr.util.getValue('idNome'),
    cargo: dwr.util.getValue('idCargo'),
    salario: dwr.util.getValue('idSalario')
   };
   
   FuncionarioAjax.cadastrarFuncionario(funcionario, {
    callback:function() {
     carregarTabela();
    }
   });
  }

Por fim, o resultado esperado, depois de uma inclusão deverá ser similar a:
Espero que tenham gostado! Em breve postarei mais especificidade e recursos sobre o DWR.

quinta-feira, outubro 20, 2011

DWR: Primeiro Projeto

DWR – Direct Web Remoting

DWR é um framework para se trabalhar com chamadas Ajax em implementações Java. Uma chamada Ajax é uma solicitação assíncrona de um recurso do sistema, ou seja, enquanto a solicitação é processada, o usuário pode interagir com outras partes do sistema até sua resposta.

É inerente a uma chamada Ajax: HTML, XHTML, CSS, DOM, XML, XMLHttpRequest, JavaScript. O grande benefício do uso do Ajax, certamente, é a possibilidade de maior interação do usuário com a aplicação, construção de aplicações ricas para a web, além de, melhor tempo resposta perceptível.
Diagrama de uma chamada Ajax:
 
No intuito de otimizar o desenvolvimento de aplicações Java que façam uso de Ajax, o uso do DWR é bastante aceito, por ser uma ferramenta Open Source, por propiciar chamadas seguras a códigos Java a pártir de um browser, integrável com os principais frameworks de mercado, encapsula detalhes e complexidades da implementação do XMLHttpRequest, realiza a conversão de classes Java para implementações JavaScript, permitindo seu uso dentro de um browser.
O diagrama abaixo demonstra o uso do DWR em uma solicitação Ajax a uma implementação Java:
 
O PROJETO
Utilizando a IDE Eclipse, crie um novo Dynamic Web Project, conforme imagem abaixo:

 
Finalize a criação.
Para obter o arquivo dwr.jar, faça o download do mesmo em: http://directwebremoting.org/dwr/downloads/index.html
O DWR usa o artefato commons-logging.jar, portanto, este arquivo será necessário, pode ser obtido a partir de: http://commons.apache.org/logging/
Copie ambos arquivos para o diretório WEB-INF\lib do seu projeto.
Devemos configurar o servlet do DWR em nosso projeto, abra o arquivo web.xml de seu projeto e adicione:


  DWR Servlet
  dwr-invoker  
  org.directwebremoting.servlet.DwrServlet
  
     debugtrue



  dwr-invoker
  /dwr/*



É necessário, também, a criação de um arquivo de configuração do DWR, crie o arquivo como abaixo descrito, este deve constar no diretório WEB-INF de seu projeto, com o nome de dwr.xml:

  
    
          
  

Feito estas configurações, o DWR deverá estar pronto para uso. Inicie seu servidor, neste exemplo utiliza-se Tomcat 7, e acesse sua aplicação do seguinte modo:
 
Observe que o projeto lista o JavaScript JDate, que contém a classa java.util.Date em sua versão para JavaScript, convertida pelo DWR. Se você clicar sobre o link JDate, verá listados todos os métodos relativos a classe java.util.Date.
Nosso projeto apresentará o calculo do IMC (índice de massa córporea), onde a chamada e a apresentação do resultado serão via Ajax.
Para tanto, criaremos uma classe, como mostra a figura a seguir:
 
Implementamos a lógica como:
package br.com.serjava.dwr;

public class CalculoIMCAjax {

 public String calcularImc(Double peso, Double altura) {

  Double imc = (peso / Math.pow(altura, 2));

  if (imc < 18.5) {
   return "Seu imc é: " + imc + " Abaixo de 18,5 Você está abaixo do peso ideal";
  } else if (imc >= 18.5 && imc < 24.9) {
   return "Seu imc é: " + imc + " Entre 18,5 e 24,9 Parabéns — você está em seu peso normal!";
  } else if (imc >= 24.9 && imc < 29.9) {
   return "Seu imc é: " + imc + " Entre 25,0 e 29,9 Você está acima de seu peso (sobrepeso)";
  } else if (imc >= 29.9 && imc < 34.9) {
   return "Seu imc é: " + imc + " Entre 30,0 e 34,9 Obesidade grau I";
  } else if (imc >= 34.9 && imc <= 39.9) {
   return "Seu imc é: " + imc + " Entre 35,0 e 39,9 Obesidade grau II";
  } else {
   return "40,0 e acima Obesidade grau III";
  }

 }
 
}

Devemos mapear a classe acima como um objeto do DWR, para isso deve-se editar o arquivo dwr.xml incluindo o seguinte:

       

Criaremos a página que apresentará o conteúdo, crie, caso já não exista, a página index.jsp, dentro do diretório WebContent, segue a implementação:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>




Insert title here
   
     
   
 
 






Altura (m)
Peso (kg)
O resultado final deverá ser:
 
Aguarde próximos posts sobre DWR.