设计一个GWT UI布局

我们想要在GWT中设计一个布局，在屏幕上有很多小的小部分。基本上它有一个左侧菜单，页眉，页脚，主要内容区域和很多子部分，如果用户不想看到它们，可以由用户关闭。然后剩余的内容部分应该自动调整。我们正在使用GWT平台。我怀疑DockLayoutPanel是否适合这一点，因为它必须更加灵活。除此之外，我没有得到任何好的布局示例。我们可以使用GWT enter image description here 面板来实现这个目标吗？或者我们必须在模块html文件中使用div来手动执行它？设计一个GWT UI布局

请在下面找到草稿版式。我真的很困惑与什么面板开始.... 请建议。

来源

2012-06-12 Santosh

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

首先，它似乎你想要的，像大多数网站一样，顶部标题（或两个）和左侧的菜单。 DockLayoutPanel可以很好地执行此操作，所以我会先使用它。顺便说一句，考虑添加页脚到您的布局（对不起，只是想大多数应用程序有一个）...

然后，你有左边的两个小面板（Tree Str1和2）和内容区域。根据你想要这些的灵活性，你需要不同的结构。

假设您不想只有两个，但可能有很多Tree Str在左侧，而您的内容区域不会有太大变化。我会在DockLayoutPanel的West区域添加一个VerticalPanel（可能包含更多的2个Tree Strs）。

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

添加到VerticalPanel 2行（HorizontalPanels）。

现在，你可以添加内容区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-12 09:07:27 Renato

非常感谢您为您的宝贵意见。我一定会尝试这个。现在我只有一个问题。我们使用像素来显示面板的宽度。我们不能给百分比？因为不然的话，屏幕尺寸是多少，如果屏幕尺寸更大，它会留下太多的空间？最佳做法是什么？ – Santosh

另外，请让我知道什么是设置不同的部分高度和宽度的最佳做法？像素还是百分比？ – Santosh

这是一个HTML设计问题。无论你使用宽度的百分比，取决于你希望你的网站在窗口大小和不同屏幕上的行为。粗略地说，有两种策略：[固定或灵活宽度页面]（http://webdesign.about.com/od/webdesign/a/aa080904.htm）。您还可以混合使用这两种方式......这取决于您的内容和目标受众（移动设备，平板电脑或台式机/笔记本电脑）。 – Renato

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

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

GWT：RootPanel.get("treeStr2").add(your widget);

来源

2012-06-14 07:44:52 yuvicode

设计一个GWT UI布局

回答

相关问题