VerticalPanel

---

Version 1.0 onwards

---

A Table-Based Panel With Cells Aligned Vertically

---

---

Notes

---

The VerticalPanel is a table-based widget that lets you add cells vertically only. You'd use it anywhere you need widgets laid out above each other. A good example is for a 'paging' menu. You can have a VerticalPanel on the left full of buttons, and these swap the required 'page' into a 'target' panel.

With no widgets in it, the VerticalPanel isn't visible. Even if you set the size of the VerticalPanel with, say,

panel.setSize("100px", "100px");

it still wouldn't appear. The border and the padding wouldn't, but the margin, if set, would take up space.

---

Code

---

final VerticalPanel panel = new VerticalPanel();
panel.setStyleName("demo-panel");

Button add = new Button("Add", new ClickListener()
{
    public void onClick(Widget sender)
    {
        SimplePanel sp = new SimplePanel();
        sp.setSize("500px", "50px");
        sp.setStyleName("demo-VerticalPanel-SimplePanel");
        panel.add(sp);
    }
});
Button clear = new Button("Clear", new ClickListener()
{
    public void onClick(Widget sender)
    {
        panel.clear();
    }
});

HorizontalPanel buttons = new HorizontalPanel();
buttons.setStyleName("demo-buttons");

buttons.add(add);
add.setWidth("50px");

buttons.add(clear);
clear.setWidth("50px");

RootPanel.get("demo").add(buttons);
RootPanel.get("demo").add(panel);

add.click();
add.click();
add.click();