So, there's this idea, which you already know: Define the layout of your UI by creating a tree of panels. The leaf nodes on the tree are what we used to call 'controls' way back in the day-- the things that the user interacts with, radio buttons and listboxes and such. The internal nodes are mostly concerned with layout; this kind of panel stacks its child panels vertically, that kind puts its children into a grid, etc.It's COMMON. Most of the UI-generating systems I've seen in the past twenty years are implementations of this, and the ones that aren't borrow from it.What's the word for this idea?EDIT: I'm looking for a word, or a phrase, for the pattern I'm describing. It's a big, high-level pattern, and it's become nearly universal. AWT, HTML forms with the controls in table cells, Swing, XAML, Android, and ASP.NET all use it or borrow from it. There's an idea here, on the same level as concepts like windowing system or mesh network. What do we call it?I suspect that the real answer is, there's no consensus on a name for it yet. Which would, itself, be really interesting.
What's the term describing this system for generating user interfaces?
terminology;user interface
In HTML/CSS you're referring to a relational display modelWhere elements are positioned based on their relationship to the elements that come before/after them in the tree.The alternative is an absolute positioning model where the structure doesn't matter and every element's position is explicitly placed in relation to the top left corner.Relational is generally preferred because it allows you to make changes to parts of the whole without requiring a full re-calculation of all the offsets within the page.For example, if you change the offset for a panel that is 5 generations/nodes removed from the main panel; in a relational mode, everything re-flows to compensate automatically; in an absolute model, the offset for all 5 generations/nodes of parent panels need to be re-calculated in cascading order because no child can calculate it's offset in relation to its parent until the parent is updated first.The tricky part about HTML/CSS layout models is, you can mix them.For instance, a 5th child panel can be placed using relative positioning (display:relative) but the child elements of that node can be placed using absolute positioning (display:absolute) within that element. Ie Instead of calculating the top-left offset from the window corner, it's taken in relation to the top-left of the box it resides in (5 generations deep).The power of the relative positioning model is that no child has to be aware of its parent's positioning. Child elements can be blissfully unaware. The difficulty comes in when there are issues/inconsistencies (ie as has happened a lot with browser inconsistencies in the past). Then you'll have to crawl back up the tree one element at a time until you can determine the one causing the trouble.Fortunately, with tools like FireBug and Google Chrome Developer Tools, it's really easy to crawl through the tree and visualize the layout boxes, padding, margins, etc interact with each other.Unfortunately, once you adopt a relational model it becomes really difficult to design a typical drag-drop GUI builder tool so most relational GUI development happens in code only. Maybe that will change in the near/distant future.Note: For completeness sake, I feel like I should also mention the fixed positioning model. It's basically the same as absolute positioning but it is not affected by scrolling. That's how those annoying toolbars that stick to the bottom/side of the page are created on most websites.