HorizontalLayout.setExpandRatio problem?

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

I am new to IT Mill Toolkit and I am trying to put together a demo of a simple two pane application.
No matter what I do I cannot seem to get the panes to layout correctly.
I want a single ‘toolbar’ pane across top of application.
Beneath that should be a ‘navigation’ pane on the left and a ‘content’ pane on the right.
Naturally, I want the content pane to suck up all available space and the toolbar and navigation panes to use only as much space as required.
At the bottom of this message is a simple test program I have written.

No matter what I do I cannot get the panes to size correctly.
The problem is that the ‘navigation’ pane is always hidden, it is always sized with a pixel width of 0.

However, while the horizontal sizing is wrong the vertical sizing is fine, even though I use exactly the same code for creating the vertical layout.

Can somebody show me some code that correctly formats three panes?
Have I run into a bug?

Thanks,
-ted


import com.itmill.toolkit.Application;
import com.itmill.toolkit.ui.Component;
import com.itmill.toolkit.ui.HorizontalLayout;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;

public class DemoApplication
extends Application
{
	@Override public void init()
	{
		Component lowerRight= new Label("CONTENT");
		Component lowerLeft= new Label("NAVIGATION");
		Component top= new Label("HEADER");
		
		HorizontalLayout horizontalLayout= new HorizontalLayout();
		horizontalLayout.setSizeFull();
		horizontalLayout.addComponent(lowerLeft);
		horizontalLayout.addComponent(lowerRight);
		horizontalLayout.setExpandRatio(lowerRight, 1);
		
		VerticalLayout verticalLayout= new VerticalLayout();
		verticalLayout.setSizeFull();
		verticalLayout.addComponent(top);
		verticalLayout.addComponent(horizontalLayout);
		verticalLayout.setExpandRatio(horizontalLayout, 1);
		
		Window window= new Window();
		window.setCaption("Three Pane Demo");
		window.setSizeFull();
		window.setLayout(verticalLayout);			
		setMainWindow(window);			
		
	}

}
2

The problem is in horizontal layout and its components - if your content pane tries to take 100% available width, you cannot have navigation pane also take 100% available width - it must have undefined or fixed width.

So, adding a single line for your navigation label (labels by default are 100% wide) brings all your layout to be displayed fine:


lowerLeft.setWidth(null);

WBR,
Dmitri

3

Upd. You may also set it to

lowerLeft.setWidth("300px");

for instance, or use a splitter, to make navigation/content ratio user-adjustable

4

Hi Ted, and welcome to our forums!

dll basically got it right, so the lowerLeft component (Label) can’t be 100% width if it’s expand ratio is undefined.

You’ve managed to understand our new layout specs very well actually, even compared to more experienced Toolkit developers. Kudos for that.

The “gotcha”, that you missed, is that our Label is by default 100% wide. And the reason for that is, in order to accurately calculate the space needed by a label - multiline (wrapping) or single-line - we have to have a width for it. An undefined width Label is by default assumed to be single-line text, but you can override this behaviour with CSS.

This is sort of a bug, more of a documentation issue. Our R’n’D team is currently updating our documentation and manual, so I’m sure they’ll pick this one up from here.

Keep coming back here if you have any more questions, we’re all eager to answer them.

5

Thanks Dmitri, what was tripping me up was that I did not know that the default width for Labels was 100%.
Seems like an unfortunate choice for that setting, but live and learn!

-ted