Monday, June 18, 2012

DWR Hello World example

DWR - Direct Web Remoting

DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible. In simple words DWR is Easy Ajax for Java. Unlike AJAX you don't have to write codes to get XHTML object or check for state change etc. To know more about DWR, click here.

DWR is supported by almost all browsers like Firefox,Internet Explorer,Opera and Safari. To know more, click here.

About the example

We will create a simple java class (i.e HelloWorld.java) with a method sayHello() which will accept a name and print Hello name. We can call this java fuction with JavaScript in a browser. Same as Ajax call without refreshing the whole page.

Below are the steps to run the example.

1. For running the below example you need to add below mentioned JAR file in lib folder of your web project.

  • dwr.jar
  • commons-logging-1.1.1.jar 

For downloading dwr.jar, click here
commons-logging-1.1.1.jar, click here.


2. Add the DWR servlet definition and mapping to your application's web.xml. This is just like defining a normal servlet.


<servlet>
  <display-name>DWR Servlet</display-name>
  <servlet-name>dwr-invoker</servlet-name> 
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
</servlet>
 
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>


3. Create the DWR configuration file (dwr.xml). Create this file in WEB-INF folder alongside web.xml.

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
    "http://getahead.org/dwr/dwr30.dtd">
<dwr>
  <allow>
    <create creator="new" javascript="Demo">
      <param name="class" value="com.javaxp.dwr.HelloWorld"/>
    </create>
  </allow> 
</dwr>

Note : we will create a class HelloWorld in next step.

4. Now we will create our Java Class (i.e. HelloWorld.java)

package com.javaxp.dwr;
 
public class HelloWorld {
               
                public String sayHello(String name) {
                                System.out.println("sayHello called : "+name);
                                return "Hello "+name+"!!";
                }
}

To test the setups done so far go to the below link. (Assuming our webproject is DWRExample ) http://localhost:8080/DWRExample/dwr





Clicking Demo you should see below screen.



5. Now lets create our custom JSP (lets say index.jsp) to test DWR.


<html>
<html>
<head>
<title>DWR Hello World Example</title>
<script type='text/javascript' src='/DWRExample/dwr/engine.js'></script>
<script type='text/javascript' src='/DWRExample/dwr/interface/Demo.js'></script>
<script type='text/javascript' src='/DWRExample/dwr/util.js'></script>
<script language="javascript">
<!--
function callDWR() {
Demo.sayHello($("name").value, callBack);
return false;
}
function callBack(data) {
alert(data);
if (data != null && typeof data == 'object')
alert(dwr.util.toDescriptiveString(data, 2));
else
dwr.util.setValue('greet', dwr.util.toDescriptiveString(data, 1));
}
//-->
</script>
</head> 
<body>
DWR Hello World Example
<form onsubmit="return callDWR();">
<input id="name" type="text"/><span id="greet"></span>
<br/>
<input type="submit" value="submit"/>                             
</form>
</body>
</html>

Output




8 comments:

  1. I was wondering if you ever considered changing the structure of
    your website? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content
    so people could connect with it better. Youve got an awful lot of text for only having 1 or
    2 images. Maybe you could space it out better?

    Look into my blog post Louis Vuitton Handbags

    ReplyDelete
  2. wonderful issues altogether, you simply gained a new reader.

    What could you recommend about your put up that you made some days in the past?

    Any sure?

    Have a look at my site: Air jordan 2013

    ReplyDelete
  3. I read this article completely on the topic of the resemblance of
    latest and preceding technologies, it's remarkable article.

    Feel free to visit my webpage - Christian Louboutin Heels

    ReplyDelete
  4. Hey! I know this is somewhat off topic but I was wondering if
    you knew where I could get a captcha plugin for my comment form?
    I'm using the same blog platform as yours and I'm having difficulty finding one?

    Thanks a lot!

    My site :: Sac A Main Louis Vuitton

    ReplyDelete
  5. Having read this I believed it was very enlightening.

    I appreciate you taking the time and energy to put this content together.
    I once again find myself spending way too much time both
    reading and posting comments. But so what, it was
    still worth it!

    My blog post ... Cheap NFL Jerseys (http://www.maxleticssports.com/)

    ReplyDelete
  6. Hey there! Do you know if they make any plugins to help with Search Engine Optimization?
    I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good success.
    If you know of any please share. Many thanks!

    Also visit my site: Chaussure De Foot

    ReplyDelete
  7. I do trust all of the ideas you've offered for your post. They're really convincing
    and will certainly work. Nonetheless, the posts are very quick for starters.
    May just you please lengthen them a little from
    next time? Thank you for the post.

    Review my web-site :: Nike Free

    ReplyDelete
  8. What i do not understood is in reality how you're no longer really much more well-favored than you may be now. You're very intelligent.
    You recognize therefore considerably with regards to this matter, made me in my opinion consider it from a lot of numerous
    angles. Its like men and women aren't fascinated except it is something to accomplish with Woman gaga! Your personal stuffs outstanding. Always take care of it up!

    My blog post :: Boutique Air Max

    ReplyDelete