A DisclosurePanel has a header area and underneath, a content area. By clicking on the header, you can open or close (show or hide) the content. Before 1.4, I had written my own which had been quite popular - it's not indispensable, but in the right conditions it's really handy.
Useful where space is short. For example, you might have a long list (telephone directory?) which displays basic identifying information (name and number) but by clicking the header, you can display more details.
One problem is that there is no built-in way to change the header text and retain the default triangle/arrows. It's possible, but it takes a bit of working around.
public void buildPage()
{
final DisclosurePanel panel = new DisclosurePanel(
"Click Here To Open");
panel.addEventHandler(new DisclosureHandler()
{
public void onClose(DisclosureEvent event)
{
panel.setHeader(new DisclosurePanelHeader(false,
"Click Here To Open"));
}
public void onOpen(DisclosureEvent event)
{
panel.setHeader(new DisclosurePanelHeader(true,
"Click Here To Close"));
}
});
panel.add(new Image("img/IanBambury.jpg"));
panel.setWidth("300px");
panel.addStyleName("table-center");
RootPanel.get("demo").add(panel);
}
final DisclosurePanelImages images = (DisclosurePanelImages)
GWT.create(DisclosurePanelImages.class);
class DisclosurePanelHeader extends HorizontalPanel
{
public DisclosurePanelHeader(boolean isOpen, String html)
{
add(isOpen ? images.disclosurePanelOpen().createImage()
: images.disclosurePanelClosed().createImage());
add(new HTML(html));
}
}