问题
I'll be doing an Eclipse workspace-like menu. Basically, the page will be split into 3 sections (columns)-- say LHS, MDDL & RHS sections. all of these 3 sections will be resizable, can be minimized/maximized. Each of these 3 sections will have their own components, depending on which menu item the user is on.
One other thing they'll have is that events will be triggered/passed to/from between components in 2 different of these 3 sections. Eg.: when the user clicks an entry in the accordion (or in the tree or tabs) on the LHS section, en event will occur in the MDDL section.
Vaadin is managing the UI components hierarchically-- a component at the root, and each non-root component is contained in one other component by itself or with several other "sibling" components. From this view,
From what i've got so far, here are the ways i can design LHS, MDDL & RHS:
1.) a Layout (VerticalLayout or HorizontalLayout, or maybe a FormLayout(?))
or a Panel at the root, with 3 components in it for 3 sections (whatever those 3 components might be)
2.) A HorizontalSplitPanel at the root. On the right panel of this HorizontalSplitPanel, another
HorizontalSplitPanel to make up the 3 sections i'm looking for.
3.) A GridLayout of 3 columns, with a panels in each to make up the 3 sections
4.) 3 different Window-s.
Which of these options would be the best for my use?
Also - considering the go-between the sections (event-listeners and corresponding actions across sections), which design i should go for? I'm looking to make the code decoupled. The 3 sections will have their own styles each (LHS: options, MDDL: data entries, RHS: control).
In another line - what exactly are the differences between a Panel and a Layout? Figure 6.1 of Vaadin book implies that the descendants of Layout are more sophisticated-- in what way?
I'm a backend developer - new to FE things. Excuse if this is a naive Q.
TIA.
回答1:
A Panel is a single component container, layouts usually have more than one child component. The difference is what you can see: The panel provides a caption and border for the inner component, layouts like HorizontalLayout lay out components in a defined way, e.g. horizontally next to each other.
Your option 2 seems reasonable to me. Only the split panels provide a separator that is draggable out of the box.
Regarding the event handling: I recommend creating one class for each section, derived from CustomComponent. Then implement new events/listeners analogous to Vaadin's in these classes. After the 3 sections are created, each section needs to add listeners to other sections as required.
来源：https://stackoverflow.com/questions/38002220/vaadin-menu-design-which-component-at-the-top