FlowPanel

---

Version 1.0 onwards

---

A Panel Where Elements Go WIth The HTML Flow

---

---

Notes

---

It's just a div, really, so anything you add will behave as you might expect (like overflow, for example, which the demo will do quite happily) provided you know what the widget is created from. There's a table of what is what in the summary page.

---

Code

---

FlowPanel flowpanel;
FlexTable flextable;
int pan;
public void demo()
{
    flextable = new FlexTable();
    flextable.addStyleName("table-center");
    setup();
    RootPanel.get("demo").add(flextable);
}
void setup()
{
    flextable.clear();
    flowpanel = new FlowPanel();
    flextable.setWidget(3, 0, flowpanel);
    flowpanel.setSize("380px", "380px");
    flowpanel.addStyleName("demo-panel");

    widgetButton(0, 0, "100px", "100px", "yellow");
    widgetButton(1, 0, "40px", "80px", "blue");
    widgetButton(2, 0, "95px", "95px", "cyan");

    flextable.setWidget(4, 0, new Button("Reset", new ClickListener()
    {
        public void onClick(Widget sender)
        {
            flowpanel.clear();
            pan = 0;
        }
    }));
    pan = 0;
}
void widgetButton(int row, int col, final String width,
    final String height, final String colour)
{
    flextable.setWidget(row, col, new Button(
        width + " x " + height + " " + colour, new ClickListener()
    {
        public void onClick(Widget sender)
        {
            Button label = new Button(++pan + "");
            DOM.setStyleAttribute(label.getElement(),
                "border", "1px solid #00f");
            DOM.setStyleAttribute(label.getElement(),
                "backgroundColor", colour);
            label.setSize(width, height);
            flowpanel.add(label);
        }
    }));
    flextable.getCellFormatter().setHorizontalAlignment(
        row, col, HasAlignment.ALIGN_CENTER);
}