March 17, 2015

HBox: C++ Box Layouter

HBox Demo Screenshot

Some GUI libraries come with their own layout facilities. Other libraries require the user to take care of all GUI layout functions: positioning and sizing elements, responding to size change, enforcing minimum/maximum constraints, hit-testing... etc. Whether it's for an existing GUI library, or as a back component of your own library, HBox aims to take care of all your layout needs.

HBox is a small C++ library with a simple API. The API is composed of a single HBox class, which represents a box. Naturally the boxes are hierarchically related. Each box will layout its children when changes are made to its size and other properties. The final layout depends on the "solver" of the parent, as well as the properties of the children.

Each box can have margins and padding, similar to the CSS box model. HBox however does not attempt to recreate the same behavior and rules of CSS, so it is only conceptually similar to the CSS box model, and HBox attributes do not necessarily mean the same as their CSS counterparts. Also, HBox currently has no support for thick borders or other border properties.

HBox Demo Screenshot 2

HBox aims to be versatile and simple at the same time. Complex layouts can be accomplished by using additional boxes that don't correspond directly to GUI elements. Using such boxes with the right "solver" types allows this versatility to create all sorts of layouts. More about that later.

HBox supports 3 types of property/distance units: absolute (pixels if you'd like), percentage, and flex units. Flex units are like springs, with minimum and maximum constraints. Again, more on that later.

The library is not tied to a particular GUI library or platform. It can be used with existing GUI libraries (like the win32 GUI library, as will be demonstrated in an example later), for laying out the components of custom controls, for the GUI inside your game... etc. It will come with an editor that enables the developer to prepare layouts and save them to disk and then simply load the file in his/her application.

HBox is still work in progress. If you have any questions, ideas, or suggestions, please leave a message below, or send me an email. I love feedback. Go ahead, download and play with the early incomplete just-for-demonstration-and-testing demo.

Download Demo