The DeckPanel is a div-based widget so-called because you can imagine it as a deck of cards, face up, and you can bring one to the top which will hide all the rest. It's used in the TabPanel to display the widget associated with the clicked tab. You might use it for a wizard, moving from one screen to the next, or for your own menu system.
There is a problem with it, however. When you add a widget to the deck, GWT sets the height and width to 100%. Fine if that is what you want, but if you add a label with a border, then the label will be the same size as the deck, and the border will make it overflow (unless IE's broken box comes into effect) See Widget 0 for this in the demo. But you can get around this - see the demo code for examples.
final DeckPanel panel = new DeckPanel();
panel.setSize("300px", "120px");
panel.addStyleName("demo-panel");
Label label;
// This will get set to 100% wide and high
// and with a border will overflow the deck
label = new Label("Widget 0");
label.addStyleName("demo-label-bigborder");
panel.add(label);
// Setting the height and width to "" will
// make the label act like an ordinary div
// in a div
label = new Label("Widget 1");
label.addStyleName("demo-label-bigborder");
panel.add(label);
label.setWidth("");
label.setHeight("");
// So you have to set the width and height
// if you don't want them to be 100%. Normal
// defaults don't apply
label = new Label("Widget 2");
label.addStyleName("demo-label-bigborder");
panel.add(label);
label.setWidth("100px");
label.setHeight("");
// Skip one, and you may get a surprise
label = new Label("Widget 3");
label.addStyleName("demo-label-bigborder");
panel.add(label);
label.setWidth("100px");
RootPanel.get("demo").add(panel);
panel.showWidget(0);
Timer t = new Timer()
{
public void run()
{
int index = panel.getVisibleWidget();
index++;
if (index == panel.getWidgetCount()) index = 0;
panel.showWidget(index);
}
};
t.scheduleRepeating(5000);