GWT面板设计最佳实践

Question

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

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

Answer 1

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

我建议你看一下the GWT showcase，然后查看来源，了解它是如何完成的。

---

停靠面板示例

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的高级视图：

从最高级别的HorizontalSplitPanel开始。

左侧（表格:)

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

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

对于右侧：

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

Answer 3

我认为您可以在GWT项目中高度使用HTML体验。 而且你也不需要去寻找UI绑定器 你可以在两者之间玩。

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

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

Answer 4

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