Juce Framework – The Introjucer GUI Editor

This post describes the workflow I discovered while exploring the Introjucer IDE. According to the Developers of Juce – Raw Material Software Ltd. – the purpose of the Introjucer is simplify the process of building across multiple platforms. You may see more information of the Juce from here.

Here is the workflow.

1. Create Juce Project using the Introjucer IDE

create-new-project-via-the-introjucer

2. Add a new GUI component (right click reveals the menu)

create-new-gui-component

3. Create your desired layout (you may add the gui components through the GUI Editor dialog or by clicking the right mouse)

create-new-layout

4. Save the Introjucer Project and open it in your favorite IDE. Next add the GUIComponents.h header file to the Main.cpp file. Next, locate the Class MainWindow and create a new instance of the MainComponent.cpp class.


 public:
        MainWindow()  : DocumentWindow ("MainWindow",
                                        Colours::lightgrey,
                                        DocumentWindow::allButtons)
        {

            // Create an instance of our main content component, and add it to our window...
            setContentOwned (new MainContentComponent(), true);

            // Create an instance of our GUIComponents content component, and add it to our window...
            setContentOwned(new GUIComponents(), true);

             // Centre the window on the screen
            centreWithSize (getWidth(), getHeight());

            // And show the windows!
            setVisible (true);
        }

Finally you need to compile your source to see the results. The example described in this post has only one GUI element. Not much one might think. However, I am amazed of the possibilities Juce framework provides for a design oriented programmer like me. Next, I am planning to implement some data events and midi functionality to the GUI elements.

Comments

  1. Greg Nuterwicz says:

    Hi, I’ve just started looking at JUCE, but I don’t think that what you’ve done here is the recommended method for adding components to your window. I believe what you want to do is to include “GUIComponents.h” in “MainComponent.h” and create an instance of GUIComponents which you then add to the MainContentComponent object using the addChildComponet method.

    • Matti Luhtala says:

      Hi Greg,

      Thank you for your comments. Do you have an example of the approach you proposed? Please share a link if you may. I can also create a new post based on your comments and reflect your thoughts on that.

      Btw – a I have been reading Getting Started with Juce book written by Martin Robinson. I feel it has helped me a lot getting grasp of Juce.

      – Matti

  2. Greg Nuterwicz says:

    Hi Matti,

    I’ve only been playing with JUCE for a few hours, but if you look at the documentation for setContentOwned it seems to say that when you call it on a second component (as in your example) the first component will be deleted. So in your example this would mean that the MainContentComponent would be deleted. There is a comment in MainComponent.h that reads: “This component lives inside our window, and this is where you should put all your controls and content.” So, I think that you do that with addChildComponet or addAndMakeVisible. If you are only adding a single slider, then it probably makes more sense to just add it directly to the MainContentComponent, rather than create a GUIComponent wrapper.

    I’m not sure if there are any layout classes, so I would be very interested to hear what you have gleaned from your book.

    – Greg

    • Greg Nuterwicz says:

      After doing a bit of searching, I’ve concluded that there are no layout classes (ala Qt) so to position the child component within the parent component you call some version of Component::setBounds. The RelativeRectangle version seems particularly useful for this(http://www.juce.com/api/classComponent.html#afff8d34ac49e7303e60cd6cfcd68e8f6).

      – Greg

      • Matti Luhtala says:

        Nice finding Greg! That seems to be a similar approach the authors in the book propose. In particular, they give an example where a setBounds is used for setting a child component within the parent window. They say…

        1. Add the component as a child of the parent component.
        2. Make the child component visible.
        3. Set the child component’s size and position within the parent component (using setBounds).

        When adding more GUI components setBoundsRelative becomes also valuable as it allows child components to be positioned proportionally rather than with absolute or offset values.

        – Matti

        • Greg Nuterwicz says:

          Hi Matti,

          That sounds like the typical widget paradigm, but the old-school programmer in me cringes a little at the order of the steps given. The logical order is 1,3,2 i.e. you should not make the component visible until after it has been positioned. Back in the day, reversing the order would cause onscreen flicker. Modern hardware, and rendering architectures mitigate this problem, but the logic still stands

          Anyway, since you mentioned your interest in midi programming, I came back to say that if you haven’t already you should take a look a Max/MSP (http://cycling74.com/products/max/). It is in my opinion one of the greatest music programs ever written, and it has deep Mac roots. In fact the reason that I decided to check out JUCE in the first place is that I found out that Max is now using JUCE. If you aren’t familiar with Max I’m sure you can find some youtube videos and of course you can try the demo offered on Cycling’s website. It really is an amazing program, and it’s the kind of tool that enables one to quickly try some crazy ideas that would take too much effort without it.

          – Greg

  3. Hi Matti,

    Thanks for this tutorial, it helped me to started back up with Introjucer (last I used it, it was called Jucer). I’ve since created a simple tutorial along with a video guide for the current version:
    https://ugotsta.wordpress.com/2015/06/10/get-started-with-juce-and-introjucer/

    @Greg, I love the concept of Max, I’ve long wanted to create something like PD (Pure Data, similar to Max) only using Juce. But I’ve recently been toiling away at something JavaScript based since JavaScript objects provide a very easy way to create modular components (at least I found it intuitive).

    Cheers!

    • Matti Luhtala says:

      Great to hear you found it useful David. Also, very cool that you have created a new video tutorial about Jucer workflows. Keep up Jucing!

Speak Your Mind

*

  • RSS
  • LinkedIn
  • Twitter
  • GitHub
  • Academia.edu
  • ResearchGate