GWT 展示左侧菜单中使用的小部件答案

【问题标题】：Widget used in GWT showcase left menuGWT 展示左侧菜单中使用的小部件
【发布时间】：2012-03-27 11:31:33
【问题描述】：

我想在 GWT 中开发一个类似于 http://gwt.google.com/samples/Showcase/Showcase.html 的垂直菜单（左侧蓝色菜单，第一部分是“小部件”）。

因为它是一个 GWT 展示，我们可以假设左侧菜单是一个 GWT 小部件，但是哪个？

我浏览了每个示例，但没有一个看起来像那个菜单。有什么猜测吗？

【问题讨论】：

标签： gwt

【解决方案1】：

您知道 Showcase 示例是开源的吗？它甚至与 GWT SDK 捆绑在一起。

代码告诉使用它是 ScrollPanel 内的 CellTree（在 DockLayoutPanel 内的 DockLayoutPanel 内）：

The UiBinder template
The code initializing the CellTree
The code initializing the TreeViewModel（包括在展开类别节点时预取样本的分割点；以及在选择样本节点时更新中心面板）
the TreeViewModel itself

【讨论】：

【解决方案2】：

这是 CellTree 小部件！

展示柜内实际上有一个演示：CellTree，但在示例中，它应用了不同的样式：

CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
    cellTree = new CellTree(
        new ContactTreeViewModel(selectionModel), null, res);

（这个 stlyes 使 +/- 按钮看起来像一棵普通的树）

如果您不应用此样式，则单元格树看起来像左侧菜单。

【讨论】：

我认为这只是 DisclosurePanels。 CellTree 小部件在 div 上具有其他属性，例如 __gwtcellbasedwidgetimpldispatchingfocus1。这也出现在陈列柜中。但是，是的，你可以用任何一种方式实现它。如果它是静态内容，使用 DisclosurePanel 可能更容易，但如果它是数据支持的，那么就选择 CellTree。
我确定它是 CellTree 小部件。如果您查看 CSS 内部，您会看到有“__gwtCellBasedWidgetImplDispatchingblur”属性。此外，“披露面板”是基于表格的，而左侧菜单是基于 div 的。关于实施，你是对的，你可以同时做到这一点。 CellTTree 不是最容易理解和实现的小部件，因此对于简单的任务，我会使用 Disclosure Panel。

【解决方案3】：

看起来就像DisclosurePanel 的垂直排列。这里是the docs。

【讨论】：