DockPanel

---

Version 1.0 onwards

---

A Table-Based Panel With Cells All Over The Place

---

---

Notes

---

The DockPanel is a table-based widget that lets you add cells to the North, South, East and West. There is a central cell too, and the widget for that can be added at any time. All the N, S, E and W cells are added to the relevant side of the central cell (whether or not it has a widget in it).

It's not easy to explain - the best way to understand how the order you add widget affects how it is displayed is to play with the demo

---

Code

---

FlexTable flextable;            // Display area
DockPanel dockpanel;            // Demo dockpanel
Label plus;                     // Centre label
int pan;                        // Panel number
public void demo()
{
    // Main entry point for the demo
    flextable = new FlexTable();
    setup();
    RootPanel.get("demo").add(flextable);
}
void setup()
{
    // Set up or reset the whole k+k
    dockpanel = new DockPanel();

    buttonAdd(DockPanel.NORTH, 0, 1);
    buttonAdd(DockPanel.SOUTH, 3, 1);
    buttonAdd(DockPanel.CENTER, 2, 1);
    buttonAdd(DockPanel.EAST, 1, 2);
    buttonAdd(DockPanel.WEST, 1, 0);

    flextable.setWidget(1, 1, dockpanel);
    flextable.setWidget(4, 1, resetButton());
    dockpanel.setSize("400px", "400px");
    dockpanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
    dockpanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
    dockpanel.setBorderWidth(1);
    dockpanel.add(plus = new Label("+"), DockPanel.CENTER);
    dockpanel.setStyleName("demo-DockPanel");
    pan = 0;
}
void buttonAdd(DockLayoutConstant position, int row, int col)
{
	// Add a single button the the display area
    String posText = "";
    if (position == DockPanel.NORTH) posText = "NORTH";
    else if (position == DockPanel.SOUTH) posText = "SOUTH";
    else if (position == DockPanel.EAST) posText = "EAST";
    else if (position == DockPanel.WEST) posText = "WEST";
    else if (position == DockPanel.CENTER) posText = "CENTER";
    Button b = new Button(posText, listener);
    flextable.setWidget(row, col, b);
    flextable.getCellFormatter().setHorizontalAlignment(row,
                             col, HasAlignment.ALIGN_CENTER);
}
ClickListener listener = new ClickListener()
{
    public void onClick(Widget sender)
    {
        // Add an area to the dockpanel
        String s = ((Button) sender).getText();
        DockLayoutConstant c = null;
        if (s.equals("NORTH")) c = DockPanel.NORTH;
        else if (s.equals("SOUTH")) c = DockPanel.SOUTH;
        else if (s.equals("EAST")) c = DockPanel.EAST;
        else if (s.equals("WEST")) c = DockPanel.WEST;
        else if (s.equals("CENTER"))
        {
            plus.setText("CENTER");
            flextable.getWidget(2, 1).setVisible(false);
            return;
        }
        Label label = new Label(++pan + ". " + s);
        dockpanel.add(label, c);
    }
};
Button resetButton()
{
    return new Button("Reset", reset);
}
ClickListener reset = new ClickListener()
{
    public void onClick(Widget sender)
    {
        setup();
    }
};