Building jQuery based plugins in Liferay 6

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Refer to http://jquery.com/

Liferay portal 6 uses Alloy UI instead of jQuery, which means YUI3 (http://developer.yahoo.com/yui/3/) is included as core part, and jQuery is not included as core part anymore.  Ideally you can use whatever version of jQuery you need for your custom developments, refering to the blog post Can I have different jQuery versions in Liferay? and ticket LPS-10872.

This article will introduce how to build jQuery based plugins in Liferay 6. Hope that this article would be helpful to upgrade custom portlets from 5.1.x or 5.2.x to 6.x.

Build jQuery based plugins
Here I use Liferay 6.0.3 GA (revision 57559) and plugins SDK.

  • Build a project called “sample-jquery-portlet” with folder “docroot” and build.xml
  • Add CSS under the folder /docroot/css
  • Add images under the folder /docroot/css
  • Add jquery under the folder /docroot/js
  • Add liferay-display.xml, liferay-plugin-package.properties, liferay-portlet.xml, portlet.xml under the folder /docroot/WEB-INF

Especially, add following lines, for example, in the file liferay-portlet.xml.
<portlet>
    <portlet-name>1</portlet-name>
    <icon>/images/world.png</icon>
    <header-portlet-css>/css/style.css</header-portlet-css>
    <header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
    <footer-portlet-javascript>/js/jquery-ui-custom.js</footer-portlet-javascript>
    <css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
</portlet>

Note that the property header-portal-javascript sets the path of JavaScript that will be referenced in the page's header relative to the portal's context path; and the property footer-portal-javascript sets the path of JavaScript that will be referenced in the page's footer relative to the portal's context path.

  • Add JSP files under the folder /docroot/jsp.

Note that you may include addition JavaScript at JSP file like

<script type='text/javascript' src='js/jquery_1.4.2.js'></script>

Sample Screenshots

Testing environment: Liferay portal 6.0.2.and 6.0 GA (6.0.3 - revision 57559)

A few jQuery examples:

Fade in

Animate

Fade out

Do it yourself
You can download the WAR with source code at:

sample-jquery-portlet-6.0.2.1.war

and drop it to $PORTAL_HOME/deploy or use UI "Plugins Installation" under Control Panel. For more details, you may refer to the book Liferay Portal 6 Enterprise Intranets.

If you want to use different jQuery version other than 1.4.2, you can go to the folder ${sample.jquery.portlet.war}/js and update jquery.js with expected version.

Migration

Supposed that you have custom portlets heavily using jQuery in 5.1 or 5.2, now you are planning to migrate to 6.x.  You can simply add different version of jQuery jquery.js in portlet specification liferay-portlet.xml as follows.

<header-portlet-css>/css/style.css</header-portlet-css>
<header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
<footer-portlet-javascript>/js/jquery-ui-custom.js</footer-portlet-javascript>

That's it. It is simple, isn't it? your comments?

Write a blog post too!

Write a deep dive into how you use Liferay projects in your technology stack. Or let people know useful tips and tricks for a particular functionality. The Liferay community needs you!

Login or Create an account