GWT面板设计最佳实践

Question

我是GWT的新手，也不熟悉Swing/SWT风格的界面构建。我长期使用HTML，并知道如何在其中构建我的UI。然而，我现在在将其转换为GWT时遇到了麻烦。我正在尝试创建一个简单的UI，左侧有一个带有4列、标题和说明的表格，右侧有一个输入框和一些下拉列表（用于筛选左侧列表）。我已经在HTML中制作了这个模型，但是我无法将其转换为GWT。表格中的每一行还应该有一个选择链接，用于选择表格中的项。

我知道UiBinder，但由于自去年以来就有页面了，但它仍未发布，因此似乎不是可行的选择。如果我可以将我的HTML转换为一些GWT代码，那就太好了，但似乎GWT中存在的东西处于更高的抽象级别。同时，使用DOM.createElement与小部件结合使用似乎很难，即创建自己的自定义面板。

- Staale

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

- Robert Munteanu

Answer 2

GWT或Swing GUI的诀窍在于将您想要的布局视觉化为工具包的布局小部件，嵌套在彼此内部。

根据您的描述，以下是如何组合GUI的高级视图：

从HorizontalSplitPanel开始作为最高级别。

对于左侧（表格：）

创建一个VerticalPanel并将3个小部件添加到其中 - 用于标题的图像或HTML文字，然后是具有4列的表格本身的网格，然后是另一个图像或文字用于说明。将此垂直面板添加到分割面板的左侧。

（或者，如果您想要模拟具有colspan等HTML表格，则可能只需一个大的FlexTable即可涵盖整个左侧。）

对于右侧：

创建一个VerticalPanel，根据需要添加标题、下拉框和文本输入框。或者，如果您想要在每个下拉框或文本输入框的侧面添加标签，则可以创建一个Grid。将此右侧面板添加到HorizontalSplitPanel的右侧即可。

- Peter Recore

---

能否设置一个水平面板，比如1/4左侧3/4右侧静态地固定在那里，以便永远无法重新定位？我似乎只能让它在运行时居中并拖动，而不能在代码中指定其位置。 - David

Answer 3

我认为你可以在GWT项目中充分利用你的HTML经验。 而且你也不需要使用UI binder 你可以在其中进行调整。

在HTML中设计整个布局。即使您需要静态内容，也请使用HTML。在您的HTML中，将交互式小部件放置在您想要放置的位置。从这里开始使用GWT。在GWT中构建您的漂亮小部件。通过以下方式将其与HTML布局连接起来 RootPanel.get("your div ID").add(your widget);

这种技术也用于sdk附带的示例项目中。 甚至在Google IO 2010中，他们正在推广更多使用HTML，您可以（我的个人意见..）

- iftee

Answer 4

除了已经提供的非常好的答案之外：
您可能还想看看smartGWT，它提供了比GWT自带的更复杂的小部件。如果您正在寻找想法或遇到实现问题，他们的展示也非常有帮助。

- pmr

---

请注意，引入一个庞大的UI组件库会增加很多代码量 - 如果您的使用场景可以通过标准的GWT小部件满足，我建议只使用它，而不是使用第三方UI库。 - Chii