Creating a generic collapsible widget?

Dear fellow Vaadin Developers,

we are planning to make heavy use of collapsible components in our current project. The idea is to have for example form elements or groups of such combined in a widget with a + sign which will upon click expand the components and make them visible.

I already wrote a server-side component which can do just that. The problem with this component is that every click on the expand button will trigger a call to the server.

My simple question to the Gurus around here is: is it possible and a good Idea to create such a widget which works on the client side only?

My problem on answering the question by myself is that I do not know enough about the layout mechanisms on the client vs. on the server. Will such a widget mess up the server-side created layout? Or is there any way to do this safely?

Thanks in advance for any thoughts, hints or suggestions.


PS: btw. thanks for adding

protected void attachField(Object propertyId, Field field)

to the Form class. A really helpful interception method.

I also have such requirements and the same doubt.
Can anyone guide us please?

What will be the difference if I just create a CustomComponent and when I create a widget?
Which will be a better approach and why?

add-on might come close to what you want.

A CustomComponent means server-side composition of existing widgets. In 95% of cases, it is far simpler than writing a widget and otherwise a good approach.

A custom widget does give you more control over things on the client side (event handling, rendering etc.), but at the cost of much more complexity in implementation and maintenance, especially to make sure it works with all the common browsers. While GWT does abstract away many differences between browsers, typically much has to be done by the widget implementer as well.

Unless you know you need something that cannot be done well by composing existing widgets on the server side (or have sufficient experience in GWT programming), I would recommend sticking with server side composition.

Thanks for the info. That was quick.

I’m little confused over existing “widget”.
Currently my concept says that
are examples of UI “Component” that can be included inside a CustionComponent.
are GWT Widgets. These can also be integrated in Vaadin.

Which among these is “existing Widget”?

I used “existing widgets” to emphasize that you are not implementing your own widgets in this case, but “existing components” would have been more correct here.

In general, in Vaadin terminology, “widget” refers to a client-side implementation, and “component” refers either to a server-side component or the unit formed by a server-side part and a client-side widget. However, these are often used somewhat loosely.

In general, Vaadin classes with names starting with “V” are Vaadin widgets - e.g. VTabSheet is the client side part of the TabSheet component. Sometimes the class names do not match directly, the client side implementation is found based on the @ClientWidget annotation in the server-side classes.

Thanks. That was the best explanation…

indeed this seems to be what I need.

that’s for sure. It took me about 20 minutes to get what I wanted ;-). The problem is that each click on collapse will trigger server side communication which in costs time. At that point I assume that the user will not be appreciative of the delay that occurs. I think a good gui should be as responsive as can be, at least as long as it does not really do something.

I have some experience in GWT development. What I lack is specific knowledge of Vaadin related topics, which is how to handle layouts on the client side.

However, I just took a look at the drawer widget. It seems to be what I need and I’ll give it a try.

Apart from that are there any guidlines on how to maintain client-side layout? I mean you can set for example the size of a widget to 100px (on the server). What happens if the client decides to override this i.e. to collapse it? There must be some sort of policy to keep things together or am a getting something wrong here?

Thanks for your input.


You could check out the
client side source code
of the Drawer, especially the methods implemented from the Container interface. They usually take some trial and error to get right. I’m not sure if there is a general documentation on how to implement the client-side of a component that contains other components. Maybe there should be?

As far as I know, there is no documentation about implementing client side components that contain other Vaadin components. Furthermore, it is definitely non-trivial in many cases. VCssLayout might be among the simplest of such component containers in case you want to learn from it, but it does not do all the layout calculations some other layouts do.

While this issue has come up before, I’m afraid it is not at the top of the priority list at the moment. Furthermore, there is no official/published API for most of the client side code, and most client side classes are not designed for extensibility. We do not guarantee preserving API compatibility between versions for most of the client side code.

This might change in some future version, but having a documented and maintained client side API will be very costly for us in terms of increasing the effort of making fixes or implementing new features while preserving API compatibility.