Using a row/column approach to building interfaces

[Karsten Pedersen]

Hello all,

(This was originally mis-posted as an "issue" on the FLTK GitHub page. I was suggested to forward it here. I have also made a number of updates).

I notice that FLTK doesn't really focus on using rows and columns to lay out interfaces (i.e similar to CSS3/Flexbox module, Gtk, wxWidgets, Qt, etc). And yet this functionality would be very simple to implement as a Fl_Row, Fl_Col classes extending Fl_Group. I have put together an initial prototype (some minor testing on Win32, OpenBSD and with some of the different "themes").

https://github.com/osen/FL_Flex

This project provides Fl_Flex (the layout class) and two demos. One is attempting to create a real world login screen (which can be fairly fiddly) and the other is an artificial demonstration of some random grid based layouts.

Normally I would simply stick to the "native" way suggested by the toolkit (in this case FLUID, etc). However one big benefit to the row / column approach is that it seems to be the lowest common denominator for most toolkits (when it comes to a resizing strategy) giving us a good way of porting to and from the different UI systems with minimal change of design.

Let me know what you think. If you like the idea but don't have any time for maintenance or further integration of it, I am happy to invest some time on it since I will be using FLTK for a few internal projects for the next few months at the very least.

Karsten

[Albrecht Schlosser]

On 10/4/20 4:10 PM Karsten Pedersen wrote:

> I notice that FLTK doesn't really focus on using rows and columns to lay
> out interfaces (i.e similar to CSS3/Flexbox module, Gtk, wxWidgets, Qt,
> etc). And yet this functionality would be very simple to implement as a
> Fl_Row, Fl_Col classes extending Fl_Group. I have put together an
> initial prototype (some minor testing on Win32, OpenBSD and with some of
> the different "themes").
>
> https://github.com/osen/FL_Flex

Hi Karsten,

thanks for your contribution.

This post is not meant as a final reply to your suggestion (didn't
view/test/evaluate it yet), but a first question: did you already
consider using Fl_Pack which provides both a horizontal (row) and
vertical (column) mode?

[Karsten Pedersen]

Hi Albrecht,

Thanks for your suggestion. I have had a read and play with a number of different ways that interfaces are built with FLTK and the Fl_Pack in particular does come really close. However it seems to be a little limited in terms of allowing the user to state which multiple elements should expand. I.e I am not yet convinced that it would be able to provide some of the layouts provided by my quick demo (screenshot on the github link). Or at least, I haven't been able to.

That said, some of it could be my relatively recent knowledge of FLTK (so certainly if you guys agree that all the existing solutions can provide any layout required, I am inclined to believe you!)

I think another that came really close was using multiple Fl_Groups such as in the very last diagram on this page: https://www.fltk.org/doc-1.4/resize.html. However, there are still a few areas where this alone cannot quite suffice (i.e centering a single element in the middle). I have seen suggestions of inheriting from and overriding the resize() function of Fl_Group which is effectively how Fl_Flex was born; initially I just wanted to center something.

I also note that having to mix and match a number of different layout systems to achieve the desired result may end up being more complex than something like Fl_Flex.

Now, I understand that not everyone likes laying out UI in rows and columns (kinda like misusing classic tables in HTML!), but it is also consistent with a number of other GUI systems which might also be a benefit here for porting between systems. At the moment there is no "minimum child size" machinery but if that is added, this approach is also generally pretty effective for avoiding resize issues such as overlapping elements if the window size is reduced.

Many thanks,

Karsten

[lifeatt...@gmail.com]

> This project provides Fl_Flex (the layout class) and two demos.

Thanks for posting this Karsten - I look forward to giving it a try!!!

Kevin