Can you explain the difference between HorizontalLayoutContainer and HBoxLayoutContainer for example?
2 Answers
5
votes
5 minutes of reading the JavaDoc reveals that HBoxLayoutContainer has:
- support for automatic overflow
- each child is laid out with a minimum and maximum size (on the container's axis, so here on the horizontal axis, thus min/max width)
- possibly distributing remaining space among children (flex)
Whereas HorizontalLayoutContainer:
- (possibly) scrolls when the children don't fit
- lays out its children with a fixed width and height each (or their intrinsic size).
My understand would be that HBoxLayoutContainer uses the CSS3 Flexible Box Model under the hood, while HorizontalLayoutContainer would rather use display: inline-box or float (or an equivalent controlled by JavaScript, possibly using position: absolute)
0
votes
Some examples will help. Let's assume you have a fixed size panel inside a window. You want to fill the panel with a vertical stack of widgets, so it looks something like this:
[Select all]
[ ] Check box #1
[ ] Check box #2
...
[ ] Check box #n
If the list gets too long, you want a vertical scroll bar for the check boxes, but the "select all" button should not scroll.
The panel containing all of the check boxes should be a VerticalLayoutContainer. This is obvious because VBoxLayoutContainer doesn't have the getScrollSupport() method.
What's not obvious is that the outer panel (the panel containing the "select all" button and the scrolling panel) also needs to be a VerticalLayoutContainer. The outer panel will take the size given by its parent, and it will force its children to fit inside itself. If the outer panel were a VBoxLayout panel, then the scrollbar would disappear in the inner panel. The problem is that the outer panel would make itself and the inner panel as big as they need to be to contain all of the check boxes. Since the inner panel is really big, the scrollbar will never appear. Since the outer panel is really big, it will get cut off. It will look like you forgot to add the scroller to the inner panel, even though your mistake was in the outer panel.
A second example: Let's add more buttons to the top row.
[Select all] [Select none] [Help]
[ ] Check box #1
[ ] Check box #2
...
[ ] Check box #n
In the first example we put the [Select all] button directly into the outer panel. In this case we need to make a new panel to hold the buttons. In this case you want an HBoxLayoutContainer. The HBoxLayoutContainer will automatically set its height to the height of the buttons inside, and the outer panel will automatically reserve enough space for the HBoxLayoutContainer. If you used a HorizontalLayoutContainer, instead, that container would not automatically set its height. Unless you manually set the height of that container (yuck!) it would have a height of 0! I.e. it would disappear.
In summary, when you're picking between these containers, the most important question is how this container will interact with its parent, not its children. If you want the container to pick its own size (like the button bar) use HBoxLayoutContainer or VBoxLayoutContainer. If you want the container to use the size recommended by its parent (like the main panel in a fixed sized window) use HorizontalLayoutContainer or VerticalLayoutContainer.
Don't feel bad if you didn't get this from the javadocs. It took me hours of reading and trial and error to figure this out.
