Vaading portlet sizing in Liferay

We have been doing a lot of work using Vaadin as our component library for the creation of Liferay portlets. This library has been great. One of the most frustrating pieces has been getting the sizing and layouts of the components to work properly. These are a few of the things I have found:

There are several issues with the sizing of the portlets:
1 - since they are within the portal, they do not consume the full area of the browser as a servlet application would.
2 - Liferay controls the sizing of the portlet.
3 - The browser could be resized..

There are a couple of strategies for the sizing, and you have to examine every element in your dom tree to ensure you are being consistent or it could result in a seemingly inexplicable 'blank' portlet.

Strategy 1 - size the portlet to the size of the components in the portlet.

Generally in this strategy, size the components at the leaves of your component tree, and set all of the parent layouts, panels, etc. to .setSizeUndefined();

If you do this... make sure you set the expandRatio() on all of the sized components so that the layouts know how to properly expand the components as the browser size changes.

Strategy 2 - set the full size of the portlet and display scroll bars if the browser changes.

This one to me is a little screwy in Liferay. This is due to the fact that Liferay does not set the actual size of the portlet container, which makes the dynamic sizing settings (setSizeFull, and setSizeUndefined, or setHeight(100%) not work properly).

One way to combat this is to explicitly set the size of the main window with main.setWidth() and main.setHeight(). Then set all child Layouts and Panels to setSizeFull().

A possibly better way to handle this is to add a setting to the portlet.xml file with the size of the portlet like so..

<init-param>
            <name>style</name>
            <value>height:600px</value>
        </init-param>

This *should* allow dynamic changing of the size via stylesheet later.

*TIP: Firebug is your friend in this. If the sizing is off for your portlet, the data will still exist in the dom, but it will just not be visisble on the screen. Firebug will show you the data, and you can typically see which element is causing the sizing issue if you navigate the dom in Firebug.