Custom component does not render

I have created a custom vaadin component that does not initially render. If I create a button that calls requestRepaint on my custom component then it is rendered or if I run the vaadin debug window and press “force layout” or “analyze layout”, my component is rendered. Any ideas why my component does not initially render?

This is quite strange, and it is hard to speculate based on this information, but explicitly forcing the repaint of the component should not be necessary.

Do you mean a CustomComponent (e.g. server-side composition) or a custom client side widget?

Does “analyze layouts” indicate any problems? In what kind of a layout or a layout hierarchy is your custom component? What is the custom component like?

More information on the component would be helpful.

It is a custom client-side widget. I follow the same pattern as the custom components for CKEditor and TinyMCE editors.

My server side component looks something like this…

@com.vaadin.ui.ClientWidget(VEcardTextField.class)
public class EcardTextField extends TextField {
// my code
}

My client side code is…

public class VEcardTextField extends Widget implements Paintable, OnChangeListener {
// my code
}

When I analyze the layouts, it shows no problems. I have added the component to a VerticalLayout, which is a child of the main window.

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

As this is a new question and the original thread has been quiet for a long time, you would probably had received an answer sooner if posting as a new thread.

Anyway, here neither the implicit window layout nor your vert layout inside it have a defined size, and you are trying to use a 100% high component inside them. Replace “mainWindow.addComponent(vert)” with “mainWindow.setContent(vert)” and call vert.setSizeFull(). Many older forum threads and other sources address this issue.

The setEnabled(true) and setVisible(true) calls are redundant here.

Use the “?debug” URL parameter and then click “Analyze layouts” to search for such layout problems.

Henri,

Thank you for your help. It was exactly as you say.

J

p.s. When I posted this I was so new to Vaadin I hadn’t figured out how to create a new thread. Thankfully, I have since.