In this topic, we will study the JUCE project structure and walk through the complete cycle of adding new components to the project.

Download starter code downloaded from Coursera (Link).

Implement a Button::Listener in JUCE

First, we will continue implementing the play button from the starter code.

In the MainComponent.h file, inherit a parent class Button::Listener and add a button.

class MainComponent   : public AudioAppComponent, 
												public Button::Listener
{
public:
    // ...
    void buttonClicked (Button *) override;
    
...
};

In the MainComponent.cpp file, implement the buttonClicked function at the end of the file, and add a listener in the constructor.

MainComponent::MainComponent()
{
    ...

    addAndMakeVisible(playButton);
    addAndMakeVisible(volSlider);
    
    playButton.addListener(this);
}

...

void MainComponent::buttonClicked(Button * button) {
    std::cout << "Button clicked" << std::endl;
}

Compile and run the program to check the terminal prints “Button clicked” when you press the button.

Next, we add a new stop button in the MainComponent.h file.

class MainComponent   : public AudioAppComponent, public Button::Listener
{

...

private:
    TextButton playButton{"PLAY"};
    TextButton stopButton{"STOP"};
    ...
};

Add a new UI widget and the listener in the MainComponent.cpp file.

MainComponent::MainComponent()
{
    ...
    addAndMakeVisible(playButton);
    addAndMakeVisible(stopButton);  
    
    addAndMakeVisible(volSlider);
    
    playButton.addListener(this);
    stopButton.addListener(this);  
}

...

void MainComponent::resized()
{
    double rowH = getHeight() / 5; 
    playButton.setBounds(0, 0, getWidth(), rowH);
    stopButton.setBounds(0, rowH, getWidth(), rowH);  
    
    volSlider.setBounds(0, rowH * 2, getWidth(), rowH);

}

...

void MainComponent::buttonClicked(Button * button) {
    std::cout << "Button clicked" << std::endl;
}