GUI separate panels to scroll

My GUI currently looks like so

I can figure out how to place whats currently on display there in a separate panel that I can scroll through to see the rows ?

Have you looked at the Viewport class?

I’ve bee taught how to use TextButton and sliders.

I’ve made a Viewport viewport object

then in the constructor
addAndMakeVisible (&viewport);

then in resize
viewport.setBounds (r.removeFromTop(100));

I can’t see anything. and Im not sure how to figure out how to place something like an array of textbutton objects inside it?

You need to put your child components into a separate “holder” Component which you will then set as the viewed component for the ViewPort. Probably best to do a separate Component subclass for that, so you can access the child components with their proper types and member names inside that.

You need to use the Viewport::setViewedComponent() method to pass it a component to display. So if you wanted to display a collection of buttons, they would need to be contained in a parent component that you would pass to the Viewport. The documentation is here or you can just search the JUCE codebase for “Viewport” as it’s used quite a lot.

like this?

void MainComponent::setViewedComponent()

const int height = 50;
for (int i = 0; i < Audio::NumFilePlayers; i++)
    filePlayerGuis[i].setBounds (0, i * height, getWidth(), height);


No. setViewedComponent is not a method for you to override but rather an existing method of ViewPort itself.

So right now my Maincomponant::resized is displaying a row of buttons. Where can viewport enter ? Im currently getting an error where it is now…I dont understand what I need to understand to get this…09

what goes in the arg of setViewedComponenent()?

Pointer to your content component. You should not call that in your main component’s resize. (Call it in the constructor instead.) Also the passed in pointer can not be the main component itself. You need to have a separate component that contains your child components (your buttons etc…)

/** Sets the component that this viewport will contain and scroll around.

    This will add the given component to this Viewport and position it at (0, 0).

    (Don't add or remove any child components directly using the normal
    Component::addChildComponent() methods).

    @param newViewedComponent   the component to add to this viewport, or null to remove
                                the current component.
    @param deleteComponentWhenNoLongerNeeded    if true, the component will be deleted
                                automatically when the viewport is deleted or when a different
                                component is added. If false, the caller must manage the lifetime
                                of the component
    @see getViewedComponent
void setViewedComponent (Component* newViewedComponent,
                         bool deleteComponentWhenNoLongerNeeded = true);