Getting Started: Best practice for resizable/dynamic GUI layout


#1

Hi,
after having successfully built my first few GUI applications I’m now coming to the point to rebuild the GUI of a good working application towards a more “professional” look and feel.

What I want is some standard behaviour, known from a lot of applications out there, a GUI layout that resizes properly when resizing the window.

For an example my gui should have:

  • some kind of headline with a bunch of image buttons which will never change their size, so the headline should never increase/decrease in height but only in width. So when increasing the width, blank space should appear at the right but when there is no more space and buttons would be hidden this should constrain the resizing of the outer component owning the whole GUI.
  • Some components with a dedicated function for the user, which themselves could consist of multiple subcomponents forming some useful kind of control or visualization. All these components may be resized up to how big the user wants them to appear and down to a minimum size.
  • A kind of invisible grid, holding each of these components and keeping them aligned with the grid. So for an example, if the whole window will get wider, all components in that grid should get automatically resized in width by that grid. If one of the components in that grid arrived at its minimum width the grid should stop resizing all other components. The components might also have constraints like a fixed width/height-ratio.
  • Optionally the grid lines could be visible and be editable via mouse drag by the user, just as it’s usual in a lot of IDEs and other applications with a dynamic layout.

I could roll out my own class, doing that (I think of some kind of class that has a reference to all components, that gets some constraints about the layout and just calls setBounds with proper values on all that components after the window or outer component was resized), but as these are pretty standard features in current GUI applications I’m sure that there already is some functionality like this in JUCE. But as you might also notice from my description above, I’m just missing some snappy keywords describing those things, so maybe you could just help me find those keywords and then I’m able to find the JUCE classes doing that all by myself :smiley:. I already found some classes giving me the impression that they could be designed for that purpose, but I’m really not sure. And I want to do it right from the start on and not abuse classes that were built with another intention.


#2

You should check out the Grid and FlexBox classes, which are based on their CSS counterparts. The JUCE demo has a section for each of them showing some basic functionality (you’ll need to enable C++14 language features in your project to use them though) and there’s a lot of documentation online for how they work -