GWT GUI Design - Layout Panels

Question

i have planned to design my application with following areas:

• Toolbar Area (fix size)
• Workspace Header (for some information or filter criteria's, no fix size)
• Workspace Area (should use all available screen space)
• Statusbar Area (fix size)

Please see also the attached screenshot.

To use a datagrid which automatically resizes with the screensize, I have read that the best way is to use the DockLayoutPanel. I have also read following article: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

In this article it's also recommended to use Layout Panels(not only LayoutPanel.class but all Layout Panels) for better standard mode support. Therefore I have build a very easy example to test the Layout Panels.

Here the simple screenshot example how I tried to design the application:

--- css file --

.test {
    margin: 4px;
    padding: 20px;
    background-color: Lime;
}

---

package com.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.SimplePager;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DisclosurePanel;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.view.client.ListDataProvider;


public class GwtTestDockFilled implements EntryPoint {
    private SimpleLayoutPanel slpToolbarPlaceholder;
    private SimpleLayoutPanel slpWorkspacePlaceholder;
    private SimpleLayoutPanel slpWorkspaceHeaderPlaceholder;
    private SimpleLayoutPanel slpStatusbarPlaceholder;
    private LayoutPanel layoutPanel;
    private FlowPanel flowPanel;
    private Button btnBack;
    private Button btnNew;
    private Label lblName;
    private TextBox txtName;
    private DisclosurePanel disclosurePanel;
    private LayoutPanel layoutPanel_1;
    private Label lblStreet;
    private TextBox txtStreet;
    private DataGrid<Person> dataGrid;
    private TextColumn<Person> colName;
    private TextColumn<Person> colStreet;
    private DockLayoutPanel dockLayoutPanel_1;
    private LayoutPanel layoutPanel_2;
    private SimplePager simplePager;
    private ListDataProvider<Person> dataProvider = new ListDataProvider<GwtTestDockFilled.Person>();

     private static final String[] NAMES = {
          "Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria",
          "Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty",
          "Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle",
          "Laura", "Sarah", "Kimberly", "Deborah", "Jessica", "Shirley", "Cynthia",
          "Angela", "Melissa", "Brenda", "Amy", "Anna", "Rebecca", "Virginia",
          "Kathleen", "Pamela", "Martha", "Debra", "Amanda", "Stephanie", "Carolyn",
          "Christine", "Marie", "Janet", "Catherine", "Frances", "Ann", "Joyce",
          "Diane", "Alice", "Julie", "Heather", "Teresa", "Doris", "Gloria",
          "Evelyn", "Jean", "Cheryl", "Mildred", "Katherine", "Joan", "Ashley",
          "Judith", "Rose", "Janice", "Kelly", "Nicole", "Judy", "Christina",
          "Kathy", "Theresa", "Beverly", "Denise", "Tammy", "Irene", "Jane", "Lori"};


    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {

        RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();

        DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);
        rootLayoutPanel.add(dockLayoutPanel);
        dockLayoutPanel.addNorth(getSlpToolbarPlaceholder(), 60.0);
        dockLayoutPanel.addNorth(getSimpleLayoutPanel_2(), 60.0);
        dockLayoutPanel.addSouth(getSimpleLayoutPanel_3(), 60.0);
        dockLayoutPanel.add(getSlpWorkspacePlaceholder());

        fillDataGrid();
    }

    private void fillDataGrid(){        

        for(int i = 0; i < NAMES.length; i++){

            Person p = new Person();
            p.setName(NAMES[i]);
            p.setStreet("Spring Road");
            dataProvider.getList().add(p);
        }
    }

    private SimpleLayoutPanel getSlpToolbarPlaceholder() {
        if (slpToolbarPlaceholder == null) {
            slpToolbarPlaceholder = new SimpleLayoutPanel();
            slpToolbarPlaceholder.setWidget(getFlowPanel());
        }
        return slpToolbarPlaceholder;
    }
    private SimpleLayoutPanel getSlpWorkspacePlaceholder() {
        if (slpWorkspacePlaceholder == null) {
            slpWorkspacePlaceholder = new SimpleLayoutPanel();
            slpWorkspacePlaceholder.setWidget(getDockLayoutPanel_1());
        }
        return slpWorkspacePlaceholder;
    }
    private SimpleLayoutPanel getSimpleLayoutPanel_2() {
        if (slpWorkspaceHeaderPlaceholder == null) {
            slpWorkspaceHeaderPlaceholder = new SimpleLayoutPanel();
            slpWorkspaceHeaderPlaceholder.setStyleName("test");
            slpWorkspaceHeaderPlaceholder.setWidget(getLayoutPanel());
        }
        return slpWorkspaceHeaderPlaceholder;
    }
    private SimpleLayoutPanel getSimpleLayoutPanel_3() {
        if (slpStatusbarPlaceholder == null) {
            slpStatusbarPlaceholder = new SimpleLayoutPanel();
        }
        return slpStatusbarPlaceholder;
    }
    private LayoutPanel getLayoutPanel() {
        if (layoutPanel == null) {
            layoutPanel = new LayoutPanel();
            layoutPanel.add(getLblName());
            layoutPanel.setWidgetLeftWidth(getLblName(), 0.0, Unit.PX, 56.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getLblName(), 0.0, Unit.PX, 16.0, Unit.PX);
            layoutPanel.add(getTxtName());
            layoutPanel.setWidgetLeftWidth(getTxtName(), 62.0, Unit.PX, 165.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getTxtName(), 0.0, Unit.PX, 25.0, Unit.PX);
            layoutPanel.add(getDisclosurePanel());
            layoutPanel.setWidgetLeftWidth(getDisclosurePanel(), 0.0, Unit.PX, 250.0, Unit.PX);
            layoutPanel.setWidgetTopHeight(getDisclosurePanel(), 31.0, Unit.PX, 200.0, Unit.PX);
        }
        return layoutPanel;
    }
    private FlowPanel getFlowPanel() {
        if (flowPanel == null) {
            flowPanel = new FlowPanel();
            flowPanel.add(getBtnBack());
            flowPanel.add(getBtnNew());
        }
        return flowPanel;
    }
    private Button getBtnBack() {
        if (btnBack == null) {
            btnBack = new Button("New button");
            btnBack.setText("Back");
            btnBack.setSize("50px", "50px");
        }
        return btnBack;
    }
    private Button getBtnNew() {
        if (btnNew == null) {
            btnNew = new Button("New button");
            btnNew.setSize("50px", "50px");
            btnNew.setText("New");
        }
        return btnNew;
    }
    private Label getLblName() {
        if (lblName == null) {
            lblName = new Label("Name");
        }
        return lblName;
    }
    private TextBox getTxtName() {
        if (txtName == null) {
            txtName = new TextBox();
        }
        return txtName;
    }
    private DisclosurePanel getDisclosurePanel() {
        if (disclosurePanel == null) {
            disclosurePanel = new DisclosurePanel("Additional Details", false);
            disclosurePanel.setAnimationEnabled(true);
            disclosurePanel.setContent(getLayoutPanel_1());
        }
        return disclosurePanel;
    }
    private LayoutPanel getLayoutPanel_1() {
        if (layoutPanel_1 == null) {
            layoutPanel_1 = new LayoutPanel();
            layoutPanel_1.setSize("5cm", "60px");
            layoutPanel_1.add(getTxtStreet());
            layoutPanel_1.setWidgetLeftWidth(getTxtStreet(), 60.0, Unit.PX, 91.0, Unit.PX);
            layoutPanel_1.setWidgetTopHeight(getTxtStreet(), 0.0, Unit.PX, 32.0, Unit.PX);
            layoutPanel_1.add(getLblStreet());
            layoutPanel_1.setWidgetLeftWidth(getLblStreet(), 0.0, Unit.PX, 56.0, Unit.PX);
            layoutPanel_1.setWidgetTopHeight(getLblStreet(), 0.0, Unit.PX, 22.0, Unit.PX);
        }
        return layoutPanel_1;
    }
    private Label getLblStreet() {
        if (lblStreet == null) {
            lblStreet = new Label("Street");
        }
        return lblStreet;
    }
    private TextBox getTxtStreet() {
        if (txtStreet == null) {
            txtStreet = new TextBox();
        }
        return txtStreet;
    }

    private DataGrid<Person> getDataGrid() {
        if (dataGrid == null) {
            dataGrid = new DataGrid<Person>();
            dataProvider.addDataDisplay(dataGrid);
            dataGrid.addColumn(getColName(), "Name");
            dataGrid.addColumn(getColStreet(), "Street");
        }
        return dataGrid;
    }

    private TextColumn<Person> getColName() {
        if (colName == null) {
            colName = new TextColumn<Person>() {
                @Override
                public String getValue(Person object) {
                    return object.getName();
                }
            };
        }
        return colName;
    }

    private TextColumn<Person> getColStreet() {
        if (colStreet == null) {
            colStreet = new TextColumn<Person>() {
                @Override
                public String getValue(Person object) {
                    return object.getStreet();
                }
            };
        }
        return colStreet;
    }
    private DockLayoutPanel getDockLayoutPanel_1() {
        if (dockLayoutPanel_1 == null) {
            dockLayoutPanel_1 = new DockLayoutPanel(Unit.PX);
            dockLayoutPanel_1.addSouth(getLayoutPanel_2(), 40.0);
            dockLayoutPanel_1.add(getDataGrid());
        }
        return dockLayoutPanel_1;
    }
    private LayoutPanel getLayoutPanel_2() {
        if (layoutPanel_2 == null) {
            layoutPanel_2 = new LayoutPanel();
            layoutPanel_2.add(getSimplePager());
            layoutPanel_2.setWidgetLeftWidth(getSimplePager(), 50.0, Unit.PCT, 50.0, Unit.PCT);
        }
        return layoutPanel_2;
    }
    private SimplePager getSimplePager() {
        if (simplePager == null) {
            simplePager = new SimplePager();
            simplePager.setDisplay(getDataGrid());
        }
        return simplePager;
    }

    public class Person{

        private String name;
        private String street;

        public Person(){
        }

        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getStreet() {
            return street;
        }
        public void setStreet(String street) {
            this.street = street;
        }
    }
}

In this example I have some problems:

• The css padding is not working for SimpleLayoutPanel. Which class should I use instead? I want to use the css padding in the empty skeleton class because if I replace the widgets for this place holder, it should automatically use the css of the parent (slpWorkspaceHeaderPlaceholder). I don't want to set the padding for every child of slpWorkspaceHeaderPlaceholder.

• The Disclosure Panel for "Additional Details" is not working. The reason is because the DockLayoutPanel has a fix size for North. I tested a solution that I just change the North size if I open the Disclosure Pane but the animation is not working.

• Is this the right track to design my application or should I use different Panels?

• Should I try to use only Layout Panels (better standard-mode support) or are there special cases for other Panels?

Answer 1

Try to use as few types of widgets as possible to minimize your compiled code size, speed up compilation, and improve performance. Your design needs only 3 types of panels (in addition to RootLayoutPanel). You definitely DO NOT need to use a LayoutPanel for your toolbar or workspace header.

Something like this:

FlowPanel toolbar = new FlowPanel();
FlowPanel center = new FlowPanel();

DisclosurePanel workspace = new DisclosurePanel();
workspace.addCloseHandler(new CloseHandler<DisclosurePanel>() {
    @Override
    public void onClose(CloseEvent<DisclosurePanel> event) {
        resize();
    }
});
workspace.addOpenHandler(new OpenHandler<DisclosurePanel>() {
    @Override
    public void onOpen(OpenEvent<DisclosurePanel> event) {
        resize();
    }
});
Window.addResizeHandler(new ResizeHandler() {
    @Override
    public void onResize(ResizeEvent event) {
        resize();
    }
});

DataGrid<Person> dataGrid = new DataGrid<Person>();
FlowPanel statusBar = new FlowPanel();

center.add(workspace);
center.add(dataGrid);

LayoutPanel myPage = new LayoutPanel();
myPage.add(toolbar);
myPage.add(center);
myPage.add(statusBar);

myPage.setWidgetTopHeight(toolbar, 0, Unit.PX, 60, Unit.PX);
myPage.setWidgetTopBottom(center, 60, Unit.PX, 60, Unit.PX);
myPage.setWidgetBottomHeight(statusBar, 0, Unit.PX, 60, Unit.PX);

// add myPage to RootLayoutPanel
resize();

Create resize() method:

private void resize() {
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override
        public void execute() {
            dataGrid.setHeight(center.getOffsetHeight() - workspace.getOffsetHeight() + "px");
        }
    });
}

Add buttons directly to toolbar widget with the following style:

.myToolbarButton {
    width: 50px;
    height: 50px;
    float: left;
    margin: 5px 10px 5px 0;
}

If you style your toolbar (background color), add the following to its style:

overflow: hidden;

Answer 2

HTML has terrible support for "let this component take up as much space as it needs, and then let this component take up the rest of the space." As far as I know, the best way to do what you want in GWT would be to use all LayoutPanels, override onResize, and then do the mathematical layout calculations yourself:

int heightOfEntireCenter = centerPanel.getClientHeight();
int heightOfToolbar = toolBar.getClientHeight();

workspace.setHeight(heightOfEntireCenter - heightOfToolbar);

You'll have to do a ton of finagling, hunting for mysterious layout errors, be annoyed by lag when sizes change, etc. HTML is just bad at this.

If you can fix the size of the toolbar, you'll have a much easier time. I don't even mean that the toolbar can't change size - I just mean you'll have to calculate that and set it. Then the workspace can fill the rest of the space much more naturally. LayoutPanels are the correct choice here, too.