Vaadin Portlet in Liferay Problem

I am ready to roll into production a couple of portlets developed using the Vaadin framework. BTW, great framework! I am using Vaadin 6.2 and Liferay 5.2.3. However, there is one major problem that is preventing me from going into production. Frequently, the portlet does not render properly and I get error messages in the Vaadin debug window. Closing and reopening the browser seems to fix it temporarily. I have tried IE, Firefox and Chrome. When all is working well the debug output looks like this…

Vaadin application servlet version: 6.2.0
Widget set is built on version: 6.2.0
Application version: NONVERSIONED
inserting load indicator
Making UIDL Request with params: init
Server visit took 138ms
JSON parsing took 0

	change
Running layout functions due window resize
Processing time was 58ms for 2418 characters of JSON
Referenced paintables: 9
Removed variable from removed component: PID0
Removed variable from removed component: PID0 

After several page requests (either page refreshes or navigating away and back to the page that contains the vaadin portlet), eventually the vaadin portlet does not render correctly and the debug out show the following…

Vaadin application servlet version: 6.2.0
Widget set is built on version: 6.2.0
Application version: NONVERSIONED
Warning: widgetset version 6.2.0 does not seem to match theme version
inserting load indicator
Making UIDL Request with params: init
Server visit took 139ms
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
JSON parsing took 0

	change
Running layout functions due window resize
Processing time was 49ms for 2418 characters of JSON
Referenced paintables: 9
Removed variable from removed component: PID0
Removed variable from removed component: PID0
CSS files may have not loaded properly.

Even the debug window loses it’s styling. Any suggestions on troubleshooting the problem would be extremely helpful. Attached are a couple of screen shots of what the portlet should look like when it is working and what it looks like when it is not working.
11168.jpg
11169.jpg

Are you using Portlet 1.0 (JSR-168) or Portlet 2.0 (JSR-286) portlet? Are the static resources served from webapps/ROOT/html on your Liferay installation, or possibly directly by a JSR-168 portlet?

It looks like the CSS files have been loaded but the loading indicator image has not, or there have been problem loading the CSS related to it. The indicator is the small animated GIF showing that the application is still loading, and its images come from /html/VAADIN/themes/base/img/loading-indicator.gif, loading-indicator-delay.gif and loading-indicator-wait.gif .

Vaadin waits up to one second for the appropriate image to be loaded after being notified that CSS loading for the page is complete. Could your network or server cause these files to be received late from time to time?

Please check with e.g. Firebug (Net panel) if and when the Vaadin CSS files and the loading indicator image are requested and when they are received.

I am using Portlet 2.0 and the static resources are being served from webapps/ROOT/html.

What would cause the following message?

"Warning: widgetset version 6.2.2 does not seem to match theme version"

I have also defined in my portal-ext.properties file the following properties…

vaadin.resources.path=/html
vaadin.theme=reindeer
vaadin.widgetset=com.vaadin.terminal.gwt.DefaultWidgetSet

After doing some more digging, I learned that…

After several requests, the request to get the VAADIN CSS for a given theme returns a blank. So the first several requests returns a vaild CCS. And then eventually, the same request returns a blank. On my localhost host, the request looks like this…

http://localhost:8080/html/VAADIN/themes/reindeer/styles.css

What would cause the above request to eventually stop getting a valid CSS file? This happens on my local machine as well as my dev and production servers.

Adding the following to portal-ext.properties seemed to fix the problem.

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

I was able to fix the problem by including the following in my portal-ext.properties file.

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

Is this recommended?

This option does reduce caching globally, and might therefore have some performance impacts.

While I have not tested this, an alternative could be to try to specify “speed-filters-enabled=false” in your liferay-plugin-package.properties file. This way, only your portlet would be affected.