java GWT 面板设计最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1153097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GWT panel design best practices
提问by Staale
I am a newbie in GWT, and also to Swing/SWT style interface building. I have worked with HTML for a long time, and I know how to build my UIs in that. However, I am having trouble translating this to GWT. What I am trying to make currently, is a simple UI with a table on the left with 4 columns, heading and a caption, and a panel on the right with an input and some dropdowns (filters for the list on the left). I have made this as a mockup in HTML, but I am having trouble translating this into GWT. Each row in the table should also have a select link for selecting an item in the table.
我是 GWT 的新手，也是 Swing/SWT 风格界面构建的新手。我使用 HTML 已经很长时间了，我知道如何在其中构建我的 UI。但是，我无法将其转换为 GWT。我目前正在尝试制作的是一个简单的用户界面，左侧有一个表格，有 4 列、标题和标题，右侧有一个面板，带有输入和一些下拉列表（左侧列表的过滤器）。我已将其作为 HTML 中的模型制作，但我无法将其转换为 GWT。表格中的每一行还应该有一个选择链接，用于选择表格中的一个项目。
I know of UiBinder, but seeing as there has been a page for it since december, and it's still not out, it doesn't seem like a viable option. I would love it if I could convert my HTML to some GWT code, but it seems like the stuff that exists in GWT is at a bit higher level of abstraction. It also seems hard to use DOM.createElement stuff combined with widgets, ie. creating my own custom panel.
我知道UiBinder，但看到自 12 月以来就有一个页面，它仍然没有出来，它似乎不是一个可行的选择。如果我可以将我的 HTML 转换为一些 GWT 代码，我会很高兴，但似乎 GWT 中存在的东西处于更高的抽象级别。将 DOM.createElement 东西与小部件结合使用似乎也很困难，即。创建我自己的自定义面板。
采纳答案by Peter Recore
The trick with GWT or Swing GUIs is to visualize your intended layout as a combination of the toolkit's layout widgets, nested inside each other.
GWT 或 Swing GUI 的技巧是将您的预期布局可视化为工具包的布局小部件的组合，相互嵌套。
Based on your description, here's a high level view of how you might compose your GUI:
根据您的描述，以下是您如何编写 GUI 的高级视图：
Start with a HorizontalSplitPanelfor the highest level.
从最高级别的HorizontalSplitPanel开始。
For the left side (the table:)
左侧（桌子：）
Create a VerticalPaneland add 3 widgets to it - a image or html literal for the header, then a Grid with 4 columns for the table itself, then another image or literal for the caption. Add this vertical panel to the left side of the split panel
创建一个VerticalPanel并向其添加 3 个小部件 - 标题的图像或 html 文字，然后是表格本身的具有 4 列的网格，然后是标题的另一个图像或文字。将此垂直面板添加到拆分面板的左侧
(Alternatively, you might get away with one big FlexTablefor the entire left side. Especially if you're looking to emulate HTML tables with colspans and such)
（或者，您可能会在整个左侧使用一个大的FlexTable。特别是如果您希望使用 colspan 等模拟 HTML 表格）
For the right side:
对于右侧：
Create a VerticalPanel, and just add headers, dropdowns, and text inputs as necessary. Alternatively, you could create a Grid if you want labels on the side of each dropdown or text input Add this right side panel to the right side of the HorizontalSplitPanel
创建一个 VerticalPanel，并根据需要添加标题、下拉列表和文本输入。或者，如果您想在每个下拉列表或文本输入的一侧添加标签，您可以创建一个 Grid 将此右侧面板添加到 HorizontalSplitPanel 的右侧
回答by Robert Munteanu
What you're describing seems to be quite easily available in GWT, with the built-in panels.
您所描述的内容在 GWT 中似乎很容易获得，带有内置面板。
I suggest you take a look at the GWT showcase, and view the source to see how it's done.
我建议您查看GWT 展示，并查看源代码以了解它是如何完成的。
Dock panel sample
坞站面板示例
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);
回答by iftee
I think you can use your HTML experience highly in your GWT project. And you also need not to go for UI binder You can play in between.
我认为您可以在 GWT 项目中高度使用您的 HTML 经验。而且你也不需要去 UI binder 你可以在两者之间玩。
Design your whole layout in HTML. Even where you need static content use HTML. in your HTML Put a where you want to put your interactive widget. From here on GWT starts. Build your nice widgets in GWT. Hook it with your HTML layout by RootPanle.get("your div ID").add(your widget);
用 HTML 设计整个布局。即使在需要静态内容的地方也使用 HTML。在您的 HTML 中放置您想要放置交互式小部件的位置。GWT 从这里开始。在 GWT 中构建您漂亮的小部件。通过 RootPanle.get("your div ID").add(your widget); 将其与 HTML 布局挂钩；
This technique is used also in the sample project comes with the sdk. Even in Google IO 2010, they are promoting the USE of more HTML, where you can (My personal opinion..)
此技术也用于 sdk 附带的示例项目中。即使在 Google IO 2010 中，他们也在尽可能地推广使用更多的 HTML（我的个人意见..）
回答by pmr
In addition to the very good answers already available:
You might want to have a look at smartGWTwhich provides a lot more sophisitcated widgets than the ones that come with GWT. Their showcase is also very helpful if you are looking for ideas or have trouble implementing something.
除了已经提供的非常好的答案之外：
您可能想看看smartGWT，它提供了比 GWT 附带的更复杂的小部件。如果您正在寻找想法或在实施某事时遇到困难，他们的展示也非常有帮助。
