Learn and shine

Friday, September 16, 2011

Getting Started With DWR

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.

Wednesday, September 14, 2011

Spring MVC MultiActionController - simple login application

Hello All,

Here i am posting simple Spring MVC example with IOC(setter , Constructor Injection).

Follow the steps to execute the program in your eclipse.

Step1 : Open Eclipse - Create new Dynamic Web Project

Step2 : After creating Project, open web.xml which is there inside created project.

edit Web.xml and add the below code.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" 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">
<display-name>spring-features</display-name>

<servlet>
<servlet-name>springweb</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>springweb</servlet-name>
<url-pattern>*.htm</url-pattern>
</servlet-mapping>

</web-app>

Step 3: As per above web.xml code- the servlet name as springweb so As per spring mvc we have to create xml file called springweb-servlet.xml under WEB-INF

Step 4: Inside springweb-servlet.xml , we have to put configuration details for the controller's, jsp pages., IOC information. as mentioned below.

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd;

<props>

<prop key="login.htm">loginController</prop>

<prop key="success.htm">loginController</prop>

</props>

</property>

</bean>

<constructor-arg type="int" value="27"/>

<constructor-arg type="java.lang.String" value="raju"/>

</bean>

</bean>

</beans>

Step 5: Create LoginForm.java inside src folder- under any package

package com.siva.form;
import java.io.Serializable;
public class LoginForm implements Serializable {

private static final long serialVersionUID = 1L;
private String userName;
private String password;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}

Step 6: Create LoginController which extends MultiActionController,

package com.siva.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;
import com.siva.form.LoginForm;

public class LoginController extends MultiActionController {

public LoginForm loginForm;
private String name;
private String age;

public LoginController(){
}

//This is constructor type setting in IOC - Check on springweb-servlet.xml for further reference.
//If you are still confusing the Study IOC basics.

public LoginController (String name1 , int age1)
{
System.out.println("Name------" + name1);
System.out.println("Age------" + age1);
}

/**
* This method has been called when ever the user enter login.htm under project.
* In this GetName, getAge methods are one way of IOC through set methods. We set the values
* in springweb-servlet.xml as a property and value. So when ever we called respective get methods
* we will get the results from the springweb-servlet.xml.
*/

public ModelAndView login(HttpServletRequest request, HttpServletResponse response, LoginForm form) {

ModelAndView mav = new ModelAndView();
System.out.println("Name for the set IOC " + getName());
System.out.println("Age for the set IOC " + getAge());
mav.addObject("loginForm",form);
mav.addObject("login");
return mav;
}

/**
* This method also will after enter the username and password in login page.
* It will check whether user name is 'siva' and password is 'raju'. if it's true then
* it will redirect to the success page. otherwise it will remain in the same page
*/

public ModelAndView success(HttpServletRequest request, HttpServletResponse response, LoginForm form){
ModelAndView mav = new ModelAndView();
//User Enter name and password
System.out.println("UserName----" + form.getUserName());
System.out.println("Password-----" + form.getPassword());

// Injected name and age through IOC
System.out.println("Name for the set IOC " + getName());
System.out.println("Age for the set IOC " + getAge());
mav.addObject("loginForm",form);
if(form.getUserName() != null && form.getUserName().equalsIgnoreCase("siva") &&
form.getPassword() != null && form.getPassword().equalsIgnoreCase("raju")) {
mav.setViewName("success");
}
else{
mav.setViewName("login");
}
return mav;
}
public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getAge() {
return age;
}

public void setAge(String age) {
this.age = age;
}
}

Step 7 : Create login.jsp, success.jsp . Place these 2 jsp pages under WEB-INF/jsp/

login.jsp

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<body>

<form:form commandName="loginForm" id="loginForm"

action="success.htm" method="POST" >

Username <form:input path="userName"/> </br>

Password <form:input path="password"/></br> <

input type="submit" value="Login"/>

</form:form>

</body>

</html>

success.jsp

success

Step 8: Add required jar's

commons-beanutils-1.7.0.jar
commons-digester-1.8.jar
commons-lang-2.4.jar
commons-logging-1.1.1.jar
commons-pool-1.3.jar
commons-validator-1.3.1.jar
j2ee.jar
jstl-1.1.0.jar
log4j-1.2.15.jar
spring-2.5.6.jar
spring-beans.jar
spring-context.jar
spring-modules-validation.jar
spring-security-core-2.0.4.jar
spring-web.jar
spring-webmvc.jar
standard.jar

all the above jar's can be used to run the application.

Learn and shine

Friday, September 16, 2011

Getting Started With DWR

Wednesday, September 14, 2011

Spring MVC MultiActionController - simple login application

AddToAny

Contact Form