FR: FlexBox two little modifications -> huge improvement

I am a huge FlexBox fan, and with these two little changes, it would be super easy to create complex layouts, but at the same time keeps things in the logical position (like in html), in a SINGLE nested array.

Allow FlexItems to embed another FlexBoxes per VALUE

now
FlexItem (FlexBox& flexBoxToControl)

then
FlexItem (FlexBox flexBoxToControl)
(FlexBox needs to be stored internally)

and

allow adding Items directly in the FlexBox constructor

FlexBox(Array<FlexItem> items)

than something like this would be possible

FlexBox( {
            item1,
            item2,
            item3,
            FlexBox({ item4
                    , item5)
                    })
          } );
1 Like

I’m all for these changes, but just to suggest a slightly alternative way that you may find useful (although admittedly requires a lot more code) - I find the Builder pattern is really useful for this sort of thing:

void resized()
{
    FlexBoxBuilder {*this}
        .withButton (m_button)
        .withSlider (m_slider)
        .withWhatever (m_whatever)
        .buildFlexBox()
        .performLayout (getLocalBounds());
}

I find it’s a great way to encapsulate the layout logic in separate (or nested) class so you can keep your component class nice and tidy.

1 Like

Cool idea, but also much higher level stuff.

I like single-responsibility principle, with no specialisations for buttons/sliders and certain elements, a pure layout class.

It would be cool if these very few suggested changes could find its way into juce. @reuk

1 Like

Back to my original proposal:

Than it would be also great if you also define all FlexBox-options via a method (like direction)

FlexBox( {
            item1,
            item2,
            item3,
            FlexBox({ item4
                    , item5)
                    }).withDirection(FlexBox::Direction::column)
          } );

Basically all my newer GUIs are flexboxes inside flexboxes inside flexboxes etc, which makes it super easy to create resizable GUIs.