« Back

Applying jQuery 1.5 and UI 1.8.9 in Liferay 6.1

General Blogs February 13, 2011 By Jonas Yuan

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.

Threaded Replies Author Date
Hi Jonas, Thanks for the article, it's great... Jorge Ferrer February 14, 2011 4:09 AM
I can download it, it is "Forbidden" Jenny Zhang February 14, 2011 6:34 AM
I mean I can't download it, it said "Forbidden" . Jenny Zhang February 14, 2011 7:00 AM
Thanks, Jenny. Just corrected the permission... Jonas Yuan February 14, 2011 10:24 AM
Can you explain how to use liferay taglibs? Dhana Sekar February 15, 2011 2:04 AM
Hi Dhana, thanks. You may refer to chapter 9 -... Jonas Yuan February 15, 2011 11:04 AM
Thanks a lot, Jorge! Added your suggestions... Jonas Yuan February 14, 2011 8:41 AM
Hi Jonas, Thanks for the change. I would still... Jorge Ferrer February 19, 2011 6:18 AM
Hi Jorge, thanks for your suggestions. Will... Jonas Yuan February 21, 2011 9:09 PM
By the way, just tested jQuery 1.6.2 and custom... Jonas Yuan July 11, 2011 7:36 AM
In the generated liferay-portlet.xml (Liferay... Roger Thal February 18, 2012 8:35 PM
Hi Roger, It should be fine to configure... Jonas Yuan February 21, 2012 1:23 PM
I am trying to make Jquery work, but it is not.... Atif Hussain March 2, 2013 12:40 AM
hello Atif, I am glad to hear that you are... Muhammed Shafeek V September 20, 2013 4:20 AM

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
Posted on 2/14/11 4:09 AM.
I can download it, it is "Forbidden"
Posted on 2/14/11 6:34 AM in reply to Jorge Ferrer.
I mean I can't download it, it said "Forbidden" .
Posted on 2/14/11 7:00 AM in reply to Jenny Zhang.
Thanks a lot, Jorge!

Added your suggestions in the post. Hope that there were no confusion on Liferay 6.1 from now on.
Posted on 2/14/11 8:41 AM in reply to Jorge Ferrer.
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.
Posted on 2/14/11 10:24 AM in reply to Jenny Zhang.
Can you explain how to use liferay taglibs?
Posted on 2/15/11 2:04 AM in reply to Jonas Yuan.
Hi Dhana, thanks. You may refer to chapter 9 - UI Taglib - of the book: Liferay User Interface Development

http://www.amazon.com/Liferay-User-Interface-Development-Jonas/dp/184­9512620/ref=pd_sim_b_3

Hope that it helps,
Posted on 2/15/11 11:04 AM in reply to Dhana Sekar.
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.
Posted on 2/19/11 6:18 AM in reply to Jonas Yuan.
Hi Jorge, thanks for your suggestions. Will apply your comments on future specific instructions.
Posted on 2/21/11 9:09 PM in reply to Jorge Ferrer.
By the way, just tested jQuery 1.6.2 and custom UI 1.8.14 in liferay 6.1 - revision 84934, this approach was working 100% properly.
Posted on 7/11/11 7:36 AM in reply to Jonas Yuan.
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-po­rtlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>my­test-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-jav­ascript>
<css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
Or should I append what you provided to the auto-generated part ?
Posted on 2/18/12 8:35 PM.
Hi Roger,

It should be fine to configure jQuery manually.

Thanks

Jonas
Posted on 2/21/12 1:23 PM in reply to Roger Thal.
I am trying to make Jquery work, but it is not. Should it work with prime Faces/ Rich Faces based portlet ?
Posted on 3/2/13 12:40 AM.
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
Posted on 9/20/13 4:20 AM in reply to Hussain A.