Theme Development in Liferay

After installing a portal system (or web server), the first thing you want to do is create a simple web page and start customizing the theme. Unfortunately, Liferay's documentation is terribly unclear about that.

Well, its suggested normal method is to choose from a number of ready themes. Umm, NO! Nobody wants to use a theme like that. Every organization has their own colors and graphics and if not, you nevertheless want to have something that you have in your mind, not what some others have.

So, the "advanced" method is to develop a custom theme, which you can then deploy in Liferay. The Liferay plugin for Eclipse supports that. However, that method is way too heavy for me at least. I don't want to run a separate development Liferay on my machine, as I don't have enough memory in my home computer to do it fast enough. I want to work directly with the production server. I also suspect that deploying a theme takes longer than a second.

So, what I wanted to do was to just edit some CSS in the web server, save, reload, and see the result. This method of themeing does not seem to be documented anywhere, or at least it's hard to find. Anyhow, the easy way seems to be to edit the custom.css file in "classic" theme. The full path to the file is tomcat-x.x.x/webapps/ROOT/html/themes/classic/css/custom.css.

The problem with that was that just editing it did not reload it immediately, or actually ever. Even restarting the serve does not reload it. I found some suggestions for properties that would need to be set in the portal-ext.properties, but they didn't quite work in my case.

Finally, I found the solution right there in the Liferay's installation package. The file tomcat-6.0.29/webapps/ROOT/WEB-INF/classes/portal-developer.properties has the following settings for development:

theme.css.fast.load=false
theme.images.fast.load=false

javascript.fast.load=true
javascript.log.enabled=true

layout.template.cache.enabled=false

browser.launcher.url=

combo.check.timestamp=true

freemarker.engine.cache.storage=soft:1
freemarker.engine.modification.check.interval=0

openoffice.cache.enabled=false

velocity.engine.resource.manager.cache.enabled=false

com.liferay.portal.servlet.filters.cache.CacheFilter=false

com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=trueroot

I don't actually know which of the settings are really necessary, but now it seems to work great. Just edit the file and it's reloaded immediately.

Installing Liferay on MySQL

I'm installing a new web server for the astronomical association Turun Ursa. As we support Liferay at work, using it for this purpose may have some synergy so that I don't need to learn yet-another-portal. Well, not that Liferay is the easiest to learn. Anyhow, it also makes it possible to develop some portlets if I ever need one. I think I may need to redo my planetarium application again in Java - the old C++ version for Sparc stopped working some time ago after some upgrade at the university.

Anyhow, the instructions for doing the proper installation were rather unclear as they didn't really tell much details about creating the database. They referred to a "Chapter 6", which didn't exist at all. I guess they referred to these instructions, which were more helpful. Anyhow, below is a brief summary.

The setup is done here using the database root user. Some Liferay example used that though I don't really see why. Creating a separate Liferay user might be nicer. Well, I have Liferay running as a root anyhow to get it running in port 80, so the database user probably doesn't make it significantly safer.

1. Shut down the server

   # ./tomcat-6.0.29/bin/shutdown.sh

   ...and wait for a bit.

2. Move the 7Cogs demo data generator away

   # mv tomcat-6.0.29/webapps/sevencogs-hook/ .

3. Create the database with a database command and not using the mysqladmin to be able to set the character set. It's probably important.

   # mysql -prootpassword
   mysql> create database lportal character set utf8;
   Query OK, 1 row affected (0.00 sec)

   The MySQL configuration stuff is explained in this wiki.

4. Create a portal-ext.properties file in the Liferay installation directory with content:

   #
   # MySQL
   #
   jdbc.default.driverClassName=com.mysql.jdbc.Driver
   jdbc.default.url=jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=false
   jdbc.default.username=root
   jdbc.default.password=rootpassword

5. Start up the server

   # ./tomcat-6.0.29/bin/startup.sh

6. Follow that it starts OK

   # tail -F tomcat-6.0.29/logs/catalina.out

Well, rather trivial but took me a bit time as the documentation was a bit...hazy.

Other notes:

• When first logging in, create a new user account with your own name. Then log out and log in as user "test@liferay.com" with password "test" (this information was not really obvious in the instructions either). Go to Control Panel -> Users and give yourself the Administrator role. You need to remove or disable the "test" account at some point...

Windows behind the background

I've had a lot of trouble with my dual screen setup with Kubuntu 11.10. It works like a dream when you set up it at first. The trouble starts when you turn off either or both of the monitors and then turn them on. KDE is "intelligent" so that it tries to switch between the single and dual display set up depending on what displays are on. Unfortunately, the result is rather uncontrolled and random.

So, this morning I arrived at work and opened my laptop first...MISTAKE! I should have turned on the external monitor instead. So, it did not just not work, but also got completely stuck. So, I restarted kdm from console screen. After that, the behavior got really odd. No windows were visible. I could see them in the task panel, but they were nowhere. Then, I switched to the 3D cube view and I could see them - behind the background!

So, apparently the background is no longer a "root image" in X, but a window itself, and it has a Z index. I was able to bring the windows forth by right-clicking them in the task bar and selecting "Advanced -> Keep Above Others". But that was rather nasty thing to do. Then occasionally, the panel itself would drop below the background image and using the machine became impossible. Even restarting the machine did not help, apparently the Z index of the background was saved in system configuration. Great.

I traced the problem to .kde/share/config/plasma-desktop-appletsrc. Apparently, the background is managed as a desktop applet (aka "desktop widget") and each has a zvalue parameter defined in the configuration.

I did not trace the issue further, just removed the file. Apparently others have met the same issue, hence this post.

Cross-Site Embedding Vaadin Applications

I've been recently testing the embedding of Vaadin applications.
Here's the Vaadin Sampler embedded:

Well, the application isn't made for this narrow columns, but it works, and runs on a completely different server. And isn't in an iframe.

Essentially, all you need to embed an app is:

    <script src="http://demo.vaadin.com/xsembed/getEmbedJs" type="text/javascript"></script>

However, if the app has 100% vertical size, you must put it in an element with a defined height. You may also want to set the width in some cases, such as in the example above:

<div style="height: 600px; width: 400px; overflow: auto;">
  <div style="height: 500px; width: 800px;">
    <script src="http://demo.vaadin.com/xsembed/getEmbedJs" type="text/javascript"></script>
  </div>
</div>

Vaadin Refcard updated

I made a few minor corrections and additions to the Vaadin Refcard, which was released last week at DZone. If you already downloaded it, you might to get the new version.

• Vaadin is available under Apache License 2.0
• For Item editors, such as the Form component, you can set the item data source with setItemDataSource()
• For Container editors, such as the Table or Tree components, you can set the container data source with setContainerDataSource()
• The book cover on the last page was updated - the cover for Vaadin 6.2 edition is blue
• The text in the last page was reordered to be more correct

The refcard could be updated next after Vaadin 6.3 is released in the late spring. The major features are use of GWT 2.0 for the client-side, drag'n'drop, and support for portlet flat mode.

Vaadin Refcard is out!

The Vaadin Refcard is finally out at DZone. Download yours now or browse the card on-line.

If you're a newcomer to Vaadin or interested in finding out what it is, the Refcard offers a great introduction to Vaadin. Much of the reference material should be also useful to those already familiar with Vaadin.


The six pages of the Refcard present a well thought summary of the most essential features of Vaadin, which are covered in detail in the Book of Vaadin. Much of the reference information is presented in tightly packed diagrams; just look at them for a moment and I hope you'll see the genius of Vaadin as I do.

The contents are:

• Creating an Application
• Components
• Layout Components
• Themes
• Data Binding
• Creating New Components

As Vaadin is developing fast, I hope to make updates to the card occasionally. So, especially after update releases (Vaadin 6.3 is coming next), please look out for an update of the card.

More Information:

• The Vaadin Refcard at DZone
• Vaadin Homepage
• Book of Vaadin On-Line

Client-Side Validation for Vaadin

I recently created a new component for Vaadin, the CSValidationTextField (suggestions for a better name are welcome), which is an extension of the regular TextField. It can validate the input with a regular expression and/or a JavaScript program.

Of course, you can't trust the client-side code for validation, so you need to validate the input on the server-side as well. For regular expression validation, you can use the same expression for the server-side RegexpValidator. For example:

// The Finnish Social Security Number
final CSValidatedTextField ssn = new CSValidatedTextField("SSN");
String ssn_regexp = "[0-9]{6}[+-A][0-9]{3}[0-9a-zA-Z]";

// The client-side validation
ssn.setRegExp(ssn_regexp, "000000-000A");
ssn.setAllowInvalid(false); // Prevent typing invalid values

// The server-side validation
ssn.addValidator(new RegexpValidator(ssn_regexp, "Invalid SSN"));
ssn.setRequired(true);
ssn.setRequiredError("SSN is required");

form.addField("ssn", ssn);

Matching partially filled values has some problems currently. If you disallow typing invalid input, as in the example above, the regexp validation currently needs an "example" and is restricted to only fixed-length fields. I'll have to look if the JS regexp matching can somehow report if there's a partial match. If you allow invalid input, there are no restrictions and the fixed-length example is not needed.

You can validate with JavaScript just as easily:

CSValidatedTextField postcode = new CSValidatedTextField("Postal Code");
postcode.setJavaScript("if (value >= 0 && value < 10000)" +
" \"partial\";" +
"else if (value >= 10000 && value <= 99999)" +
" null;" +
"else" +
" \"Postal Code must be a 5-digit number between 10000 and 99999\";");
layout.addComponent(postcode);

The server-side validation needs separate Java code though, unless you use some JavaScript execution library.

You must validate the input on the server-side as well, as the client-side validation does not actually prevent inputting invalid values (unless you set setAllowInvalid(false), but that's a bit restricted at the moment).

See the example source codes (link below) for more examples.

See:

• The Demo (editors, some validation examples)
• API Documentation
• Source Repository
• Example Souce Code

Included are also handy interactive editors for the regular expressions and JavaScript validators, as you can see in the demos.

The component is not packaged yet, so using it may require some effort. I'll have to look into the packaging.