GWT面板设计最佳实践

Question

我是GWT的新手，也是Swing / SWT风格的界面搭建。 我已经使用HTML很长一段时间了，我知道如何构建我的UI。 但是，我无法将其转换为GWT。 我目前要做的是一个简单的用户界面，左边有一个表，有4列，标题和标题，右边有一个输入和一些下拉菜单（左边列表的过滤器）。 我已将其作为HTML中的模型，但我无法将其转换为GWT。 表中的每一行还应具有用于选择表中项目的选择链接。

我知道UiBinder ，但看到自12月以来已经有一个页面，它仍然没有出来，它似乎不是一个可行的选择。 如果我可以将我的HTML转换为某些GWT代码，我会喜欢它，但似乎GWT中存在的东西处于更高的抽象层次。 似乎很难将DOM.createElement内容与小部件结合使用，即。 创建我自己的自定义面板。

Answer 1

您所描述的内容似乎很容易在GWT中使用，内置面板。

我建议你看看GWT展示 ，并查看源代码，了解它是如何完成的。

---

停靠面板样本

DockPanel dock = new DockPanel();
dock.setStyleName("cw-DockPanel");
dock.setSpacing(4);
dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

// Add text all around
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH);
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST);
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST);
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH);

// Add scrollable text in the center
HTML contents = new HTML(constants.cwDockPanelCenter());
ScrollPanel scroller = new ScrollPanel(contents);
scroller.setSize("400px", "100px");
dock.add(scroller, DockPanel.CENTER);

Answer 2

使用GWT或Swing GUI的技巧是将您的预期布局可视化为工具箱的布局小部件的组合，彼此嵌套在一起。

根据您的描述，这里有一个关于如何构建GUI的高级视图：

从最高级别的Horizo​​ntalSplitPanel开始。

对于左侧（表:)

创建一个VerticalPanel并为其添加3个小部件 - 标题的图像或html文字，然后是表格本身为4列的网格，然后是标题的另一个图像或文字。 将此垂直面板添加到拆分面板的左侧

（或者，您可能会在整个左侧使用一个大的FlexTable 。特别是如果您希望使用colspans等模拟HTML表格）

对于右侧：

创建一个VerticalPanel，只需根据需要添加标题，下拉列表和文本输入。 或者，如果要在每个下拉列表或文本输入的一侧添加标签，则可以创建网格将此右侧面板添加到Horizo​​ntalSplitPanel的右侧

Answer 3

我认为您可以在GWT项目中高度使用您的HTML体验。 而且你也不需要去UI用户界面你可以玩。

用HTML设计整个布局。 即使您需要静态内容，也可以使用HTML。 在HTML中放置要放置交互式窗口小部件的位置。 从这里开始GWT。 在GWT中构建漂亮的小部件。 通过RootPanle.get（“你的div ID”）将它与你的HTML布局挂钩。添加（你的小部件）;

此技术也用于sdk附带的示例项目中。 即使在Google IO 2010中，他们也在推广更多HTML的使用（我个人意见......）

Answer 4

除了已有的非常好的答案：
你可能想看看smartGWT ，它提供了比GWT附带的更复杂的小部件。 如果您正在寻找想法或在实施某些方面遇到困难，他们的展示也非常有用。