CustomComponent doesn't Display

I’m fairly new to Vaadin. I’ve been having a lot of fun playing around with all of the available components and example applications.

Now I’ve decided to get more serious and write my own test application. I’ve created my own “CustomComponent” that has an “AbsoluteLayout” as its main layout and holds a “MenuBar” and a second “AbsoluteLayout” which I intended to add any subsequent content to.

However, when I add my “CustomComponent” to my main window, it doesn’t show! The label that was automatically included in the application shows but my own component does not.

Here is the code in my application class’ init method:


public void init() {
		Window mainWindow = new Window("Research_lab Application");
		Label doesTheLabel = new Label("Does the Label show?");
		VerticalLayout vert = new VerticalLayout();
		vert.setEnabled(true);
		PageTemplate pageContent = new PageTemplate();
		pageContent.setEnabled(true);
		pageContent.setVisible(true);
		vert.addComponent(doesTheLabel);
		vert.addComponent(pageContent);
		mainWindow.addComponent(vert);
		setMainWindow(mainWindow);
		setTheme("research_labtheme");
		
	}

“PageTemplate” is my custom component. The “doesTheLabel” Label does appear in my application.

I hope this isn’t too long, but here is the code for my “PageTemplate” class:


import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.MenuBar;

import functions.NavigationMenuCommand;

public class PageTemplate extends CustomComponent {

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private AbsoluteLayout pageContainerAbsoluteLayout;
	@AutoGenerated
	private MenuBar navigationMenuBar;
	
	/**
	 * 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 PageTemplate() {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		additionalInit();
	}
	
	public void additionalInit() {
		// initialize default Welcome page
		MenuBar.MenuItem welcomePageMenuItem = navigationMenuBar.addItem("Home", null, new NavigationMenuCommand(NavigationMenuCommand.ID_HOME, pageContainerAbsoluteLayout) );
		// TODO add menu items

		pageContainerAbsoluteLayout.addComponent(new WelcomePage() );
	}

	//private 
	
	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// navigationMenuBar
		navigationMenuBar = new MenuBar();
		navigationMenuBar.setWidth("-1px");
		navigationMenuBar.setHeight("-1px");
		navigationMenuBar.setImmediate(false);
		mainLayout.addComponent(navigationMenuBar, "top:0.0px;left:0.0px;");
		
		// pageContainerAbsoluteLayout
		pageContainerAbsoluteLayout = new AbsoluteLayout();
		pageContainerAbsoluteLayout.setWidth("-1px");
		pageContainerAbsoluteLayout.setHeight("-1px");
		pageContainerAbsoluteLayout.setImmediate(false);
		pageContainerAbsoluteLayout.setMargin(false);
		mainLayout.addComponent(pageContainerAbsoluteLayout,
				"top:34.0px;left:0.0px;");
		
		return mainLayout;
	}

}

I’ve attempted comparing my application to the example applications, but I haven’t found out what I’m doing wrong.

Any ideas?

Thank you for your assistance,

J

Hi,

I’m pretty sure you have an invalid layout there, having a 100% sized component inside an undefined sized parent layout.

Use the ?debug parameter and click “Analyze layouts” button and you should be able to figure where the problem is.

Jouni,

I hadn’t used the ‘?debug’ as yet. I’ll have to make it a habit to do that.

When I did it, it was exactly as you supposed. I had two 100% layouts contained within two undefined layouts. I probably should have paid better attention when I was reading the Book of Vaadin because I didn’t know that that was bad.

Thank you for your help on this,

J