Layout chaos! need help

Vaadin 6 / 7 / 8 Framework UI
1

I seem to be having a huge issue with layouts and I am spending most of my UI development time on layouts and still not getting it right. Can you tell me a better way to do things?

  1. My first issue is that the layout within main window does not scale to 100% height (except for splitpanel layouts). I do not want split panel layout for my main window but cannot find out how to make it auto adjust height to 100%. Any ideas?

  2. My second issue is that I need to create 2 column table with first column to fit width of text (i.e. be compact) and second column to take rest of the space. I cannot figure out how to do that.

Apart from these, I have a request to Vaadin team. The best web layout I have ever seen is cappuccino auto layout (http://cappuccino.org/learn/tutorials/automatic-layout/). Can we introduce such a layout for Vaadin? It would make layouts so much easier.

Thanks to everybody for helping
Vinay

Edit1: Here is a video of cappuccino layout
http://280north.com/blog/2009/02/announcing-atlas/
 it takes the pain out of layouts. Is there a way I can do that with vaadin currently?

2

setSizeFull() for the layout you put in the window with setContent(yourLayout). My guess is that you have done window.addCompoanent(yourLayout) instead. This adds yourLayout inside a VerticalLayout already in the Window.


setColumnExpandRatio
 to the second column.

Most of the features are already in
AbsoluteLayout
. Also see how to use expand ratios in layouts to define which parts of the layout are resized automatically. You can also use this layout with
visual editor
.

Some of the nice things in Cappucino that are missing from Vaadin include: [list]

[]
There is no way of telling to Vaadin SplitPanel that it should only automatically resize one of the sides when resizing the view. Created ticket
#6138
 for this.
[]
It is not possible to set min-max sizes for components in Vaadin. Instead components either fill the given space, take x% of it, use fixed (pixel, point, …) size or calculate the size from their contents. It would be nice to be able to also say “fill the space given, but use at least 300px and at most 600px”. Created ticket
#6137
 for this.

[/list]

3

Hi Joonas, thanks for help. I am not able to get it to work. Here is my code. I want a menu bar with fixed height and a second component to fill in rest of the screen. My button stays same height as the menu bar.

Can you help me fix this?

import com.vaadin.Application;
import com.vaadin.ui.*;

public class MyApplication extends Application {

VerticalLayout layout = new VerticalLayout();
Window mainWindow = new Window("Application", layout);

public void init() {
	mainWindow.setSizeFull();
	
	setMainWindow(mainWindow);

	MenuBar menubar = new MenuBar();
	final MenuBar.MenuItem file = menubar.addItem("File", null);
	final MenuBar.MenuItem newItem = file.addItem("New", null);
	file.addSeparator();

	layout.addComponent(menubar);

	Button button = new Button("my button3");
	button.setSizeFull();
	layout.addComponent(button);
	layout.setExpandRatio(menubar, 1);
	layout.setExpandRatio(button, 10);
	
}

}

4

Also, I cannot load it in IE8 (yes just 20 lines of code wont work in IE8), an hourglass stays on screen

Also, in above code, if you replace Button with a Panel, you can visually see (in chrome browser) that panel takes about an inch of height and does not cover fullscreen

thanks for looking into this.

5

You also need to call layout.setSizeFull() or layout.setHeight(“100%”) to have it fill the window.

Try also to add “?debug” to your URL and then click “Analyze layouts” - it should point out such problems.