Vaadin 菜单设计 - 顶部的哪个组件？

Question

我将做一个类似 Eclipse 工作区的菜单。基本上， 该页面将分为 3 个部分（列）——比如 LHS、MDDL 和 RHS 部分。 所有这 3 个部分都可以调整大小， 可以最小化/最大化。 这三个部分中的每一个都有自己的组件， 取决于用户在哪个菜单项上。

他们将拥有的另一件事是事件将被触发/传递到/从 在这 3 个部分中的 2 个不同的组件之间。 例如：当用户单击 LHS 部分的手风琴（或树或选项卡）中的条目时， en 事件将发生在 MDDL 部分。

Vaadin 分层管理 UI 组件——一个位于根的组件，每个非根组件单独包含在另一个组件中或与其他几个“同级”组件一起包含在另一个组件中。从这个角度来看，

就我目前所掌握的情况而言，以下是我可以设计 LHS、MDDL 和 RHS 的方法：

1.) 布局（VerticalLayout 或 HorizontalLayout，或者可能是 FormLayout(?)） 或根处的Panel，其中包含 3 个部分的 3 个组件（无论这 3 个组件是什么）

2.) 根处的 HorizontalSplitPanel。在这个HorizontalSplitPanel 的右侧面板上，另一个 HorizontalSplitPanel 组成我正在寻找的 3 个部分。

3.) 3 列的GridLayout，每列有一个面板组成 3 个部分

4.) 3 个不同的Window-s。

这些选项中哪一个最适合我使用？

另外 - 考虑到各部分之间的衔接（事件侦听器和跨部分的相应操作），我应该采用哪种设计？ 我希望使代码解耦。 3 个部分各有自己的样式（LHS：选项，MDDL：数据条目，RHS：控制）。

在另一行 - Panel 和 Layout 之间到底有什么区别？ Vaadin book 的图 6.1 暗示 Layout 的后代更复杂——在什么方面？

我是一名后端开发人员 - 对 FE 不熟悉。请原谅这是一个幼稚的问题。

TIA。

Answer 1

Panel 是单个组件容器，布局通常有多个子组件。不同之处在于您可以看到：面板为内部组件提供标题和边框，HorizontalLayout 等布局以定义的方式布置组件，例如水平相邻。

您的选项 2 在我看来是合理的。只有split panels 提供了一个可拖出框的分隔符。

关于事件处理：我建议为每个部分创建一个类，派生自CustomComponent。然后在这些类中实现类似于 Vaadin 的新事件/侦听器。 3个section创建后，每个section都需要根据需要给其他section添加监听器。