样式化 GWT 的 DockLayoutPanel答案

【问题标题】：Styling GWT's DockLayoutPanel样式化 GWT 的 DockLayoutPanel
【发布时间】：2011-01-06 18:53:52
【问题描述】：

我正在尝试使用 GWT 创建一个 DockLayoutPanel。它应该占据整个屏幕。

DockLayoutPanel dockPanel = new DockLayoutPanel(Unit.EM);
dockPanel.addSouth(new HTML("South"), 2);
dockPanel.addNorth(new HTML("North"), 2);
dockPanel.addEast(new HTML("Easat"), 2);
dockPanel.addWest(new HTML("West"), 2);
dockPanel.add(new HTML("Center"));
RootLayoutPanel.get().add(dockPanel);

我相信添加方法的第二个参数是各个面板的宽度。布局如何决定面板的高度？
如何设置布局样式，例如为面板添加边框、面板之间的间距、添加与边框对齐的面板标题？
是否应该使用 CSS 设置面板背景颜色，或者是否可以通过 java 设置？
我可以将这些面板设为拖放面板吗？

【问题讨论】：

标签： gwt panels

【解决方案1】：

1) 第二个参数实际上是面板的大小。它将是宽度或高度，具体取决于布局位置。使用 Unit.PX 或 Unit.PC 以获得更清晰的结果，EM 单元在开始时可能会令人困惑。

2) 使用 CSS 样式。

3) 再次使用 CSS

4) 单独使用 GWT 是不可能的。看看GWT-Mosaic 项目。特别是“拖放列/行布局”：http://mosaic.analytical-labs.com/#CwDNDColumnRowLayout

【讨论】：

【解决方案2】：

1) 高度等是使用普通 HTML 布局规则确定的。面板的高度和宽度就是包含 div 的高度和宽度。

2) 像使用任何其他 div 一样使用 CSS 对其进行样式设置。 UiBinder 让这很容易。

3) 是的，使用 CSS。如果你想直接操作它可以调用getElement() 和getStyle() 或addStyleName() 添加一个CSS 类。无论如何，UiBinder 可能是比用 Java 更好的选择。

4) AFAIK，没有办法开箱即用。您必须编写一些代码来处理它。 SplitLayoutPanel 将允许您更改面板的大小，但不能更改位置。

【讨论】：