Applying jQuery and its custom UI in Liferay 6 plugins

As you have been noticed, 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.

Starting from Liferay 6, the portal uses Alloy UI (which is built on top of YUI3) instead of jQuery. That is, jQuery is no longer included by default. Therefore, you can use any version of jQuery as you need for your custom plugins. Refer to blogs posts Building jQuery based plugins in Liferay 6, Using jQuery (or any Javascript library) in Liferay 6.0, etc.

This article will address what jQuery UI looks like in Liferay 6 plugins and how to apply it in portlets. Here I use jQuery 1.4.3 and custom UI 1.8.5 as an example. Liferay portal version is CE 6.0.5 GA 3.

Introduction

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

The following are sample screenshots.

Slider

DatePicker - Display multiple months

Accordion

 Tabs and Progress Bar

 Auto Complete

 Resizable and Draggable

Animate

Building jQuery custom UI plugin

Abstracted from the book: Liferay User Interface Developement (coming out soon).

1) Create a plugin in plugins SDK.

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

2) 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/ui-lightness/jquery-ui-1.8.5.custom.css</header-portlet-css>
   <header-portlet-javascript>/js/jquery-1.4.3.min.js</header-portlet-javascript>
   <footer-portlet-javascript>/js/jquery-ui-1.8.5.custom.min.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.

Similarly, the property header-portlet-css sets the path of CSS that will be referenced in the page's header relative to the portlet's context path; while the property footer-portlet-css sets the path of CSS that will be referenced in the page's footer relative to the portlet's context path.

Note that these properties have been specified as * in liferay-portlet-app_6_0_0.dtd or liferay-portlet-app_6_1_0.dtd.

header-portlet-css*,
header-portlet-javascript*,
footer-portlet-css*,
footer-portlet-javascript*,

It means that you can include multiple CSS files and/or JavaScript files.

3) Add JSP files under the folder /docroot/jsp

Do-It-Yourself information

You can simply download WAR of Sample jQuery plugin.

sample-jquery-portlet-6.0.6.1.war

And then deploy it. That's it.

Enjoy!

[Puj Z]

Hi Jonas,

Thanks for the article! Is it clear when is the release date of 6.1? (or the next GA?)

[Jonas X. Yuan]

Hi Puj, thanks.

The release date of 6.1 is unclear at moment - it is expected at the beginning of new year, ...

[Prakash Khanchandani]

Hi Jonas,

Thanks for the wonderful article and the sample WAR.
It helped me a lot

[Mathew David]

ook me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenter here! It's always nice when you can not only be informed, but also entertained 350-018 dumps | 642-447 dumps | 156-215.71 dumps | 000-105 dumps | E20-001 dumps | 646-364 dumps | 70-652 dumps | MB5-858 dumps | EX0-101 dumps | 640-863 dumps | 000-979 dumps | 000-119 dumps |

[Nabil Bahtat]

Hi Jonas,
I tried to use jquery as you suggested but it does not work.
Please can you help me ?

I'm using liferay-portal-6.1.2-ce-ga3 tomcat bundle.
I just override view.jsp in blog portlet and I need to use jquery Inside this page.
I modified liferay-portlet.xml file which is under C:\liferay-portal-6.1.2-ce-ga3\tomcat-7.0.40\webapps\ROOT\WEB-INF and added
<header-portlet-css>/css/jquery.alerts.css</header-portlet-css>
<header-portlet-javascript>/js/jquery.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/jquery.ui.draggable.js</header-portlet-javascript><header-portlet-javascript>/js/jquery.alerts.min.js</header-portlet-javascript>
I have all this file Inside my hook plugin under my-hook/js and my-hook/cs
I have an error jQuery is not defined.
It seems that the jquey files are not loaded.

I realy need your help.
Thanks a lot.
Nabil