Accordion layouts

Vaadin 6 / 7 / 8 Framework UI
1

Hello

I would like to know about Accordion if it is possible to have different layouts like Horizontal and vertical?

Thanx

2

Hi,

If you mean the way the ‘tabs’ or ‘bars’ of the accordion are oriented, the answer is no - they are always stacked vertically. A TabSheet is to closest thing to a horizontal Accordion.

But if you mean the content, you can add any layout to the accordion:


        Accordion acc = new Accordion();
        getMainWindow().addComponent(acc);
        OrderedLayout layout = new OrderedLayout(
                OrderedLayout.ORIENTATION_HORIZONTAL);
        layout.addComponent(new Label("Left"));
        layout.addComponent(new Label("Right"));
        acc.addTab(layout, "Horiz", null);
        layout = new OrderedLayout();
        layout.addComponent(new Label("Top"));
        layout.addComponent(new Label("Bottom"));
        acc.addTab(layout, "Vert", null);

Best Regards,
Marc

3

Yes this is what I exactly needed to know. The reference manual is not complete.

if you have a new manual link please post for me.

thnx

4

There’s nothing in the manual about Accordion yet, but there’s a short example in the upcoming Feature Browser (in trunk):
http://dev.itmill.com/browser/trunk/src/com/itmill/toolkit/demo/featurebrowser/AccordionExample.java
.

5

Also note that the Accordion works exactly as TabSheet, except the way the ‘tabs’ are rendered. The API is identical (Accordion extends TabSheet, currently w/o any added features, just looks different).

Best Regards,
Marc

6

Two questions:

  1. Is there a way to have more than one “accordion”/tab open at once?
  2. Is there a way to have the accordion component start with no tab open?
7

hey

i am responding to your first question only?

WHY DO YOU NEED ’ Is there a way to have more than one “accordion”/tab open at once? '?

thnx

8

I’m afraid the answer is no to both questions.

I think someone is making a panel that can be collapsed, though - that would solve both your problems. I don’t remember who was making it, or what the schedule was - I’ll have to check trac/forum/mails or ask around a little…

(Also, you could make a component like this by simply styling buttons that toggle the visibility of layouts, though a ready-made component would of course be handier…)

Best Regards,
Marc

9

In my application each accordion contains a table of related items. The accordion serves a grouping function (similar to the way a parent node in a tree groups/contains its children). For my application it will be useful to the user to have more than one accordion open at once and select or compare items in the tables contained in each open accordion tab.