Is there any Layout that just renders its child Components?


I have been banging my head against this wall for two days now… How can I get Vaadin to just render a Collection of Components without adding any additional markup?

My project is a web application that has an existing design as HTML and CSS. For specific reasons Vaadin is required for implementation, which is fine with me (coming from a Wicket background). I am proficient with HTML and CSS and prefer strong separation of code and view, therefore I chose the route of using CustomLayouts only. However, I seem to struggle to solve the following simple problem:

<ul location="left">
<li location="item" class=""><a href="#1">Item one</a></li>
  <li class="past"><a href="#1">Item one</a></li>
  <li class="past"><a href="#2">Item two</a></li>
  <li class="current"><a href="#3">Item three</a></li>
  <li><a href="#4">Item four</a></li>
  <li><a href="#5">Item five</a></li>
  <li><a href="#6">Item six</a></li>
  <li><a href="#7">Item seven</a></li>

I have the unordered list in a HTML file, and a single list item in another, each being rendered by a CustomLayout (let’s call them ListLayout and ListItemLayout).

The problem with CustomLayout is that I would have to specify a location for each list item. I can’t do that for the obvious reason that their count varies. I tried to add a CssLayout as child component to ListLayout, which worked, but all my list items were rendered wrapped by tons of divs. Same with any other layout.

My question is now, how do I get a Collection of ListItemLayouts to render within the ListLayout, without any additional markup. There aren’t always seven items. As a related question, how do I get to modify (or remove) the class attribute on the list items? Coming from a Wicket background, I would have expected something like the Wicket Repeater or ListView to be included by default with Vaadin (these Wicket components just render their child components).

I would appreciate any hint. However, generating HTML code in Java is not the way I would like to take.
Thanks for your time!

Hi Adrian,

Out of the box, you can’t really do what you want to do. Vaadin is not Wicket or Struts or Spring MVC - it’s a different beast altogether, and not really oriented to generating exactly the HTML that you want. The idea is the HTML is abstracted away from you as much as possible - precisely the opposite of what you appear to be wanting to do (ref your statement of strong separation of Code and View) - you write java code to assemble components that the Vaadin then turns into an AJAX Application.

I get the impression that you are trying to reproduce an existing HTML Application in exactly the same form, but using Vaadin : well, you can do it, but you’ll be working against the way that Vaadin works all the way! Or rather, you’ll lose any benefits that Vaadin has to offer. Anyway, it seems that this is what you have to do - although, if you are going to approach the whole application in this way, I would strongly suggest you reconsider either Vaadin or your approach. I’d add, by the way, that I’m not saying either approach is right or wrong, just that trying to do combine the two is it’s a bit like using a hammer to drive home a screw - doable, and perfectly acceptable if you have to do it here and there, but you wouldn’t want to build something very large like that.

Practical advice to this specific issue : What I would do in your situation is to try use Velocity or Freemarker templates to generate HTML, and then stick the results into a Vaadin Label (with a type of XHTML). You might also be able to use Velocity/Freemarker/YourFavouriteTemplateLangauge to generate the HTML used by CustomLayout as well, if you want to embed Vaadin components inside of the HTML.

I imagine it’s not ideal, but I’m afraid it’s the only way I can think of to generate exactly the HTML output you want without generating the HTML in java.

Hope that helps,


Thank you for your answer Charles.

I do realize that Vaadin has a different focus than Wicket and the others. However, having looked at CustomLayout I assumed that Vaadin allows me by design to ignore programmatic layouts. And it almost does, I’m 95% there just using CustomLayout. Much better so than Freemarker or Velocity, which have variable assignments and control structures in markup and thus violate separation of code and view.

After reading through your answer I realize I should just go ahead and code my own Layout, called RepeatingLayout. It will allow you to add Components and paint them in the order you added them. Just this and nothing more. Let’s see if that works.

Also, I will be using many of the Components Vaadin offers out of the box (Textfields, Select, Calendar, etc). I just need the possibility to position them where I want. I don’t care how Vaadin renders their markup, I just see them as blackboxes. After reading the Book of Vaadin I didn’t get the impression that this idea is against the Vaadin way and loses me any benefits. The example I used is the simplified version of a special progress indicator that is not a real component anyway (meaning it will not be user manipulable). It has nothing in common with the Vaadin one btw.


I guess you mean just generating the CustomLayout template on the fly? Or are you planning to do client side coding for the layout?

If you do plan to implement client side layout code, it is not trivial (complicated by cross-browser issues, layout size calculations and caption support) but CssLayout, AbsoluteLayout and CustomLayout are probably the best places to start seeing how it is done. If you are really going to work on a lower level, you might consider removing caption support altogether and handling them e.g. with Labels.

You can do this if you know your HTML and CSS well - you do lose what Vaadin would offer you in terms of layouting and the Java-only aspect, but not necessarily the other advantages.