Add GUI editor component in existing project


Bit of a noob question here - I've started work on an app with a MainComponent and custom component that is the main focus of the app. 

I'd like to start using the GUI editor to start adding GUI components alongside the custom component I've been developing,  mainly to allow the user to edit input data. Is it a good a idea to add a new component via the GUI editor in Introjucer so I can visually arrange everything,  kind of like a parent component? Any tips on organising things this way? 

I've been following the Getting Started with JUCE book but need a bit of help with this aspect.



Hi adamski,

basically the GUI editor is a handy way of generating your code from a visualisation of your interface. It is quite flexible in adding custom components, as long as they are derived from the Juce Component class (and even if the're not, but why would you want to?).  So you can use the GUI editor to layout your screen including your custom component, and test it in the editor (which renders the custom component as a box)

Couple of things to watch out for:

  • Add all your own code in the spaces provided in the generated code, or you will lose it when you regenerate
  • For a custom component, make sure you include the header in the includes section, and fill in the constructor parameters if needed.
  • Don't forget to choose relative sizing mode for your GUI elements if you want them to resize with the main window.

As far as organisation is concerned, the editor will produce a parent component with child components which are your controls. If you want your custom component to be the parent you need to follow a slightly different route. Generate your custom component from the editor with all the controls that you need, the add to the code the bits that make it custom. Essentially the GUI editor creates a new component that inherits from Component, plugs in the code to display and navigate child components, and after that you can do what you like to the code.