Saturday, September 28, 2013

Liferay Portlet Displaying AUI Date Time

Nagul Meera Mahankali

Liferay Portlet Displaying AUI Date Time.

Objective:

Display date time and date with different ways in liferay development.

I have displayed date and date time using life ray dete picker. Liferay date picker display date with minimal code in jsp so that we can display date or calendar in different ways.

I have created different dates or calendar in different ways and in back end means action class I collected selected date.

I have collected date in different ways like direct date format, date as string format and date as mille seconds,

Download the liferay portlet from following URL

https://sourceforge.net/projects/meeralferay/files/LiferayAUIDateTime/

I am providing war file and source code portlet. You can directly place war file your liferay portal deploy folder it will be deployed.

The port let available in sample category as Display Date Action.

The following is sample code to display date:

The following is jsp code

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<aui:input name="startDateHidden" id="startDateHidden" type="hidden" value="" ></aui:input>

<aui:script>

var startDatePicker;

AUI().use(

'aui-datepicker',

function(A) {

startDatePicker=new A.DatePickerSelect(

{

appendOrder: ['m', 'd', 'y'],

calendar: {

dateFormat: '%m/%d/%Y',

}

).render('#myDatePicker');

function submitForm(){

var startDate;

var endDate;

A.one("#<portlet:namespace/>startDateHidden").
set('value',startDatePicker.calendar.getFormattedSelectedDates ()[0]);

document.<portlet:namespace/>date.submit();

}

</aui:script>

Action class getting date:

DateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy");

Date startDate=ParamUtil.getDate(actionRequest,"startDateHidden", dateFormat);

String startDateString=ParamUtil.getString(actionRequest,"startDateHidden");

Important Points:

Display only date using AUI library
Display Date in different formats
Display date and time using AUI and liferay Time tag.
Get the date in action class in different formats.
Validate two dates.

Note:

I have done this in liferay 6.1 CE. If you are using other version simple use my code.
All out put you can see in console. In console you can see all information.
For more details you can walk through jsp code and action class code.

Screen Shots:

The following are reference links

http://alloyui.com/versions/1.5.x/api/classes/DatePickerSelect.html

http://alloyui.com/versions/1.5.x/api/classes/Calendar.html#attr_date

http://www.jsrosettastone.com/

http://blogs.xtivia.com/home/-/blogs/liferay-alloy-ui-calendar-datepicker-and-datepickerselect

https://www.liferay.com/community/forums/-/message_boards/message/13395530

http://onelife4all.blogspot.sg/2012/10/alloyui-datepicker.html

https://www.liferay.com/community/forums/-/message_boards/message/13230173

http://onelife4all.blogspot.sg/2012/10/alloyui-datepicker.html

http://alloyui.com/versions/1.5.x/examples/datepicker/real-world/

Liferay PDF generation from HTML using flying saucer

Nagul Meera Mahankali

Liferay PDF generation from HTML using flying saucer

Objective:

Generate PDF content in liferay using html content. Generally we use itext library to generate pfd. When we use itext library we need to write so much java code to prepare PDF. I have done example which generate PDF by using html.

I am using one of library called flying saucer from this we can convert xhtm or html content as PDF.

We can also apply CSS to html so that same view we can get in PDF. For more details you can follow the link.

https://code.google.com/p/flying-saucer/

Download porlet from following link

https://sourceforge.net/projects/meeralferay/files/LiferayPDF/

In download link I am providing .war and source code.

If you want use .war file simply download war file and place into your liferay portal deploy directory then it will be deployed and portlet is available in sample category and portlet name is Pdf Action.

I have done simple example so that you can get idea to generate PDF using html.

I just hard code some HTML table in action class I am passing html content to flying saucer it will convert the html to PDF.

You can go through the code you will get more info.

I have used liferay 6.1 CE.

Note:

If you are using lower version you just copy portlet class code and jar files to you existed portlet. Otherwise portlet won’t be deployed.

If you get any problem in download file is not able to view or no data in download file please refer this following link

https://www.liferay.com/community/forums/-/message_boards/message/31500678

Liferay DWR JSON Web services portlet

Nagul Meera Mahankali

Download portlet from following link

https://sourceforge.net/projects/meeralferay/files/LiferayDWRJSONWebservices/

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-class>org.directwebremoting.servlet.DwrListener</listener-class>

</listener>

<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>

<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>

<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>

</allow>

</dwr>

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

Add following java script files in your jsp

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">

</create>

Java script call in jsp page

Engine.js is common for all….

Final code in jsp page

<%@include file="init.jsp"%>

<h1>Sample Liferay DWR JSON portlet</h1>

<p>

<br/>

Reply: <span id="demoReply"></span>

</p>

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>

http://directwebremoting.org/dwr/documentation/browser/xdomain.html

Liferay version 6.1x

Liferay DWR portlet

Nagul Meera Mahankali

Download portlet from following link

https://sourceforge.net/projects/meeralferay/files/LiferayDWR/

Steps to create DWR Portlet

Create MVC portlet using Liferay IDE

Configure DWR serve let in portlet web.xml file.

<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>

<init-param>

<param-name>activeReverseAjaxEnabled</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>crossDomainSessionSecurity</param-name>

<param-value>false</param-value>

</init-param>

<init-param>

<param-name>initApplicationScopeCreatorsAtStartup</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>maxWaitAfterWrite</param-name>

<param-value>-1</param-value>

</init-param>

<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 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

<allow>

</allow>

</dwr>

Create Java class based on your need

In my example my java class is com.meere.dwr.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 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

<allow>

</create>

</allow>

</dwr>

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

Add following java script file in your jsp

Note:

In above Person.js and engine.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">

</create>

Java script call in jsp page

Engine.js is common for all….

Final code in jsp page

<h1>Sample Liferay DWR portlet</h1>

<button id="checkDwr">GetName Using DWR</button>

</script>

$(document).ready(function(){

$("#checkDwr").click(function(){

Person.getData(42, {

callback:function(str) {

alert(str);

}

});

</script>

Liferay version 6.1x

Saturday, September 28, 2013

Liferay Portlet Displaying AUI Date Time