Design a GWT UI Layout

Question

We wanted to design a layout in GWT which has quite a lot of small small sections on screen. Basically it has a left menu, header, footer, main content area with lot of sub sections which can be closed by user in case if he does not want to see them. Then remaining content section should get adjusted automatically. We are using GWT Platform. I am in doubt, whether DockLayoutPanel suits for this or not, because, it has to be must more flexible. Apart from that, I didnt get any good layout examples. Can we achieve this using GWT enter image description here panels or we have to manually do it using div in module html file?

Please find below the draft layout. I am really confused with what panel to start.... Kindly advice.

Renato Renato · Accepted Answer · 2012-06-12T09:07:27

There are millions of way you could achieve that. I will give you my opinion and try to explain why I would do it this way.

First of all, it seems you want, like most websites have, a top header (or two) and a menu on the left. The DockLayoutPanel can do this quite nicely, so I would use it to start with. By the way, consider adding a footer to your layout (sorry, just thinking most apps have one)...

Then, you have two little panels on the left (Tree Str1 and 2) and the content areas. Depending on how flexible you want these to be, you will need different structures.

Let's say you want to have not only two, but potentially many Tree Str on the left, and your Content Areas would not change much. I would add to the West area of the DockLayoutPanel a VerticalPanel (wich will contain the 2 Tree Strs, possibly more).

In the main area of the DockLayoutPanel, add a VerticalPanel to represent the central area. This VerticalPanel must be sized appropriately (probably width,height=100%).

Add to the VerticalPanel 2 rows (HorizontalPanels).

Now, you can add Content Area 1 to the first row, and the others to row 2.

Well, let the code speak:

public Panel getMainPanel() {
    DockLayoutPanel mainPanel = new DockLayoutPanel(Unit.PX);
    mainPanel.setSize("500px", "500px");

    VerticalPanel leftPanel = new VerticalPanel();

    Label treeStr1 = new Label("Tree Str1");
    treeStr1.setSize("100%", "100px");
    Label treeStr2 = new Label("Tree Str2");
    treeStr1.setSize("100%", "200px");

    leftPanel.add(treeStr1);
    leftPanel.add(treeStr2);

    VerticalPanel centralArea = new VerticalPanel();
    centralArea.setSize("100%", "100%");
    centralArea.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    centralArea.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
    centralArea.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);

    HorizontalPanel row1 = new HorizontalPanel();
    row1.setWidth("90%");
    HorizontalPanel row2 = new HorizontalPanel();
    row2.setWidth("90%");
    row2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    row2.getElement().getStyle().setBorderColor("red");
    row2.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);

    centralArea.add(row1);
    centralArea.add(row2);

    HTML ca1 = new HTML("Content Area 1");
    ca1.setSize("100%", "100px");
    ca1.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    HTML ca2 = new HTML("Content Area 2");
    ca2.setSize("60%", "60px");
    ca2.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
    HTML ca3 = new HTML("Content Area 3");
    ca3.setSize("30%", "60px");
    ca3.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);

    row1.add(ca1);
    row2.add(ca2);
    row2.add(ca3);

    mainPanel.addNorth(new HTML(
            "<h1>This is your header, create a Widget instead of this</h1>"), 150);
    mainPanel.addNorth(new HTML(
            "<h2>Some more user options</h2>"), 60);
    mainPanel.addWest(leftPanel, 150);
    mainPanel.add(centralArea);
    return mainPanel;
}

If any of these areas must be REALLY flexible, try GWT's FlexTable!

Design a GWT UI Layout

2 Answers