0

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 herepanels 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.

4

2 回答 2

2

有数百万种方法可以实现这一目标。我会给你我的意见，并尝试解释为什么我会这样做。

首先，就像大多数网站一样，您似乎想要一个顶部标题（或两个）和左侧的菜单。DockLayoutPanel 可以很好地做到这一点，所以我会从它开始。顺便说一句，考虑在你的布局中添加一个页脚（抱歉，只是认为大多数应用程序都有一个）......

然后，左侧有两个小面板（Tree Str1 和 2）和内容区域。根据您希望它们的灵活性，您将需要不同的结构。

假设您希望左侧不仅有两个，而且可能有很多 Tree Str，并且您的内容区域不会有太大变化。我会在 DockLayoutPanel 的西部区域添加一个 VerticalPanel（其中将包含 2 个 Tree Strs，可能更多）。

在 DockLayoutPanel 的主区域中，添加一个 VerticalPanel 来表示中心区域。此 VerticalPanel 的大小必须适当（可能宽度、高度=100%）。

添加到 VerticalPanel 2 行 (Horizo​​ntalPanels)。

现在，您可以将内容区 1 添加到第一行，将其他内容区添加到第 2 行。

好吧，让代码说话：

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;
}

如果这些领域中的任何一个必须非常灵活，请尝试 GWT 的FlexTable！

于 2012-06-12T09:07:27.907 回答
1

您可以使用 HTML 设计页面布局并在顶部添加 GWT 小部件。

HTML：创建一个div并id="treeStr2"使用 css

总重量：RootPanel.get("treeStr2").add(your widget);

于 2012-06-14T07:44:52.847 回答