Thursday, August 15, 2013

Liferay DWR JSON Web services portlet

Download portlet from following link


portlet war file you can directly place into your deploy directory It will be deployed.
Make sure liferay version should be 6.1x
You can  get source code too..

Steps to create Liferay JSON DWR Portlet

Create MVC portlet using Liferay IDE

Configure DWR serve let in  portlet web.xml file.

<listener>
              <listener-class>org.directwebremoting.servlet.DwrListener</listener-class>
       </listener>
       <servlet>
              <servlet-name>dwr-invoker</servlet-name>
              <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
              <init-param>
                     <param-name>fileUploadMaxBytes</param-name>
                     <param-value>25000</param-value>
              </init-param>

              <!-- This should NEVER be present in live -->
              <init-param>
                     <param-name>debug</param-name>
                     <param-value>true</param-value>
              </init-param>

              <init-param>
                     <param-name>accessLogLevel</param-name>
                     <param-value>runtimeexception</param-value>
              </init-param>

              <!-- Remove this unless you want to use active reverse ajax -->
              <init-param>
                     <param-name>activeReverseAjaxEnabled</param-name>
                     <param-value>true</param-value>
              </init-param>

              <!-- By default DWR creates application scope objects when they are first
                     used. This creates them when the app-server is started -->
              <init-param>
                     <param-name>initApplicationScopeCreatorsAtStartup</param-name>
                     <param-value>true</param-value>
              </init-param>

              <!-- WARNING: allowing JSON-RPC connections bypasses much of the security
                     protection that DWR gives you. Take this out if security is important -->
              <init-param>
                     <param-name>jsonRpcEnabled</param-name>
                     <param-value>true</param-value>
              </init-param>

              <!-- WARNING: allowing JSONP connections bypasses much of the security
                     protection that DWR gives you. Take this out if security is important -->
              <init-param>
                     <param-name>jsonpEnabled</param-name>
                     <param-value>true</param-value>
              </init-param>

              <!-- data: URLs are good for small images, but are slower, and could OOM
                     for larger images. Leave this out (or keep 'false') for anything but small
                     images -->
              <init-param>
                     <param-name>preferDataUrlSchema</param-name>
                     <param-value>false</param-value>
              </init-param>

              <!-- For more information on these parameters, see: - http://getahead.org/dwr/server/servlet
                     - http://getahead.org/dwr/reverse-ajax/configuration -->
              <load-on-startup>1</load-on-startup>
       </servlet>

       <servlet-mapping>
              <servlet-name>dwr-invoker</servlet-name>
              <url-pattern>/dwr/*</url-pattern>
       </servlet-mapping>

Create dwr.xml file in WEB-INF directory of your portlet
Add following tags in dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
  <allow>
 
  </allow>
</dwr>

Create Java class based on your need

In my example my java class is com.meere.dwr.json.Person.java

Configure java class in dwr.xml files

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
  <allow>
  <create creator="new" javascript="Person">
      <param name="class" value="com.meera.dwr.json.Person"/>
    </create>
  </allow>
</dwr>

Access your java class in your jsp page i.e.  Client side

Add following java script files in your jsp

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/interface/Person.js'> </script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/engine.js'> </script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/util.js'> </script>

Note:
In above Person.js and engine.js,util.js file physically not existed any where  don’t worry .
And whatever the attribute value you used for JavaScript in dwr.xml file  by that name your client side java script will be created i.e. in my case Person.js

dwr.xml

<create creator="new" javascript="Person">
      <param name="class" value="com.meera.dwr.json.Person"/>
    </create>

Java script call in jsp page

<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/interface/Person.js'> </script>

Engine.js is common for all….

<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/engine.js'> </script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/util.js'> </script>


Final code in jsp page


<%@include file="init.jsp"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/interface/Person.js'> </script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/engine.js'> </script>
<script type='text/javascript' src='<%=renderRequest.getContextPath()%>/dwr/util.js'> </script>
<h1>Sample Liferay DWR JSON portlet</h1>
<p>
  <input value="Send" type="button" onclick="update()"/>
  <br/>
  Reply: <span id="demoReply"></span>
</p>

<script>
function update() {
    var name = dwr.util.getValue("demoName");
    $.post("<%=renderRequest.getContextPath()%>/dwr/jsonp/Person/getData/", { },
        function(data) {
            dwr.util.setValue("demoReply", data.reply[0]);
        }, "jsonp");
    }
</script>



Important Points:

To enable JSON services we need to add following init param value in web.xml

<init-param>
<param-name>jsonpEnabled</param-name>
<param-value>true</param-value>
</init-param>

If you get any session error or CSRF security error add following init parameter in web.xml. web.xml

<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>




Liferay version 6.1x

More details go through following link





Popular Posts

Recent Posts

Recent Posts Widget