代码之家 › 专栏 › 技术社区 › Staale

GWT面板设计最佳实践

gwt java

4

Staale · 技术社区 · 17 年前

我是GWT的新手,也是Swing/SWT风格界面构建的新手。我已经使用HTML很长时间了,我知道如何用它构建我的UI。但是,我很难将其翻译成GWT。我目前正在尝试制作一个简单的UI,左侧有一个表,有4列,标题和标题,右侧有一个面板,有一个输入和一些下拉菜单(左侧列表的过滤器)。我用HTML制作了一个模型,但在将其翻译成GWT时遇到了困难。表中的每一行都应有一个选择链接,用于选择表中的项目。

我知道 UiBinder

4 回复 | 直到 17 年前

1

9

Spooky Muscothym 11 年前

您所描述的内容在GWT中似乎很容易获得,并且内置了面板。

我建议你看看 the GWT showcase ,并查看源代码以了解它是如何完成的。

Dock panel screenshot

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

2

3

Peter Recore 17 年前

GWT或Swing GUI的诀窍是将您的预期布局可视化为工具包布局小部件的组合,这些小部件相互嵌套。

根据您的描述,以下是您如何构建GUI的高级视图:

从a开始 HorizontalSplitPanel 最高级别。

左侧(表格:)

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

(或者,你可能会得到一个大 FlexTable

右侧:

创建一个垂直面板,只需根据需要添加标题、下拉菜单和文本输入。或者,如果你想在每个下拉列表或文本输入的侧面添加标签,你可以创建一个网格将此右侧面板添加到水平拼接面板的右侧

3

1

iftee 16 年前

我认为你可以在GWT项目中充分利用你的HTML经验。你也不需要去UI绑定器你可以在两者之间玩。

用HTML设计整个布局。即使在需要静态内容的地方,也要使用HTML。在HTML中放置一个您想放置交互式小部件的位置。从这里开始GWT。在GWT中构建漂亮的小部件。通过以下方式将其与HTML布局挂钩 RootPanle.get(“你的div ID”).add(你的小部件);

此技术也用于sdk附带的示例项目中。即使在谷歌IO 2010中,他们也在推广更多HTML的使用,在那里你可以(我个人的意见..)

4

0

pmr 17 年前

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