There are several situations in my application where I have to display large sets of data.
To make this a bit more structured, I want to use collapsible panels or something in order to divide
the data in groups which can then be expanded or collapsed as desired.
Well, that’s the closest I can get at the moment, but unfortunately it doesn’t completely work the way I want.
The most important difference is that an Accordion can only have one “tab” expanded at a time.
I have no experience overriding existing widgets, but looking at the code of the Accordion it seems to me
that it might be sufficient to override the “open()” method of the VAccordion class.
Unfortunately that doesn’t seem to be possible because of some private methods/variables used in there.
Please correct me if I’m wrong.
Another issue is that the Accordion shows a “horizontal bar” at the top of each “section” (i.e. the tab), which is not desirable in this case.
(everything should look as one large panel, as shown in the screenshots at the url’s above)
I know it should be possible to overwrite it’s style, and I also found out that I have to overwrite the
.v-accordion-item-caption class, but the side effect is that all other (normal) accordions are affected as well.
Therefore I tried to define a new style class for the accordions for which I don’t want to show this “caption bar”,
but when I do so, it doesn’t seem to have any effect.
My accordion tabs contain a horizontalLayout with grids/forms/…
→ I define the new style on the horizontalLayout, which is then added as a new tab to the Accordion.
But when I load the application in firefox and inspect the accordion tabs with firebug, they still have the default “.v-accordion-iitem-caption” class attached.
That seems indeed close to what I’m looking for, but unfortunately it isn’t compatible with IE8 and I definitely need to support IE8 in my application.
Nevertheless I tried to use it in my application to get an idea how it works, but I couldn’t get it working.
Whenever I include the drawer library, I get errors when recompiling my widgetset
If the animation is not the most important part then how about just making a server side component that does about what you are looking for?
VerticalLayout mainLayout = new VerticalLayout();
VerticalLayout hiddenContent = new VerticalLayout()
// Add your actual conent to the hiddenContent
hiddenContent.addComponent(new Label("Hello world!");
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.addComponent(new Button("Show/Hide",new Button.ClickListener(){
hiddenContent.setVisible(!hiddenContent.isVisible());
}));
mainLayout.addComponent(buttonLayout);
mainLayout.addComponent(hiddenLayout);
hiddenLayout.setVisible(false);
Note: code written directly to the forum so syntax isn’t checked.
Old post or not: I am hooked on Drawer. It is excellent for managing clutter on the screen and also fulfils screen data protection needs. When (say) filling a form, only part of the input details are exposed , but even then, the user can quickly collapse the exposed section(s) to prevent unfriendly peeping Toms from…
