Implementing a User Interface Layout API

December 31, 2020

Welcome to the last news of the year!

The past two weeks, I have worked on what is called a "user interface layout API". This means how to specify the position and size of all the user interface elements that appear on screen. A "user interface element" is often called a "widget" in user interface terminology: a widget can be for example a button, a checkbox, a menu, or any group/container containing such elements.

These are the building blocks of the user interface (UI), and normally, most UI developers use an existing library to create these widgets, and positioning them in the UI. For example, in HTML/CSS, you would create a hierarchy of <div> elements, and set properties such as width, height, padding, margin, etc. In order to have a row of side-by-side elements, you can either choose to make elements inline, or use the float property, or create a table, or more recently use display: flex. In Qt, you create a hierarchy of QWidget objects, and each of these widgets can have a QLayout attached, which determines the position and size of the child widgets, for example you can use QHBoxLayout to have a row of side-by-side widgets, or QGridLayout to have a grid/table of widgets.

In the case of VGC, I will not be using any existing library for performing this task, but rather directly implement such a system, tailor-made to suit the needs of VGC. In order to make informed decisions, I have studied existing layout API and algorithms. For example, I have looked at how it works in HTML/CSS, notably the new Flexbox layout. I have obviously also looked at Qt, which is the library I am most familiar with. And finally, I have looked at modern mobile-oriented UI libraries/frameworks, such as Google's Flutter. This allowed me to understand the pros and cons of each system, and design an API that should work well for VGC.

This API is still in early development and will change in the coming months, but a very minimal implementation is already done. We can now create a hierarchy of vgc::ui::Widget objects, and the child widgets are automatically positioned and resized based on the size of the parent widget, and the "preferred size" and "size policy" of each of the children. The "size policy" specifies how much the widget likes to shrink or stretch, using a "stretch factor" and "shrink factor" similar to CSS Flexbox. The mouse events (for example, a mouse click) are properly propagated to the widget under the mouse.

The next steps consist in actually implementing some widgets (button, label, checkbox, etc.) and how they look (style properties such as background color, text color, font size, border, border radius, etc.). Only then it will be possible to actually add new features to VGC :-) In other words, it will still take a few more months before you see any new testable feature in the VGC alpha versions.

In the meantime, I wish you to have a wonderful last day of the year, and celebrate as much as safely possible.

Thanks again for your patience, and see you in 2021!