Tuesday, February 8, 2011

'noticeEl' is null or not an object

So this JavaScript error:

'noticeEl' is null or not an object

started popping up after we upgraded a couple of our servers to run Service Pack 5 for Liferay's Enterprise Edition. Apparently this same problem exists now for Liferay 6 as well. The fix here works equally well in Liferay 5.2.5 (Enterprise Edition) so definitely use it.

NOTE: You folks using Liferay 5.2.3 (Community Edition) or those who are on SP3 don't have to worry about this fix.

The problem is that they're recommending the use of a hook to fix this. Great, but what if you don't know HOW to create a hook?

It gets even more fun when you look into the Liferay 5.2 SDK and realize there's no create.sh (or create.bat for you Windows folks) for creating hooks. (Strangely, this seems to coincide with the lack of an "Install More Hooks" button in the plugins installation section of Liferay's Control Panel.)

All is not lost, friends. We can beat this thing together!

Let's suppose you want to modify the functionality of a particular JSP in your Liferay (like the bottom.jsp mentioned in the linked thread above). You might be tempted to just replace the JSP in the installed Liferay structure.

This is not a good idea.

For one thing, it means if you ever have to re-install Liferay you're going to lose that page unless you remember to copy it into a backup first. It also means screwing up any hope of keeping track of versions unless you want to dump your WHOLE Liferay portal into your repository.

Hooks really are easier, and provide a nice way to keep the changes and modifications separate from the original source.

So, here's how we do it.

Go into \liferay-plugins-sdk-5.2.3\hooks and create a folder to house your hook. Let's call it mywickedawesomehook. Now, normally there'd be a build.xml in here for you like there is in the portlet and theme folders, but there's not. (Don't ask me why.) That means you have to create it. (If this were a portlet or theme we could just run an Ant create command to handle all this. If you want to write your own Ant script, go for it!)

So inside the mywickedawesomehook folder create your build.xml and put this in it:

<?xml version="1.0"?>
<project name="hook" basedir="." default="deploy">
<import file="../build-common-hook.xml" />
</project>

This will allow Ant to build your .war file later when you're done.

Now, to start creating the meat of the hook. Let's call it the meathook.

Ok let's not.

Now add some folders so your directory structure looks like this:

mywickedawesomehook/docroot/WEB-INF

Now, in that WEB-INF we need two configuration files. The first is liferay-hook.xml and it should look something like this inside:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 5.2.0//EN" "http://www.liferay.com/dtd/liferay-hook_5_2_0.dtd" >
<hook>
<custom-jsp-dir>/WEB-INF/jsps</custom-jsp-dir>
</hook>

The second is liferay-plugin-package.properties and it should contain:

name=mywickedawesomehook
module-group-id=liferay
module-incremental-version=1
tags=
short-description=This hook is so awesome it blows my mind.
change-log=
page-url=[http://www.liferay.com]
author=Dr. Gaius Baltar
licenses=MIT
required-deployment-contexts=

Now here's where some decisions have to be made. If you're just changing the functionality of a JSP page then in your WEB-INF folder create this structure:

/WEB-INF/jsps/html/

What we're doing here is we're replicating the folder structure in the Liferay portal source code itself. So using the example from the fix above where you modify your bottom.jsp file, you'd find it in the Liferay source here:

portal-web/docroot/html/common/themes/bottom.jsp

So your folder structure in the hook should match

/WEB-INF/jsps/html/common/themes

where the html folder is the point where they converge.

(You DID download the Liferay 5.2.3 source code, right? If not, you can get it here. Fair warning... If you're using this to fix the noticeEl problem then you're going to need to get the bottom.jsp file from your Liferay 5.2.5 install or source. The link I'm providing here is for the Community Edition and doesn't apply to the noticeEl problem.)

And of course, continuing that example, bottom.jsp would reside in that themes folder.

When you've made the changes you want and are ready to try it out, just run the ant deploy command in the home folder of your hook (in this case, the mywickedawesomehook folder).

Yeah, I know. You Maven guys want some love too.

If you're using Maven in Eclipse you can use it to build the Liferay 5.2.3 hook structure automatically IF you've added the archetype to it. It creates a nifty little folder structure for you to use as a STARTING point. (Maven's not gonna make it THAT easy for you.)

It'll be up to you to create the folder structure to match what's described above. Also, Maven expects there to be a web.xml file in the WEB-INF folder whether you're doing anything with it or not, so I just stick a blank one in there to keep it happy.

...ok well it isn't actually blank. You do need to follow at least the minimal dtd.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
</web-app>

Now, once you've built this thing and want to install it you just drop it into the deploy folder the same as any other plugin. Don't have access to the file system? You can upload it via the site interface, but strangely Liferay doesn't provide a button for uploading your own hooks per se. Not to worry. Just use the Portlet Install button.

Seriously.

When you go to install a theme or a portlet by uploading it all Liferay is doing is automatically taking that file and dropping it into the deploy folder for you, just as if you were on the file system doing it yourself. It doesn't care if you use the Install More Portlets button to upload a theme or a hook.

No comments:

Post a Comment