Multiple tabs open in accordion / Drawer / Depot

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I need a UI component that is called expander. It is a clickable label and when you click it a panel opens. I found three components for that but all they are not working as I expected. I found:

Accordion: In accordion you can only open one tab at the same time and it is not possible to close it again (see ticket
#3779
). Also it looks like that it is impossible to make a implementation where you can open more than one tab (
have a look
).


Drawer
: The drawer add-on does not support Vaadin 7 and we use 7, so it is not possible to use it. And it looks like that Vaadin 7 will not be supported.


Depot
: It has some layouting problems if you use it in grid layouts e.g. And it also looks like that this add-on is not supported any more.

Do you have any ideas what should I do?

2

This should be quite easy to make on the server-side using core components. Just use a button for the header and appluy a click listener to it. When the button is clicked, toggle the visibility of the content (thus expanding) it. Then use CSS to theme your component to look like an expander. If you want some visual effects, consider using the
animator
 add-on.

3

I will try it in the next days. But if it is such easy, why the depot does not work correctly and why the drawer does not support vaadin 7?

4

Those are both 3rd party add-ons, so I can’t really say. If I remember correctly, Drawer was is its own layout implementation on the client-side - something that is quite tricky to implement. Maybe the author has thought that it is not worth porting to Vaadin 7? Note that I’m just guessing here.

I’ll let the author of Depot know about the problems you’ve experienced - maybe he will update it at some point.

5

Hi. Depot is my creation. It is a very simple widget as it is using GWT’s DisclosurePanel as a base - about 140 rows of server side code and 100 rows of client side code.

I just used it in my latest project without issues. You might have used it within a combination that I haven’t tested, resulting in that size calculations aren’t refreshed accordingly. Anyhow, I haven’t got a test case of the issue or an reported issue of it for that matter either.

As the add-on is so small, you could even just copy the source files into your project and see if you can fix the issue directly. Bonus points for doing a pull request after that. Everything related to the add-on can be found under https://github.com/Peppe-/Depot

6

I am sorry, our designer said we do not need this gui element any more so I will spend no more time for it. But I have created a small code example where you can see some layouting problems. Maybe it helps somebody, who is interested in:

...
@Override
protected void init(VaadinRequest request)
{
    final GridLayout layout = new GridLayout(1, 2);
    layout.setMargin(true);
    setContent(layout);

    final Depot depot = new Depot();
    depot.setHeader( "Depot" );
    final AbstractLayout depotLayout = new VerticalLayout();
    depotLayout.addComponent( new Button( "Button 1" ) );
    depotLayout.addComponent( new Button( "Button 2" ) );
    depot.setComponent( depotLayout );
    layout.addComponent( depot );

    layout.addComponent( new Button( "Button 3" ) );
}
...