Juce Programming Tutorial
by haydxn
Juce Programming Tutorial
Table of Contents
Introduction...................................................................................................................................... 3
Chapter 1 - The Starting Point................................................................................5
Chapter 2 –Component Basics................................................................................ 7
What is a Component?..........................................................................................................7
How can I actually ‘do stuff’ with a Component?.....................................7
How do I add a Component?......................................................................................... 8
Chapter 3 – Listening for Messages............................................................ 14
What are these message classes?.........................................................................14
Where does the Listener go?......................................................................................15
What about the other message types?............................................................20
Chapter 4 – Painting and Decorating........................................................23
Where do I paint my Component?........................................................................23
What is a ‘Graphics’?............................................................................................................24
How big is my Component?..........................................................................................24
How do I actually draw something?....................................................................25
Why am I painting 'under' the widgets?.........................................................27
Why is everything black?.................................................................................................27
How can I draw text?..........................................................................................................30
Chapter 5 – Juce Strings..............................................................................................34
What is a String?......................................................................................................................34
Where can I use the String?........................................................................................35
What can I do to a String?............................................................................................38
How can I modify a String?..........................................................................................40
How can I combine Strings?........................................................................................41
How can I use a number as a String?...............................................................43
How can i use a String as a number?................................................................44
How do I know how long a String is?................................................................47
How can I clear a String?................................................................................................47
Chapter 6 – File handling (part 1)..................................................................49
What is a File?.............................................................................................................................49
How do I open a File?.........................................................................................................51
How do I read text from a File?...............................................................................54
How do I choose a file?....................................................................................................55
How do I save text to a file?.......................................................................................58
What else can I do with Files?...................................................................................60
1
Juce Programming Tutorial
by haydxn
Chapter 7 – Intermission............................................................................................61
How can I use the debugger as a console?................................................62
How can I make my own console?.......................................................................64
How can I make a class that's like another class?.............................. 64
How should I make my new Component?....................................................65
How can I use my new Component?................................................................. 69
How can I make my Component more useful?.......................................71
Answers to problems........................................................................................................73
Chapter 3..........................................................................................................................................73
Chapter 4..........................................................................................................................................73
Chapter 5..........................................................................................................................................73
Chapter 6..........................................................................................................................................74
Chapter 7..........................................................................................................................................75
2
Juce Programming Tutorial
by haydxn
Introduction
Most programming tutorials will start out by teaching you some
fundamental (and fundamentally boring) core code things. For
example, when you were learning C++, you probably did a whole
bunch of boring processes on integers, floats, strings, functions,
pointers, etc. You were able to see what you were doing by using
the ready defined ‘cout’ output stream, stuffing your results out
onto the console. Yes, the console. My own progression as a C++
programmer began in this way, and I remained at the console
output stage because every other kind of graphical output code
was way to frightening to contemplate. I considered getting into
Windows application development, but those darned Microsoft
classes and typedefs made me nearly wet my pants. Yes, I mean
that in a bad way.
Everyone wants to be able to get into programming something
that displays nicely on the screen with graphical elements, but it’s
always such a chore to get to that point that it’s easy to burn out
your enthusiasm. I’ll be honest – it happened to me. I stopped
programming for quite some time.
Then I discovered Juce. And again I nearly wet my pants. But this
time, I mean that in a good way; all of a sudden I was able to ‘do
stuff’ that looked nice and wasn’t scary! It took me a while to get
my head around it all though, but I can promise you that it’s a far
easier experience than any other libraries I’ve happened upon.
This tutorial is probably not very much like many other
programming tutorials. I say that because I’m going to teach you
things the other way round. We will start with the ‘fun stuff’,
because I feel it’s important to understand that first. This has two
benefits. Firstly, it’s quite exciting being able to build graphical
applications right from the start of your experience. More
importantly though, it gets you to a stage where you know how to
display the results of your ‘cogs and gears’ behind the scenes
experimentation.
3
Juce Programming Tutorial
by haydxn
Juce has many classes that you can use throughout your program.
Pretty much every base is covered (Strings, Arrays, Files, etc) and
you’ll find you can make do without any other libraries. If I started
by teaching you these though, you’d have to take a lot of stuff for
granted when I give you the basic tools to put your results on the
screen.
The aim of this tutorial then is to give you all the knowledge you
need to be able to start programming your applications using the
Juce classes. I won’t cover all of the classes here, as many are
very specialised. With luck, you should understand enough about
how Juce does things by the end that you can easily figure out
how to use these other classes by yourself, by reading the (very
detailed) documentation. I will write additional guides on how to
use certain Components though (for example, the ListBox, the
TreeView, etc…).
With all that said, I think it’s high time we began the tutorial!
4
Juce Programming Tutorial
by haydxn
Chapter 1 - The Starting Point
I’m not going to try to teach you how to build a whole Juce project
from scratch. That would baffle you almost immediately. What I’m
going to do is provide you with a set of ‘starting point’ files, and let
you use them as a sort of ‘sandbox’ for learning the Juce way.
These files are slightly modified versions of Jules’ original demo
app source files. They should be slightly easier to begin with.
I’m not going to attempt to explain how the ‘application’ code
works, either. By the time you’re in a position to worry about it,
you’ll surely know enough about Juce to figure it out for yourself.
In fact, I’ve only recently bothered to look in detail at what it does
and how it works. For the time being, you really can just take for
granted that it does the hard stuff for you!
Create a new project in your development environment. Make sure
that your paths (include, lib, etc) are all set correctly as indicated
by the Juce documentation. In this new project, add the three
StartingPoint tutorial files.
Provided you have Juce properly setup on your system (with the
correct paths and dependencies all set appropriately), the tutorial
files should compile without a problem. If you do have any
problems, it means that either your project has some incorrect
settings, or your environment does not have all the include/lib
paths set properly. This is the time to discover such things! If you
find yourself scratching your head, go to the forum and make
some enquiries. You may spot what the error is yourself.
5
Juce Programming Tutorial
by haydxn
When you get the program compiled, you’ll be massively
disappointed with the result. The application should look like this:
Now I shall begin to use some Juce terminology. This app is a
basic launch pad for your Juce programming, and it gives you a
single DialogWindow, which holds a single Component. What the
DialogWindow is should be quite obvious – that’s the ‘window’ bit
the application presents itself as. The Component is probably less
clear. Don’t worry though, we shall get on to that in the next
section – suffice to say that it’s probably the most important type
you’ll encounter!
6
Juce Programming Tutorial
by haydxn
Chapter 2 –Component Basics
A Juce application would be nothing without the splendid
'Component' class. If you want to display anything on the screen,
a Component is what you need. All of the Juce GUI elements are
subclassed from Component.
What is a Component?
A Component has the following crucial properties:
• It is a rectangular region that can be positioned and sized to your needs.
• It can be painted on, with text, images and vector based graphics.
• It can respond to mouse activity.
• It can hold other components in a specified layout.
A plain Component is just a clear rectangle with built in abilities as
described above. You can set the size (width and height) and
position (x,y) of the rectangle, and you can control its appearance
by drawing directly onto it. It has ‘callback’ functions which are
called when mouse activity happens over it. It can also be filled
with any number of ‘child’ Components. The Component system is
very sophisticated indeed!
How can I actually ‘do stuff’ with a Component?
We know that it can respond to mouse activity, and it can display
any old thing we choose. To actually do this stuff though, we need
to know a heck of a lot of Juce first, which currently (we shall
assume) we do not. Thankfully, Juce comes with a big pile of
ready-made Components which we can use to build up our
application.
So far, we’re aware that our tutorial application has a
DialogWindow with a single Component for our content. In our
code, this content Component is a custom class called
7
Juce Programming Tutorial
by haydxn
MainComponent, defined in MainComponent.h. Open this file and
have a look at the code.
You’ll notice that not a lot is done with it. This explains why the
application is so boring! We only have a constructor and a
destructor. You’ll also spot the important bit – the class ‘is’ a
Component, thanks to the inheritance declaration after the class
name.
class MainComponent : public Component
This, as you should be aware from your masterful C++
knowledge, means that the class MainComponent has all the same
members and behaviour as the Juce Component class. Thanks to
the object oriented nature of C++, we don’t need to redefine the
Component behaviour when we want to make our own version.
As we know from running the app, it’s just an empty Component.
As we also know, it’s already aware of mouse activity. The
important thing, though, is that – because it’s a Component – we
can add other Components to it, which is what we shall do next.
How do I add a Component?
We’re going to use three ready made Component types here.
These are the TextButton, the Slider, and the Label. It might be a
good idea to consult the Juce documentation to get an idea of
what these Components are. Basically, the TextButton is a nice
general-purpose ‘button’. The Slider is just what you’d imagine (an
adjustable slider for setting numerical values). The Label is a
Component that displays text.
What do we need to know to be able to add these? Well, let's
make some logical observations.
Firstly, if you’re to have a Component on your Component, you’re
going to want to be able to 'use it' for stuff, so you'll to have
8