I’m a big fan of JUCE. I’ve been using it for a quite a while on some projects in development, and I really think it gets a lot of things right.
However, the one nagging disappointment I’ve had is in regards to user interface layout. I wish JUCE had a higher-level mechanism that didn’t involve pixel coordinates, rectangle offsets, etc. Some of the functions JUCE has for rectangle slicing are useful, but once you’re positioning things relative to pixels, everything is very fragile. Making room for a new component in the middle of a user interface is going to be a major pain. Or resizing several components to align in a specific way. I just wanted something at a higher-level.
So…I made my own. I’ve created a layout system based on JSON - I can describe at a very high level the layout of components, as well as their resizing behavior. These JSON interface layouts can be designed independently of the application they will be used in. I have a GUI testing app that just previews my layout system.
When it’s time to actually use a layout in an application, you simply create a JUCE window, add in a layout component, and tell it to load itself from a JSON file. The application doesn’t need to know what’s contained in the layout. Of course, it needs to be able to respond to events, but these events are at a high level - the application doesn’t need to know if it’s a button event or a slider event, etc.
In fact, besides laying out the user interface, this system acts as sort of a key/value repository. The application can ask what’s the value of “amplitude”, and whether amplitude is controlled with a slider, a text field, or a combo box, the application doesn’t care - it just gets a value back. Similarly, it can set the value of “amplitude”, and the appropriate control will get updated.
The JSON format right now has support for most of the standard JUCE components, plus some new ones I’ve created. And if an application has its own custom components that it wants to support in a layout, it can register a factory method that will parse components that are unknown to the basic system (a drawing canvas, a waveform view, etc.).
Finally, these JSON files can be loaded as regular files, or from JUCE resources (or any string, really). What I’m doing is loading them from files in Debug builds (so that I can tweak them live), and as resources in Release builds. But you could load from files in a release build too if you wanted to allow users to tweak the interface of your application.
Sound good? I’m very pleased with it - it’s going to save me tons of time, and let me focus on the interesting parts of my application.
Basic Intro
Here’s a basic introduction to my system. Not a tutorial really, but it does walk through the process of setting up a basic user interface. (Switch over to a regular YouTube page if you want to see the JSON text I’m typing in.)
Complex Layouts
And here’s an example of a more complex, actual application running with my layout system.
And I guess that’s the basic idea of what I’ve been working on. Thoughts?
-Mike