设计gwtui布局
我们想在GWT中设计一个布局，它在屏幕上有很多小部分。基本上，它有一个左菜单，页眉，页脚，主内容区和许多子部分，用户可以关闭，如果他不想看到他们的情况下。然后剩余的内容部分应该自动调整。我们正在使用GWT平台。我怀疑DockLayoutPanel是否适合这样做，因为它必须更加灵活。除此之外，我没有得到任何好的布局示例。我们可以使用GWT面板实现这一点，还是必须在模块html文件中使用div手动实现这一点 请查看下面的草稿布局。我真的不知道该从哪个小组开始。。。。设计gwtui布局,gwt,Gwt,我们想在GWT中设计一个布局，它在屏幕上有很多小部分。基本上，它有一个左菜单，页眉，页脚，主内容区和许多子部分，用户可以关闭，如果他不想看到他们的情况下。然后剩余的内容部分应该自动调整。我们正在使用GWT平台。我怀疑DockLayoutPanel是否适合这样做，因为它必须更加灵活。除此之外，我没有得到任何好的布局示例。我们可以使用GWT面板实现这一点，还是必须在模块html文件中使用div手动实现这一点 请查看下面的草稿布局。我真的不知道该从哪个小组开始。。。。 好心的建议 实现这一目标的方法有
好心的建议 实现这一目标的方法有数百万种。我会给你我的意见，并试图解释为什么我会这样做 首先，像大多数网站一样，你似乎想要一个顶部标题（或两个）和左边的菜单。DockLayoutPanel可以很好地做到这一点，因此我将从它开始。顺便说一下，考虑添加一个页脚到您的布局（对不起，只是认为大多数应用程序有一个……< / P>） 然后，在左侧有两个小面板（树Str1和2）和内容区域。根据您希望这些功能的灵活性，您将需要不同的结构 假设您不仅希望在左侧有两个树Str，而且可能有许多树Str，并且您的内容区域不会有太大变化。我会在DockLayoutPanel的西部区域添加一个垂直面板（其中将包含2个树状结构，可能更多） 在DockLayoutPanel的主区域中，添加垂直面板以表示中心区域。垂直面板的尺寸必须适当（可能是宽度，高度=100%） 向垂直面板添加2行（水平面板） 现在，您可以将内容区域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;
}
公共面板getMainPanel（）{
DockLayoutPanel主面板=新DockLayoutPanel（单位：PX）；
主面板。设置尺寸（“500px”、“500px”）；
VerticalPanel leftPanel=新建VerticalPanel（）；
标签treeStr1=新标签（“树Str1”）；
树1.设置大小（“100%，“100px”）；
标签treeStr2=新标签（“树Str2”）；
树1.设置大小（“100%，“200px”）；
leftPanel.add（treeStr1）；
leftPanel.add（treeStr2）；
VerticalPanel centralArea=新的VerticalPanel（）；
centralArea.setSize（“100%”，即“100%”）；
centralArea.setHorizontalAlignment（HasHorizontalAlignment.ALIGN_CENTER）；
中央对齐。设置垂直对齐（HasVerticalAlignment.Alignment_MIDDLE）；
centralArea.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
HorizontalPanel行1=新的HorizontalPanel（）；
行1.设置宽度（“90%”）；
HorizontalPanel行2=新的HorizontalPanel（）；
行2.设置宽度（“90%”）；
行2.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
行2.getElement（）.getStyle（）.setBorderColor（“红色”）；
行2.设置水平对齐（哈希水平对齐.左对齐）；
centralArea.add（第1行）；
centralArea.add（第2行）；
HTML ca1=新HTML（“内容区域1”）；
ca1.设置大小（“100%，“100px”）；
ca1.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
HTML ca2=新HTML（“内容区域2”）；
ca2.设置大小（“60%，“60px”）；
ca2.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
HTML ca3=新HTML（“内容区域3”）；
ca3.设置大小（“30%，“60px”）；
ca3.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
第1行。添加（ca1）；
第2行。添加（ca2）；
第2行。添加（ca3）；
mainPanel.addNorth（新HTML(
“这是你的标题，创建一个小部件而不是这个”）；
mainPanel.addNorth（新HTML(
“更多用户选项”），60）；
主面板。addWest（左面板，150）；
主面板。添加（中央区域）；
返回主面板；
}
如果这些领域中的任何一个必须非常灵活，请尝试GWT 实现这一目标的方法有数百万种。我会给你我的意见，并试图解释为什么我会这样做 首先，像大多数网站一样，你似乎想要一个顶部标题（或两个）和左边的菜单。DockLayoutPanel可以很好地做到这一点，因此我将从它开始。顺便说一下，考虑添加一个页脚到您的布局（对不起，只是认为大多数应用程序有一个……< / P>） 然后，在左侧有两个小面板（树Str1和2）和内容区域。根据您希望这些功能的灵活性，您将需要不同的结构 假设您不仅希望在左侧有两个树Str，而且可能有许多树Str，并且您的内容区域不会有太大变化。我会在DockLayoutPanel的西部区域添加一个垂直面板（其中将包含2个树状结构，可能更多） 在DockLayoutPanel的主区域中，添加垂直面板以表示中心区域。垂直面板的尺寸必须适当（可能是宽度，高度=100%） 向垂直面板添加2行（水平面板） 现在，您可以将内容区域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;
}
公共面板getMainPanel（）{
DockLayoutPanel主面板=新DockLayoutPanel（单位：PX）；
主面板。设置尺寸（“500px”、“500px”）；
VerticalPanel leftPanel=新建VerticalPanel（）；
标签treeStr1=新标签（“树Str1”）；
树1.设置大小（“100%，“100px”）；
标签treeStr2=新标签（“树Str2”）；
树1.设置大小（“100%，“200px”）；
leftPanel.add（treeStr1）；
leftPanel.add（treeStr2）；
VerticalPanel centralArea=新的VerticalPanel（）；
centralArea.setSize（“100%”，即“100%”）；
centralArea.setHorizontalAlignment（HasHorizontalAlignment.ALIGN_CENTER）；
中央对齐。设置垂直对齐（HasVerticalAlignment.Alignment_MIDDLE）；
centralArea.getElement（）.getStyle（）.setBorderStyle（BorderStyle.SOLID）；
HorizontalPanel行1=新的HorizontalPanel（）；
行1.设置宽度（“90%”）；
HorizontalPanel行2=新的HorizontalPanel（）；
行2.设置宽度（“90%”）；