It’s a data browser component using a TreeView and a panel to display custom editor components.
Any data structure can also inherit ‘BrowsableData’, which (when defining a few virtual functions) can allow it to be viewed by the DataBrowser component. The data classes have a user defined function that will create an editor to display in the browser’s display; this can then access the members of the actual data object via functions in the editor base class; you can create these editors easily with the Jucer. [the one in the image was an example i just knocked up to test it worked].
The data subclasses (for each data element in your structure) can be colour coded, and they’re drawn in that theme automatically. You can even specify certain member objects to display at a glance in little fields on the item block (as shown in the screenshot).
It’s very easy to use, and once your data has properly inherited the BrowsableData class (and you’ve created your editor components), it can simply be passed to a DataBrowser.
If anyone’s interested in the development of this or wants to try it out, let me know. I’ll be posting the code for it soon.
The code files are pretty heavily documented. It’s still not finished, and a few features are not totally implemented yet. However, it works! When I get a chance I’ll also make a demo app implementing it so you can see exactly how to go about using it, but it should be fairly straightforward if you follow the docs [i’ll make a doxygen doc set for it too when it’s done].
Basically, you need to do the following:
inherit BrowsableData into any classes in your data structure that you wish to navigate in the browser.
create a BrowserEditor component for each different type of data being used in the browser.
define the ‘getSubData()’ function for each data type, which just involves adding pointers of contained BrowsableData objects to the provided array.
define the ‘createEditor()’ function for each data type to return an instance of the appropriate editor component.
set up the appearance of the tree item for each data type in their constructors; you can set the colours of the blocks and add fields to display [if you add browser field names using a StringArray, also be sure to override the getBrowserFieldText() function to return the appropriate text for the field to display].
you just add a DataBrowser component to your app’s component, and pass it the root of your BrowsableData structure, and it should display happily.
The buttons that appear at the top of the panel aren’t totally done yet; Apply and Cancel work, but the auto-apply doesn’t do anything currently. The idea is that you can edit the stuff on the editor, and click apply to store it (this happens when the editor closes anyway) or cancel to revert to its original state. the ‘auto’ button will rely on the editor’s implementation; when e.g. a TextEditor field is edited, in your editor’s change callback you would see if auto is enabled, and if so store the data once the change is recieved. This would cause the tree’s fields etc… to update right away. I think it may well be a useless feature and i’ll probably strip the button out, but it’s just there for now in case.
