portlet-liferay.xml: How to use portal-javascript-header correctly

2
votes

I copied jquery.js to WebContent/js/jquery/jquery.js. Now I want to use that file in certain portlets. To do this I created a liferay-portlet.xml that looks like this:

<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC
    "-//Liferay//DTD Portlet Application 6.0.0//EN"
    "http://www.liferay.com/dtd/liferay-portlet-app_6_0_0.dtd">

<liferay-portlet-app>
    <portlet>
        <portlet-name>MyPortletName</portlet-name>
        <header-portal-javascript>/js/jquery/jquery.js</header-portal-javascript>
    </portlet>
</liferay-portlet-app>

If I access the portlet Liferay generates this line:

<script src="/js/jquery/jquery.js?browserId=firefox&amp;minifierType=js&amp;languageId=en_US&amp;b=6100&amp;t=1326630657000" type="text/javascript"></script>

That leads to a WARN [404_jsp:?] /js/jquery/jquery.js in the logging console.

Is it really correct that the URL looks like this? If I had two war-files, both containing a js-file with the same path, how would Liferay distinguish those two?

What do I need to do to get my setup working?

Using Liferay Portal Community Edition 6.1.0 CE (Paton / Build 6100 / December 15, 2011)

3
liferay
Which version of Liferay are you using? – Jonny
@Jonny: The version I am using hides in the last line of my question ;-) – yankee
Doh!! :) It's Monday morning! – Jonny
@yankee, how did you create this portlet and how are you deploying it? Are you using the Liferay IDE? – rp.
@RP: Yes, I am using Liferay IDE. I created the portlet by creating a Spring-controller-class that handles stuff and adding a couple of lines to my portlet.xml file ;-). – yankee

3 Answers

11
votes

Use 

<header-portlet-javascript>/js/jquery/jquery.js</header-portlet-javascript>

isntead of

<header-portal-javascript>/js/jquery/jquery.js</header-portal-javascript>

if you put js-files in to portlet

Because regarding comments in DTD, header-portal-javascript sets the path of JavaScript relative to the portal's context path. And header-portlet-javascript sets the path of JavaScript relative to the portlet's context path.

1
votes

The location for jQuery looks incorrect.

If you're bundling this with your own plugin named foobar-portlet the correct path would be (provided that you use the same liferay-portlet.xml):

foobar-portlet/docroot/js/jquery/jquery.js

0
votes

Two things:

jQuery is bundled with Liferay 5, check the version of Liferay and which jQuery version it has bundled and see if this meets your needs. However I believe it's not in Liferay 6 or 6.1, but I could be wrong about that.

And:

If you want to have a JavaScript library available to all of your portlets you're better off adding it to the theme(s) that you use rather than the portlets. This way it will be globally accessible. The downside is that if you're distributing your portlet then you should make people aware of this dependency.

Otherwise if you just want it available to a small group of your portlets, then follow what RP said.

Here's some good reference on using jQuery with Liferay 6.