Which Vaadin components to use when converting from XHTML


I am currently evaluating Vaadin for replacing our hand-crafted JSP/XHTML/JS solution. I worked through a lot of your documentation and even managed to get something running but I still have some open questions and I hope to get some answers here.
To give you an impression of what the current solution looks like please look at the attached screen shot.
Now to the open questions:

  1. The right part of the screen shot show a large collection of records which are currently presented using paging and internally uses a lot of divs which are left-floating to wrap nicely in the available space. Which component could be used to render this in Vaadin and also works for huge collections? Which component should I use for rendering a single record (which is marked with the border in the screen shot)? This component needs to be able to use an arbitrary list of properties and render the record accordingly.

  2. The Container interface has the method getItemIds () which is also called in my test code (which uses a Table and Tree) but this does not scale well for large collections. As you can see in the screenshot I need to be able to support collections of a million records and more. Is there any way to avoid this and let the table class only get the currently required ids, like getItemIds (int startIndex, int numIDs) ? Do I need to enable lazy data loading on a table or tree or is this working automatically?

  3. I couldn’t find any nice toolbar implementation. Do you have any plans of providing such a component? To me this is is really required for a RIA framework which should be able to replace native applications.

  4. In the screen shot you can see that our current application has a title bar and also a close button for logging out. How can I achieve this with Vaadin for the main window? I was to stupid to find the right function for this.

Thanks for your time.


If you want wrap-around, you should use CssLayout. It’s the most light-weight layout in Vaadin and should work fine for a bit larger collection. But can’t say that it works for “huge” collections. The Table is good for that, as it uses lazy loading, but it doesn’t support wrap-around.

Well, perhaps VerticalLayout. If you want wrap-around in CssLayout or to put the records in a Table, they have to be same height, I think. If you don’t need wrap-around, you could put each row of records in a GridLayout to have the fields of the record align at the same level.

I’m not sure what you mean by rendering the record, but if you want to read the record properties from a data source, you could use a Form and then use VerticalLayout or some other layout in it. You probably need to leave out the field captions in your case. You can do a lot of layout customization in a FieldFactory and by overriding the attachField() method.

The getItemIds() doesn’t necessarily have to be implemented; I think it’s used by ComboBox/Select, but not by Table. See
for an example.

If you want to have millions of rows, notice that Table actually has a height limit, which is about 500,000 with text rows; the limit is actually a pixel limit, so if the rows are higher, the limit is smaller. Hopefully this problem is solved at some time, see
. It’s a bit question if it really useful to have that huge tables anyhow, as no one can really find anything from them just by scrolling.

Table uses lazy loading by default, so you don’t need to enable it. (In fact, you can’t disable it.)

You normally make a toolbar with simply a HorizontalLayout and with Buttons or NativeButtons that you have themed properly. See the navigation buttons in Sampler, for example.

You can make the title bar as a row in a VerticalLayout:

        VerticalLayout mainLayout = new VerticalLayout();
        HorizontalLayout titlebar = new HorizontalLayout();
        Label title = new Label("Client-Side Validation Demo");
        Label doclinks = new Label("<a href=\"../\">Index</a> - " +
                                   "<a href=\"../doc/api/\">API Documentation</a>",

Then you’ll just have to theme it with some CSS. You could also use the caption of a Panel.

Thanks for your reply.

I don’t think this would work because if I understood CssLayout correctly I need to create all contained elements (in this case all million records) for the layout because CssLayout does not support lazy loading.
What I am missing here is a List class that supports lazy loading and can be configured to switch to a wrapping mode. This is actually the way Java Swing handles this case and it works quite nice.

I debugged Vaadin and it IS calling that method as long you don’t implement Container.Indexed for your data source. After I provided the methods of Container.Indexed the table is also much more responsive.

I totally agree but one can never know what customers want to do with your product so at least it should work in some way.

I see. But isn’t the point of Vaadin to be able to write Java code without messing around with css to get applications up and running in a browser? To be honest I don’t want to derive a new Theme, add custom styles and so on, just to get something fairly simple as a toolbar. This really sounds like a workaround for a missing component to me.

Thanks for your hints.


Yes, there isn’t currently component container that handles wrapping and lazy loading. I don’t remember seeing such in the Directory either.

So, your alternatives are: 1) Table with fixed number of columns, 2) CssLayout + paging. Paging is so common feature of web apps that it shouldn’t be a too bad solution.

I don’t think there’s any way to get the width of the browser window either, for estimating a goodish number of columns for the table. The BrowserInfo only reports screen size, not window size. I think the information is available for JavaScript in the browser, but I’m not sure why it’s not available through the server-side API.

It would be great to be able to avoid CSS, but in reality themeing is almost unavoidable in any but the simplest applications. A server-side CSS injection API has been considered for Vaadin 7, but I don’t know how it’s going to be prioritized, so it might come later.

Chameleon Theme
and the on-line editor simplify theme customization greatly and I think a more advanced theme editor is planned. But you will need themeing for many trivial tasks, such as borders, and a theme editor would not help with themeing add-on components.

CssLayout might be good for a toolbar as well, and it supports CSS injection without a separate theme. It’s a bit limited though.

A toolbar might be great idea for an add-on; its easy to make typical toolbars with pure server-side coding, so such an add-on wouldn’t even require widgetset compilation. The
theme add-on says that it has some predefined styles for toolbars.

Please check the
Chameleon Theme Demo
. It also has a toolbar style, see the “Menus” section.