Testing of the FlexBox class


#1

Hello guys !

This week, I have decided to do finally a proper testing of the FlexBox class. I’m a little familiar with the concept since I have already used it a few times in web development context, so I was expecting to be in known ground with the JUCE version. However, now I do remember that FlexBox isn’t always that straightforward to use even in CSS !

To do my tests, I run and play with the FlexBox section of the JUCE demo application. I have also created a very simple desktop app project, and I run it with the live build engine of the Projucer for extra speed.

Here are the few remarks I have for now :

  • In the FlexItem documentation, I have seen a typo with “corss” instead of “cross”
  • In the JUCE demo app, if I change the parameter “flex-basis” of one item, and then put the previous value again, the layout changes once, but doesn’t go back to its previous state at the last change (in Windows 8.1 64 bits, compiled with VS2015, last develop branch code). Maybe it’s because the TextEditor displays 100 instead of 0 or something like that as a default value ?

I’ll continue my tests and I’ll compile here my next remarks :wink:

Ivan


#2

Yeah, that just sounds like the demo’s not updating rather than it being a bug in the FlexBox class itself.


#3

Yes indeed !

Anyway, sounds like everything is working as expected from what I have seen finally. I did some tests to compare CSS FlexBox behaviour and juce::FlexBox and it’s fine.

The only thing which was kind of missing in my tests is the fact that most of CSS containers have their size depending on the contents of the container. So I coded something like that in JUCE as well and… Now I have a resizeable layout plug-in prototype ready for “responsive design” :joy:

I have panels containing a number of controls I have decided in the PluginEditor constructor with a size depending on their types (sliders, combobox) and number, and everything is always well organized thanks to the FlexBox object. I’ll post some compiled demos when I’m happy with the result and maybe some code :wink:

I have also finally updated VS2015 to VS2017 so I will be able to play with GridLayout as well :wink:


#4

I’m really having fun with this :joy:

Now, when the window size isn’t enough to display everything, a control appears to select the lines we want to make visible in the UI.

Screenshot-3

I have also improved a little the code so the whole stuff can be put in a user interface simply by heriting a class called “FlexBoxPanelsComponent”, adding a list of panels with a name and a ID, and a list of controls to associate to these IDs. Finally, I just call a function in the resized function of my main component, and everything is done !

I have still a few things to add there and then I will be able to use it in a plug-in to organize automatically its controls using FlexBox !