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:
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:
- Download the Juce zip file from here: http://www.juce.com/download
- 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)
- 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.
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“.
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‘.
Create the GUI
Let’s setup our GUI now. Right-click Main.cpp in the source tree and select ‘Add New GUI Component…‘
You’ll see a file dialog where you can name your component. Let’s call this one GUI.
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.
Click to open the Main.cpp file and you’ll see the code comprising the app’s core.
Let’s replace that with a reference to our new GUI component, like so:
It should then look something like this:
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:
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.
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/
We’re done, the app is complete and you can give that binary file a go.
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).