Vaadin 菜单设计 - 哪个组件位于顶部?

Vaadin menu design - which component at the top?

我将制作一个类似 Eclipse 工作区的菜单。基本上, 该页面将分为 3 个部分(列)——比如 LHS、MDDL 和 RHS 部分。 所有这 3 个部分都可以调整大小, 可以是 minimized/maximized。 这 3 个部分中的每一个都有自己的组件, 取决于用户所在的菜单项。

他们将拥有的另一件事是事件将是 triggered/passed to/from 在这 3 个部分中的 2 个不同的组件之间。 例如:当用户单击 LHS 部分的手风琴(或树或选项卡)中的条目时, en 事件将发生在 MDDL 部分。

Vaadin 正在分层管理 UI 组件——根组件,每个非根组件单独或与其他几个 "sibling" 组件一起包含在另一个组件中。从这个角度来看,

根据我目前所掌握的知识,以下是我可以设计 LHS、MDDL 和 RHS 的方法:

1.) 布局(VerticalLayoutHorizontalLayout,或者 FormLayout(?)) 或根部的 Panel,其中包含 3 个部分的 3 个部分(无论这 3 个部分可能是什么)

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

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

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

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

此外 - 考虑到各部分之间的中间人(事件侦听器和跨部分的相应操作),我应该选择哪种设计? 我希望使代码分离。这 3 个部分各有自己的样式(左轴:选项,MDDL:数据条目,右轴:控件)。

在另一行中 - PanelLayout 之间到底有什么区别? Vaadin book 的图 6.1 暗示 Layout 的后代更加复杂——以何种方式?

我是后端开发人员 - FE 新手。如果这是一个天真的问题,请原谅。

TIA。

一个Panel是一个单一的组件容器,布局通常有多个child组件。不同之处在于您所看到的:面板为内部组件提供标题和边框,HorizontalLayout 等布局以定义的方式布置组件,例如水平并排。

我觉得你的选项 2 合理。只有 split panels 提供了可直接拖出框的分隔符。

关于事件处理:我建议为每个部分创建一个 class,派生自 CustomComponent。然后在这些 classes 中实现类似于 Vaadin 的新 events/listeners。 3个section创建完成后,每个section需要根据需要给其他section添加监听