This post contains the information about the DWR usage.
DWR- Direct Web Remoting is a java library that enables java on the server and JavaScript in a
browser to interact and call evch other as simply as possible.
DWR is Easy Ajax for Java.
DWR is a concept to implement Ajax based applications in java side.
I am posting the simple Dynamic Address Entry example. But you can modify this according to your requirement like fetching the data from data base, and assign that values to the respective inuput values. Here i am writing with simple hard coded data.
Follow below steps to learn DWR in minutes.
Step 1 : Start the eclipse- File -New- Dynamic web project- [provide project name] eg: dwr-project
Step 2: Open web.xml which is there in inside WEB-INF. Add the dwr related classes configuration.
Web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app id="dwr" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
Step 3: create one foldercalled address inside WebContent
Step 4: create index.html inside address folder which we created in Step 3.
index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Dynamic Address Entry Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<script type='text/javascript' src='../dwr/engine.js'>
</script> <script type='text/javascript' src='../dwr/util.js'>
</script>
<script type='text/javascript' src='../dwr/interface/AddressLookup.js'> </script>
<script type="text/javascript" src='index.js'> </script>
</head>
<body>
<h1>Dynamic Address Entry With DWR</h1>
<p>This is a practical example of making form fill easier for users, and howsimple this is with
DWR.</p>
<div id="tabContents">
<div id="demoDiv">
<p>We can enter the below Post codes in the post code text box, and check the address fill up in the respective text boxes. In the same way we can save the details in data base and call the respective function.</p>
<ul>
<li>600041</li>
<li>400708</li>
<li>400707</li>
<li>508517</li>
<li>516269</li>
</ul>
<table class="plain">
<tr>
<td>Postcode:</td>
<td>
<input id="postcode" type="text" onkeyup="fillAddress()" onchange="fillAddress()"
onkeypress="fillAddress()"/>
</td>
</tr>
<tr>
<td>House name/number:</td>
<td><input id="house" type="text"/></td>
</tr> <tr>
<td>Line 2:</td> <td><input id="line2" type="text"/></td>
</tr> <tr>
<td>Line 3:</td> <td><input id="line3" type="text"/></td> </tr> <tr> <td>Line 4:</td> <td><input id="line4" type="text" size="30"/></td>
</tr> </table>
<p> </p> <p> </p>
</div>
</div>
</body></html>
In the index.html the bold lines are important. we no need to create AddressLookup.js, but we have to mention this. This should be same like a java class name.
Step 5: create index.js under address folder. this index.js is used to get the deatils from java and append the details in html page with out page refreshing.
index.js
function fillAddress() {
var postcode = dwr.util.getValue("postcode");
AddressLookup.fillAddress(postcode, function(address) {
dwr.util.setValue("house", address.house);
dwr.util.setValue("line2", address.line2);
dwr.util.setValue("line3", address.line3);
dwr.util.setValue("line4", address.line4);
});
}
Step 6: Create one AddressLookup java class under src folder ,
This class is having all the data. It might be database data or any type of data.
Here i am mentioning Hard coded data.
AddressLookup.java
package com.siva;
import java.util.HashMap;
import java.util.Map;
import org.directwebremoting.util.LocalUtil;
public class AddressLookup
{
private static final String LINE4 = "line4";
private static final String LINE3 = "line3";
private static final String LINE2 = "line2";
private static final String HOUSE_NO = "house";
/**
* @param origpostcode the code to lookup
* @return a map of postcode data
*/
public Map fillAddress(String origpostcode)
{
Map reply = new HashMap();
String postcode = LocalUtil.replace(origpostcode, " ", "");
if (postcode.equalsIgnoreCase("600041"))
{
reply.put(HOUSE_NO, "14/1 FLAT NO- G3");
reply.put(LINE2, "Kalakhestra Road");
reply.put(LINE3, "TiruvanMiyur");
reply.put(LINE4, "Chennai");
}
else if (postcode.equalsIgnoreCase("400708"))
{
reply.put(HOUSE_NO, "Door NO 201");
reply.put(LINE2, "Sakinaka Road");
reply.put(LINE3, "Airoli");
reply.put(LINE4, "Navi Mumbai");
}
else if (postcode.equalsIgnoreCase("400707"))
{
reply.put(HOUSE_NO, "Door No 202");
reply.put(LINE2, "Mullund Road");
reply.put(LINE3, "Vashi");
reply.put(LINE4, "Navi Mumbai");
}
else if (postcode.equalsIgnoreCase("508517"))
{
reply.put(HOUSE_NO, "Door No 345");
reply.put(LINE2, "Bangalore Road");
reply.put(LINE3, "Balaji Colony ");
reply.put(LINE4, "Tirupathi");
}
else if (postcode.equalsIgnoreCase("516269"))
{
reply.put(HOUSE_NO, "Door No 234");
reply.put(LINE2, "Bangalore Road");
reply.put(LINE3, "Kothapeta");
reply.put(LINE4, "Rayachoty");
}
else
{
reply.put(LINE2, "Postcode not found");
reply.put(LINE3, "");
reply.put(LINE4, "");
}
return reply;
}
}
Step 7: create dwr.xml inside WEB-INF
dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="AddressLookup">
<param name="class" value="com.siva.AddressLookup"/>
</create>
</allow>
</dwr>
Step 8 : Add below jars in the lib folder
bsf-2.3.jar
bsh-2.0b4.jar
commons-logging-1.0.4.jar
commons-validator-1.1.4.jar
dwr.jar
jakarta-oro-2.0.8.jar
log4j-1.2.12.jar
Step 9: Right click on the project and Run As Server- After successful run open the browser.
enter the post code which mentioned in the index.html.
Automatically the data has beed in filled in the remaining text boxes. in this way DWR work. you can explore more things on the DWR (http://directwebremoting.org/dwr/index.html)
Address bar has to be given in the following way
http://localhost:8080[portnumber]/dwr_project[projectname]/address/index.html
Step 10 : your DWR application started.
Download the source code for this project from here.
DOWNLOAD
SOURCE CODE
After downloading Unzip this and import into eclipse, and run project - Run as Server.
Showing posts with label Simple example with DWR. Show all posts
Showing posts with label Simple example with DWR. Show all posts
Friday, September 16, 2011
Subscribe to:
Posts (Atom)