Visual Designer Custom Component not Displaying

Hi All,

I have been searching the forums for a solution to my issue and after many trial and error attempts it clicked as to why I could not see my CustomComponents after using the Visual Designer.

My issue here is that even with my Soft Eng background (perhaps I am a really crappy one) I was completely stumped by this and was not able to throw together a POC quickly and easily to continue using Vaadin. In fact, I was about 2 tries away from throwing it out the window.

That said, now that I got it to work I am impressed and I love it, but I suspect there are many people that are abandoning the framework on similar experience.


Here’s the issue and suggestion for you.


Ensure that the Visual Designer can create a page that will actually display on first attempt.

My issue was that by default the AbsoluteLayout component was set to Width/Height of 100%/100%. Which, made perfect sense to me, so much so I never thought it was the source of my problem. When I added other sub-components, simple things, just to get something to show-up (hello world) I got empty space, every-time. I started searching for ways to include the component differently, adding it to windows… even started chasing down my configs and servlet code. I just could not get the CustomComponent to display!

Finally, after many forum searches I stumbled on the notion of setting a fixed Width/Height to my AbsoluteLayout and finally saw my simple label!

I just wanted something to be generated and show up on my main page.

I am trialing several RIA frameworks, and have a very aggressive timeline, so the ability to throw together a quick design straight-out-of-the box is a huge deal.

I was looking for an answer to this as well.
Angela M
in another thread solved this for me. Needed to change .addComponent to .setContent .

hii brad, thanks for your helpfull comment, i’ve same problem with this Custom Componen. solved after read your comment. :slight_smile:
but, when we change mainWindow to CustomComponen using getMainWindow().setContent(customComponen), how to display back main window content?? maybe trigger using button on customComponen. my code is:


Button testButton2 = new Button();
		testButton2.setDescription(" 2 ");
		testButton2.setCaption(" 2 ");
		testButton2.addListener(new Button.ClickListener() {
			
			public void buttonClick(ClickEvent event) {
				Mobil mob = new Mobil();
				getMainWindow().setContent(mob);
				
			}
		});

VerticalLayout verLayout = new VerticalLayout();
		verLayout.setSpacing(true);
		verLayout.addComponent(testButton2);


		mainWindow.addComponent(verLayout);
		setMainWindow(mainWindow);