Tuesday 11 August 2015

Liferay DWR Integration

What is DWR?
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. DWR is develop on top of AJAX.

DWR will generate the JavaScript to allow web browsers to securely call into Java code almost as if it was running locally. It can marshal virtually any data including collections, POJOs, XML and binary data like images and PDF files.
In Reverse Ajax, DWR allows Java code running on a server to use client side APIs to publish updates to arbitrary groups of browsers. This allows interaction 2 ways - browser calling server and server calling browser. DWR supports Comet, Polling and Piggyback (sending data in with normal requests) as ways to publish to browsers.

Here we are going to integrate DWR with Liferay Spring MVC Portlet and we will call server method from Javascript.

Before start, I have assumed that you have created Liferay Spring MVC portlet and you need below additional steps.

Step-1 : Add below code in web.xml file

                <servlet>
                <servlet-name>DwrServlet</servlet-name>
                <servlet-class>org.directwebremoting.spring.DwrSpringServlet</servlet-class>
                                <init-param>
                                    <param-name>crossDomainSessionSecurity</param-name>
                                    <param-value>false</param-value>
                                </init-param>
                </servlet>
                <servlet-mapping>
                                <servlet-name>DwrServlet</servlet-name>
                                <url-pattern>/dwr/*</url-pattern>
                </servlet-mapping>

Step-2 : Add below code in  Spring Application context xml file

  • Add/Update below line in <beans> tag in this file.

               (Update) :  xsi:schemaLocation="http://www.springframework.org/schema/beans
                                                http://www.springframework.org/schema/beans/spring-beans-3.0.xsd       
                                                http://www.directwebremoting.org/schema/spring-dwr
                                                http://www.directwebremoting.org/schema/spring-dwr-3.0.xsd"
               
  • Add below tag in this file.

                <dwr:configuration/>
                <dwr:controller id="dwrController" debug="true" />
                <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
                                <property value="true" name="alwaysUseFullPath"></property>
                                <property name="mappings">
                                <props>
                                                <prop key="/dwr/**/*">dwrController</prop>
                                </props>
                                </property>
                               
                </bean>
                <bean id="SampleMVCDWR" class="com.sample.dwr.controller.SampleMVCDwrController">
                    <dwr:remote javascript="SampleMVCDWR">
                                   <dwr:include method="getDataFromDWRMethod" />
                    </dwr:remote>
      </bean>

Here SampleMVCDwrController is my controller class and getDataFromDWRMethod is method in controller class which will call from JavaScript.

Step -3 : Controller Class

@Controller
@RequestMapping("VIEW")
public class SampleMVCDwrController {
               
                private static final Log log = LogFactoryUtil.getLog(SampleMVCDwrController.class);
  
                @RenderMapping
                public String defaultViewMethod(Locale locale, Model model) {
                                log.info("iniside default view method");
                                return "view";
                }
                public String getDataFromDWRMethod(String str) {
                                log.info("iniside DWR sample method");
                     return str + " + modified in server response";
                }
}

Step - 4 : Changes in JSP file

Add below script in view.jsp file.
<script type='text/javascript' src='/sample-dwr-mvc-portlet/dwr/engine.js'></script>
<script type='text/javascript' src='/sample-dwr-mvc-portlet/dwr/util.js'></script>
<script type='text/javascript' src='/sample-dwr-mvc-portlet/dwr/interface/SampleMVCDWR.js'></script>

here "sample-dwr-mvc-portlet" is my portlet name and SampleMVCDWR.js name must be match with  bean in define in Spring application context file.

Below is the Script to call controller method from JavaScript.

<script>
                function getDataFromServer() {
                                var inputStr =$("#inpurStr").val();
                                SampleMVCDWR.getDataFromDWRMethod(inputStr,{
                                                 callback: getDataFromServerCallBack
                     });
                }
                                               
                function getDataFromServerCallBack(dataFromServer) {
                                alert(dataFromServer);
    }
                               
</script>
<input type="text" id="inpurStr" name="str"/>               
<input type="button" value="GET DATA" onclick="getDataFromServer(); return false;">             

Here in this our example I have taken one input field and one button. on click of button JavaScript function getDataFromServer() will call and it will call JAVA class method getDataFromDWRMethod() and get response from  in callback function.

SampleMVCDWR.js file is created by DWR which include your controller class’s method compatible with JavaScript and engine.js and engine.js are supporting file for DWR.

You can get more information about DWR here in below link.

Difference between DWR and AJAX:

If you have any question or want any more information then let me know.

No comments:

Post a Comment