My first Vaadin App and I cannot get it to work :(

HI
Just started to use the Vaadin and I thought I would try it with the Vaadin Eclipse Design tool.

I have a main class and a component class created using the designer;

package com.example.test1;

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

public class Test1Application extends Application {

	private static final long serialVersionUID = -6828487971871598848L;

	@Override
	public void init() {
		Window main = new Window("Test1 Application");
		setMainWindow(main);
		
		// This is actually the default.
		main.setContent(new VerticalLayout());

		// Set the size of the root layout to full width and height.
		main.getContent().setSizeFull();
		
		main.addComponent(new myComp());
		
	}

}
package com.example.test1;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Label;

public class myComp extends CustomComponent {

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private Label label_1;
	@AutoGenerated
	private ComboBox comboBox_1;

	/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

	/**
	 * The constructor should first build the main layout, set the
	 * composition root and then do any custom initialization.
	 *
	 * The constructor will not be automatically regenerated by the
	 * visual editor.
	 */
	public myComp() {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		// TODO add user code here
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");
		mainLayout.setMargin(false);
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// comboBox_1
		comboBox_1 = new ComboBox();
		comboBox_1.setImmediate(false);
		comboBox_1.setWidth("-1px");
		comboBox_1.setHeight("-1px");
		mainLayout.addComponent(comboBox_1, "top:36.0px;left:102.0px;");
		
		// label_1
		label_1 = new Label();
		label_1.setImmediate(false);
		label_1.setWidth("-1px");
		label_1.setHeight("18px");
		label_1.setValue("Name");
		mainLayout.addComponent(label_1, "top:42.0px;left:40.0px;");
		
		return mainLayout;
	}

}

When I run the app I get the following error;

Vaadin DEBUG

  • Window/1f23f8b “Test1 Application” (height: MAIN WINDOW)
    • VerticalLayout/99210f (height: UNDEFINED)
      • myComp/a4f040 (height: RELATIVE, 100.0 %)
        • AbsoluteLayout/1499154 (height: RELATIVE, 100.0 %)
          Layout problem detected: A component with relative height needs a parent with defined height.
          Relative sizes were replaced by undefined sizes, components may not render as expected.

I have checked the doc and I cannot see what I am doing wrong when I have set use full size for the main window.

Can anyone help?

If I understand this correctly (it’s not very often I check the ?debug window – a bad habit), your problem might be the UNDEFINED size (i.e. something you haven’t set yourself) of your VerticalLayout. You seem to set a new VerticalLayout as your content in the Window. Things might work out of the box, if you just remove the assignment (as you say it yourself, there’s already a VerticalLayout inside). But if you want to be explicit (nothing wrong with that), you probably need to call “.setSizeFull()” on the VerticalLayout you’re assigning as content.

That should make it work.

How I see it, he is calling exactly that: 18

// Set the size of the root layout to full width and height.
main.getContent().setSizeFull();

Can’t really see why it is still of undefined height. Anyways… Id guess you could remove the setContent(new VL) and getContent().setSizeFull(), and just set your myComp directly as the root content with main.setContent(myComp);