GWT DockLayoutPanel

The GWT DockLayoutPanel is a layout panel that allows widgets to be contained in resizable and collapsible regions. It is part of the Google Web Toolkit (GWT) and provides a flexible and easy-to-use layout mechanism for web applications.

Key features

• Resizable and collapsible regions - Allows widgets to be dynamically resized and collapsed based on user actions.
• Supports any widget - Can contain any GWT widget or panel as its children.
• Responsive layout - Easily create a responsive UI where widgets automatically adjust their size according to the available space.
• Layout on any device - Suitable for desktop, tablet, and mobile devices.
• Easy to use - Simple APIs for adding and configuring widgets, and comprehensive documentation and examples.

How it works

The DockLayoutPanel divides its space into five regions: north, south, east, west, and center. Each region can contain any GWT widget or panel. Regions are added to the DockLayoutPanel using its addNorth(), addSouth(), addEast(), addWest(), and add() methods.

By default, the center region takes up all the remaining space after the other regions have been laid out. However, the size of each region can be specified using the setWidgetSize() method. For example:

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);

Widget northWidget = ...;
dockLayoutPanel.addNorth(northWidget, 50);

Widget southWidget = ...;
dockLayoutPanel.addSouth(southWidget, 100);

This code creates a DockLayoutPanel and adds north and south regions with heights of 50px and 100px respectively. The widgets that go into these regions can be any GWT widget, including panels, buttons, labels, etc.

Examples

Here are some examples of how the DockLayoutPanel can be used:

Example 1: Basic layout

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);

Widget northWidget = new Label("North");
dockLayoutPanel.addNorth(northWidget, 50);

Widget southWidget = new Label("South");
dockLayoutPanel.addSouth(southWidget, 100);

Widget eastWidget = new Label("East");
dockLayoutPanel.addEast(eastWidget, 150);

Widget westWidget = new Label("West");
dockLayoutPanel.addWest(westWidget, 150);

Widget centerWidget = new Label("Center");
dockLayoutPanel.add(centerWidget);

RootLayoutPanel.get().add(dockLayoutPanel);

This code creates a basic layout with north, south, east, west, and center regions. The size of each region is specified using the addXxx() methods, and the widgets are added using the add() method.

Example 2: Responsive layout

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);

Widget headerWidget = new Label("Header");
dockLayoutPanel.addNorth(headerWidget, 10);

Widget contentWidget = new HTML(
    "<p>This is some content...</p>");
dockLayoutPanel.add(contentWidget);

RootLayoutPanel.get().add(dockLayoutPanel);

This code creates a responsive layout where the header takes up 10% of the available height, and the content takes up the remaining 90%. The size is specified using percentages, so the layout will automatically adjust itself to fit the available space.

Conclusion

The GWT DockLayoutPanel is a powerful and flexible layout mechanism for web applications. It provides resizable and collapsible regions, supports any GWT widget, and is easy to use. Whether you're building a desktop, tablet, or mobile application, the DockLayoutPanel can help you create a responsive and dynamic UI.