Problem with layouting components in a window

Hello everyone,

I’m new to Vaadin and just finished a couple of tutorials - being a Swing/SWT developer, I quite like it!
Now I’ve started to do some actual work on my project with Vaadin. What I’d like to do is create a fairly simple window, here’s a sketch:

(click to enlarge)

So it’s really quite simple: a textbox with a label and an accept button below, all nicely centered in the window. Should be easy, right? At least that’s what I thought. 2 hours later…

In Swing/SWT, the most likely choice here would be a 3x4 Grid layout which looks like this:

(click to enlarge)

… where the label and the text field reside in their own (horizontally layouted) container. So I came up with the following Java code for this class:

[font=courier new]
public class ModelURISelectionWindow extends Window {

private static final long serialVersionUID = 1L;

private TextField textField = null;
private Button okButton = null;

public ModelURISelectionWindow() {
    // make the window modal, which will disable all other components while it is visible
    // make the sub window 50% the size of the browser window
    // center the window both horizontally and vertically in the browser window;
    this.setCaption("Model URI Selection");

private Component createContent() {
    GridLayout grid = new GridLayout(3, 4);
    // assign equal weight to every column
    for (int i = 0; i < 3; i++) {
        grid.setColumnExpandRatio(i, 0.33f);
    HorizontalLayout hl = new HorizontalLayout();
    Label label = new Label("Model URI:");
    TextField textField = this.getTextField();
    grid.addComponent(hl, 1, 1);
    Button button = this.getOKButton();
    grid.addComponent(button, 1, 2);
    return grid;

public TextField getTextField() {
    if (this.textField == null) {
        this.textField = new TextField();
    return this.textField;

public Button getOKButton() {
    if (this.okButton == null) {
        this.okButton = new Button();
        this.okButton.setCaption("Load model");
    return this.okButton;


Unfortunately I did not get what I wanted. Here’s the resulting window in my Eclipse web browser:

Could anybody tell me what I’m doing wrong here? I’m pretty sure that I’m just missing out a single boolean flag or something to make it work, but as I said, I’m still new to the Vaadin API.

Any help would be appreciated!



EDIT: Ah, I forgot to use “grid.setHeight(“100%”)” and “grid.setWidth(“100%”)”. I thought that this was the default ^_^’ Okay, and by using grid.setComponentAlignment(…), the components will align nicely in the center of their respective grid.

It works now as expected, thread can be closed/deleted. Sorry for the trouble. I was really playing around with this for a long time, to think that I missed out such a simple thing -_-