Get started with Juce and Introjucer

For those unfamiliar with it, Juce is an encompassing, open-source and cross-platform framework for the c++ programming language. It provides a wide array of general purpose tools as well as integral components for use with apps that rely heavily on graphic and sound.

Lots of people, including myself, find c++ a bit unwieldy, let alone c++ frameworks like Juce. Adding to that, tutorials for absolute beginners are a bit slim since emphasis is usually placed on learning the ins and outs of c++ first.

I’d like to go the opposite route and make some Juce tutorials that hopefully will help others (myself too) to better learn c++ while getting familiar with Juce awesomeness. 🙂

Going with that, here’s a simple “getting started” video:

The details

Juce comes with an IDE of its own called Introjucer. It lets you easily build GUIs using a basic set of Juce components. Utilizing GUI components takes just a bit of code and through the video above, I’ve covered a method of handling that which I’ve found intuitive. Let’s go through it in more detail.

To get Introjucer up and running:

  1. Download the Juce zip file from here: http://www.juce.com/download
  2. Unzip it somewhere on your computer that you’ll be comfortable with (I generally unzip to a folder such as /home/dev/juce/ or on Windows, c:\Dev\Juce)
  3. Open the extracted folder and launch the Introjucer application.

Now, we’re ready to create an app.

Create an app

With Introjucer open, let’s create a new GUI Application.

introjucer-gui-app

Select a name and target platform

In the built-in file browser, navigate to the folder where you want this app to be. Then give it a name and select the target platform(s) you wish to support with this. I’ve selected “Linux Makefile” for the platform here, you can choose all those you’ll need and even change them later if you like.

Give the project a name as well, I’ve named this one “GUIDemo“.
introjucer-project-setup

The Files tree

With the app created, you’ll see a source tree on the left. It’ll show a list of files belonging to the project. By default, there will be a couple of files we won’t need, so we’ll delete them.

Delete the MainComponent.cpp and MainComponent.h files, simply right-click their names in the Files tree and selecting ‘Delete‘.
introjucer-maincomponent-delete

Create the GUI

Let’s setup our GUI now. Right-click Main.cpp in the source tree and select ‘Add New GUI Component…
introjucer-add-new-gui-component

You’ll see a file dialog where you can name your component. Let’s call this one GUI.
introjucer-name-gui-component

With the GUI.cpp file opened, add and arrange the GUI components you wish to use. In this example, I’ve added just a TextEditor and TextButton component.
introjucer-gui-form-editor

Update Main.cpp

Click to open the Main.cpp file and you’ll see the code comprising the app’s core.

#include "MainComponent.h"

Let’s replace that with a reference to our new GUI component, like so:

#include "GUI.h"

It should then look something like this:
introjucer-include-gui-component

Let’s now add our GUI component to the window. Scroll down the Main.cpp code a bit to where you see the SetContentOwned function.

By default, it should read:

SetContentOwned (new MainContentComponent(), true);

Let’s replace that with our GUI component, like so:

SetContentOwned (new GUI(), true);

The result should look something like this:

introjucer-setcontentowned

That’s pretty much it for the editing, so let’s save all these changes by pressing Ctrl-Alt-S (should be CMD-Alt-S on Mac) or selecting Save All from the File menu. It’d be good to save the project as well, from the File menu.

Compiling our new app

Navigate to the /Builds/ folder within the project folder. Then click to open the folder for the platform you’ve chosen.

In my case, it’s: /JUCE-LINUX/projects/GUIDemo/Builds/Linux/

Open a terminal in this folder (CMD on Windows), then compile it using the compiler per your platform of choice. Or you can launch whatever IDE you’ve selected as the target platform.

In this example though, I’m using Make, on Linux, to keep things simple.

introjucer-make

The build process can take a while, especially since we’ve left a lot of things at default. We can later cut down the compile time and resulting file size by deselecting Juce modules to include, but we’ll keep it simple for now.

You’ll find the resulting executable binary file in the /build/ folder for your chosen platform.

In my case, that’s: /JUCE-LINUX/projects/GUIDemo/Builds/Linux/build/

That’s it!

We’re done, the app is complete and you can give that binary file a go.
introjucer-completed-app

It’s cross-platform so you should be able to freely copy the project folder over to another platform and open it using Introjucer there. It’s available for Mac, Windows and Linux.

I hope that helps. If I’ve missed anything or you have questions, feel free to comment below. 🙂

UPDATE: I’ve updated the formatting here to make the guide easier to follow. And here’s a followup article for event handling: https://ugotsta.wordpress.com/2015/06/24/juce-interaction-with-texteditorlistener-class/

Also, special thanks go to Matti for this article: http://www.tunnelvision.fi/juce-framework-the-introjucer-gui-editor/

I haven’t used Juce in years now and that article helped me to get back on track with Introjucer (previously known as Jucer when I last used it).

Advertisements
Get started with Juce and Introjucer

9 thoughts on “Get started with Juce and Introjucer

  1. Gerald Hinson says:

    Very helpful. Would love to see more Juce videos from you (as you mentioned you might do in this one). Cheers!

    1. Hi Gerald, I’m glad you found that helpful and thanks for commenting. 🙂

      Incidentally, I got sidetracked while trying to update some of my older Juce projects. Mainly, I had difficulty finding the best way to interact with the TreeView but I should have info on it soon. I actually took a hiatus from Juce as well, to compare it with Qt. I really like Qt, though Juce has certain indispensable classes and helpful stuff for audio.

      Needless to say though, I’ve got another Juce video lined up so that should be along shortly. Hope you’re having a fantastic day meanwhile!

  2. Gerald Hinson says:

    Cool, I’ll check it out. I’ve been doing OpenGL work and, like you, am now investigating x-platform GUI tools. I’d be interested to hear your thoughts on how Qt / Juce compare to one another (ie. why you might prefer either over the other). I was researching VSTGUI when I discovered Juce. Juce looks to have a bit more polish. I haven’t looked at Qt.

    1. I’ve still got to learn OpenGL myself, it’s on my list of things to learn. I can’t easily give a proper comparison with Qt right now, though Juce’s audio classes are kind of instrumental for VST work. It’s how I found out about Juce years ago.

      I have to admit that Qt is substantially easier to learn, at least for me, because of the wide array of examples and tutorials, one of the reasons I’m hoping to provide some Juce tutorials. Qt’s also got a full IDE with auto-completion, that’s tough to beat. But it costs substantially more than Juce.

      I’ll try and get a better comparison together as I get more familiar with each.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s