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!

Stay tuned

Found this news interesting? We can send the next ones straight to your inbox (around twice a month). Or we can simply let you know when VGC 1.0 is released. No spam guaranteed. You can unsubscribe at any time.

Become a sponsor

Excited about VGC? Join the sponsorship program to help us make it happen!

Indeed, we made the choice to be funded by future users like yourself rather than business investors, to ensure that your interests always come first.

How does it work?

For only $1 per month (Bronze Sponsor), you get instant access to all exclusive news as well as all alpha and beta versions of VGC. This allows you to try out VGC right now, which is a unique opportunity to provide early feedback and shape the tools the way you want them to be. Welcome to the team!

For $3 per month (Silver Sponsor), you also get a perpetual license key for the upcoming VGC Illustration 1.0 and VGC Animation 1.0. Higher amounts (Gold Sponsor and above) also give you software upgrades for up to 10 years! It's basically like pre-ordering VGC at a discounted early bird price.

You can either pay in USD via Patreon, or in EUR via Tipeee. You can cancel your monthly payments at any time, and still keep your rewards, no questions asked: we trust you to contribute for a number of months which seems fair to you. Alternatively, you can also choose to make a one-time payment via Paypal rather than monthly contributions. Just click on the chosen button and follow the instructions. Thank you!