HorizontalPanel

---

Version 1.0 onwards

---

A Table-Based Panel With Cells Aligned Horizontally

---

---

Notes

---

The HorizontalPanel is a table-based widget that lets you add cells horizontally only. You'd use it anywhere you need widgets laid out next to 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 the second cell of a HorizontalPanel.

With no widgets in it, the HorizontalPanel isn't visible. Even if you set the size of the HorizontalPanel 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 HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("demo-panel");

Button add = new Button("Add", new ClickListener()
{
    public void onClick(Widget sender)
    {
        SimplePanel sp = new SimplePanel();
        sp.setSize("50px", "100px");
        sp.setStyleName("demo-HorizontalPanel-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();