Sizer like functionality?


I’m still fairly new to juce,
i need to build a scrolled viewport, containing modules.
a module is basically a little collapsible window with params.
the window will contain a list of artibrary size to be scrolled vertically.
each module may have a custom height, and can change height (eg when collapsed/not-collapsed)

this list/view of modules will be built dynamically from a data structure.

what would be the best way to accomplish this in juce ?
with wxwidgets, i’d put the components in a vertical wxsizer which will automatically take care of this, however i can’t find any sizer like functionality in juce.

a propper way to implement this structurally would be welcome :slight_smile:

here is a little mockup screenshot/collage to show what i mean:


Are you aware of the Viewport class?

You can create your inner dynamic component that will resize itself and then put it in a viewport and set its size. The scrollbars will appear if the content component is larger than the viewport so you can scroll around inside.


how does the communication upwards (child -> parent) work ? is this auto or do i need to set signal the parent fromt the child ?

edit -> and how to add multiple ones to the viewport ? do i need to code a custom container component or so?


Well there are obviously a lot of ways this could be done depending on what your sub-components need to do. If they are just holding a list of properties you could look into PropertyComponent

I would personally divide each sub-section into its own component so your hierarchy would look something like:

You can get pointers to child components with Component::getChildComponent() but it may be nicer to keep a list of all the properties somewhere else but this will depend on what you intend to do with them.

Anyway, I’m no expert on these things so I’m sure others will have some ideas. Have a look at Jucer under juce->extras as this deals with this sort of thing very nicely. Also if you are brand new to juce try just creating some simple apps that don’t really do anything just to see the different ways of communicating between components.


thanks for the tips, i think i’ll manage :slight_smile:
i’m putting some initial implementation together now :slight_smile:

i’ll ask here if i run into any more problems :slight_smile: