Applying jQuery 1.5 and UI 1.8.9 in Liferay 6.1

jQuery 1.5 updates on both jQuery Core and UI. This release included many performance improvements and bug fixes as well as a major re-write of the Ajax module which now comes with deferred callback management. jQuery Core also introduced a new feature called jQuery.sub which allows for new copies of jQuery to be created where properties and methods can be safely modified without affecting the global jQuery object. Refer to http://jquery.com/.

In previous blogs posts, following topics have beed addressed.

This post will address how to apply jQuery 1.5 and UI 1.8.9 in liferay 6.1 (at revision 72877 - this is the development version, it will become in the future the next version of Liferay portal).

Introduction

UI 1.8.9 (with jQuery 1.5) is much same as that of UI 1.8.5 in Liferay 6.0.

The following are a few screenshots.

 

 

  

 

 

 

How to achieve this?

The way to apply jQuery 1.5 and UI 1.8.9 in Liferay 6.1 is almost same as that of   jQuery 1.4.* and UI 1.8.5 in Liferay 6.0. The following items show differences

  • Use DTD 6.1

liferay-portlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">

liferay-display.xml.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE display PUBLIC "-//Liferay//DTD Display 6.1.0//EN" "http://www.liferay.com/dtd/liferay-display_6_1_0.dtd">

  • apply jquery 1.5 and UI 1.8.9 in liferay-portlet.xml

<portlet>
    <portlet-name>1</portlet-name>
    <icon>/images/world.png</icon>
    <header-portlet-css>/css/ui-lightness/jquery-ui-1.8.9.custom.css</header-portlet-css>
    <header-portlet-javascript>/js/jquery-1.5.min.js</header-portlet-javascript>
    <footer-portlet-javascript>/js/jquery-ui-1.8.9.custom.min.js</footer-portlet-javascript>
    <css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
</portlet>

Download 

You can simply download WAR of Sample jQuery 1.5 and UI 1.8.9 plugin.

Liferay 6.1: sample-jquery-portlet-6.1.0.1.war

And then deploy it in Liferay 6.1.

Of course, you can test the same at Liferay 6.0.

Liferay 6.0: sample-jquery-portlet-6.0.5.1.war

That's it.

Blogs
Hi Jonas,

Thanks for the article, it's great that you always pick interesting topics that complement those blogged by Liferay employees.

I'd like to make a suggestion for this one. I'm concerned that mentioning Liferay 6.1, which does not exist, will confuse a lot of people. Can you change it so that it says Liferay 6.0 or otherwise "the development version of what will become in the future the next version of Liferay"?

Thanks,
Jorge
I can download it, it is "Forbidden"
I mean I can't download it, it said "Forbidden" .
Thanks, Jenny.

Just corrected the permission settings. Now you would be able to download WAR.

By the way, for Liferay 6.1 (development version), you may use sample-jquery-portlet-6.1.0.1.war;

For Liferay 6.0, you should use sample-jquery-portlet-6.0.5.1.war.
Thanks a lot, Jorge!

Added your suggestions in the post. Hope that there were no confusion on Liferay 6.1 from now on.
Hi Jonas,

Thanks for the change. I would still like to ask you to make the change more clear. In particular I would like to ask you to avoid using "6.1" at all, since that is not an official release. Although it is very probable that the next version will have that number, it is not official and thus should not be used to avoid confusion if it ends up not being used.

I hope you understand and avoid using "6.1" in the future when giving specific instructions.
In the generated liferay-portlet.xml (Liferay 6.1), there are already these elements under <portlet>:
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>mytest-portlet</css-class-wrapper>
Should I overwrite them with what you provided above, i.e. replace the above with these elements:
<header-portlet-css>/css/ui-lightness/jquery-ui-1.8.9.custom.css</header-portlet-css>
<header-portlet-javascript>/js/jquery-1.5.min.js</header-portlet-javascript>
<footer-portlet-javascript>/js/jquery-ui-1.8.9.custom.min.js</footer-portlet-javascript>
<css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
Or should I append what you provided to the auto-generated part ?
I am trying to make Jquery work, but it is not. Should it work with prime Faces/ Rich Faces based portlet ?
hello Atif,
I am glad to hear that you are working liferay faces + primefaces. Because I am too working that environment. I have the problem that you mentioned there. If you found the solution for that please share me, Thanks in advance