SidePanel, FlexBox or StretchableLayoutManager for a horizontal split view?

I need somewhere in the GUI a view that can be split into two or three horizontal resizable sections. So I looked at the documentation of the component classes, but I can not find out which components to use for this.

The SidePanel seems a candidate. There are a few lines of description for this class. But not enough for me to be able to know if I can use this for my goal. When a side panel is shifted in, does it occupy the whole window? Or can I resize the side panel at will with the mouse? Not clear to me. But because it says that it is especially for mobile apps, it probably is not the correct way to go.

So maybe the FlexBox? But it is not clear to me if I can disable/enable each item separately. And can I add a resize handle to resize with the mouse? I do not think so.

Then maybe using the StretchableLayoutManager? There is a description and even a piece of example code. But it does not say if you can add a handle for manual resizing. Though there is the StretchableLayoutResizeBar component. But no information how to use it.

So which approach is best? Or is there a even better way?

There are perfectly great examples of StretchableLayoutResizerBar in the DemoRunner. You might use it in your case to hold some FlexBox’s which are themselves containers that re-arrange your principle UI components according to your outer bounds.

SidePanel is quite useful for adding functionality, but I wouldn’t take that approach until you’ve grok’ed StretchableLayoutResizeBar and FlexBox.

They both have their applicable use cases, and should not be considered supplementary to each other, but rather complementary … although you can achieve success without too much fuss with either approach, according to your needs.

EDIT: See also, https://www.youtube.com/watch?v=RzfUS_xnUnw

And, if you haven’t done the tutorial yet (seems likely) then you should really, really do it:

https://docs.juce.com/master/tutorial_flex_box_grid.html

Yes, I have seen the Flexbox tutorials. But as far as I understand, you can not resize the sections manually (using the mouse).

And I did not see the StretchableLayout in the demo runner. Can you point me to the corresponding demo?

Ah, found it. I was looking for a demo especially for the StretchableLayout. But that does not exist. The StretchableLayout is however used in the ImageDemo.h, FontsDemo.h and VideoDemo.h.

1 Like

Thanks I was looking for a demo of this component as well.

JUCE team: It would be good to have a a reference of where JUCE classes are used in the demos…

1 Like