DWR: The first project
Autor: Fábio Medeiros Faria | Publicado: 2012-08-10T22:11:00-03:00


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&nbsp;better interaction of use
with the application, build&nbsp;rich applications for&nbsp;web
and finally there’s a better response time.&nbsp;


&nbsp;

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&nbsp;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.

&nbsp; &nbsp;



&nbsp;

&nbsp;  

THE PROJECT



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





&nbsp;  

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:



&nbsp;  



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:



&nbsp;  



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 &lt; 18.5) {
   return "Seu imc é: " + imc + " Abaixo de 18,5 Você está abaixo do peso ideal";
  } else if (imc &gt;= 18.5 &amp;&amp; imc &lt; 24.9) {
   return "Seu imc é: " + imc + " Entre 18,5 e 24,9 Parabéns — você está em seu peso normal!";
  } else if (imc &gt;= 24.9 &amp;&amp; imc &lt; 29.9) {
   return "Seu imc é: " + imc + " Entre 25,0 e 29,9 Você está acima de seu peso (sobrepeso)";
  } else if (imc &gt;= 29.9 &amp;&amp; imc &lt; 34.9) {
   return "Seu imc é: " + imc + " Entre 30,0 e 34,9 Obesidade grau I";
  } else if (imc &gt;= 34.9 &amp;&amp; imc &lt;= 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:&nbsp;

&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%&gt;




Insert title here
   

  
   
   
    function calcularImc() {
   var altura = document.getElementById("idAltura").value;
   var peso = document.getElementById("idPeso").value;

   CalculoIMCAjax.calcularImc(peso, altura, { 
    callback:function(resultado){
     document.getElementById('divResultado').innerHTML = resultado;
    }
   });
      }   
   

 
 







    Altura (m)    
 Peso (kg) 











The expected result will be:



&nbsp;Wait for new posts!