Friday, November 11, 2011

Vaadin Portlet Sizing ... this just in...

I have been having very strange an frustrating results with the portlet sizing using Vaadin. I have been experimenting with this a lot and have found the major source of my pain.

With portlet development you basically have 3 strategies you can employ (and will likely use a combination of the three).

1 - size the portlet main window and resize your components to that.
2 - size the portlet dynamically to the size of its containing components and let them drive the size of the overall portlet.
3 - size and position the components using style sheets.

The current portlet I am woking on uses expandable panels and need to use method 1.

I tried setting the size on the application main window in Vaadin without much success... so I started trying to debug the layouts. I recently installed Vaadin 6.7.1 One of the very nice features they have is the ability to analyze your layouts from the Vaadin debug window. To use this, open the debug window by appending ?debug to the end of the url to the page your portlet resides on. Click the AL button and watch your portal log files to view data.

The original code I used was:

 Window window = new Window();  
 window.setContent(mainLayout);  
 window.setWidth("1000px");  
 window.setHeight("600px");  
 MainMessagingView messagesView = new MainMessagingView();  
 messagesView.setSizeFull();  
 window.removeAllComponents();  
 window.addComponent(messagesView);  

This resulted in the portlet components not displaying.

The Vaadin Layout Analyzer showed:

  Window/12863f7 "" (height: MAIN WINDOW)  
  - VerticalLayout/b6992a (height: UNDEFINED)  
   - MainMessagingView/373de2 debugId: mainmessageviewinapplication (height: RELATIVE, 100.0 %)  
 Layout problem detected: Component with relative height inside a VerticalLayout with no height defined.  
 Relative sizes were replaced by undefined sizes, components may not render as expected.  

This was very strange to me as it was showing an extra Vertical Layout between the mainWindow and the Component I was putting on it. Upon further inspection I learned that Vaadin requires a Layout be set on the main window. If one is not set, it will put one a VerticalLayout on itself with size set to Undefined.

To fix this issue, I just added a new VerticalLayout of my own, and explicitly set the size to setSizeFull(). All components sized properly after that.

 Window window = new Window();  
                window.setContent(mainLayout);  
                window.setWidth("1000px");  
                window.setHeight("600px");  
                VerticalLayout mainLayout = new VerticalLayout();  
                mainLayout.setSizeFull();  
                window.setContent(mainLayout);  
                MainMessagingView messagesView = new MainMessagingView();  
                messagesView.setSizeFull();  
                window.removeAllComponents();  
                window.addComponent(messagesView);  

No comments:

Post a Comment