Implement paintRowBackground and paintCell

Thursday 6 August 2020

We're going to build on our minimal implementation of that data model, and go ahead and actually write the code to draw the cells.

We've got two functions that we need to deal with here - paintRowBackground and paintCell.

1. In PlaylistComponent.cpp we can add this to the paintRowBackground function:

void PlaylistComponent::paintRowBackground(juce::Graphics& g,
    int rowNumber,
    int width,
    int height,
    bool rowIsSelected)
{
    if (rowIsSelected)
    {
        g.fillAll(juce::Colours::orange);
    }
    else
    {
        g.fillAll(juce::Colours::darkgrey);
    }
}

We have given it a variable g and we are changing the colour if a row is selected.

2. The next step, now we have drawn the background, is to draw the cell itself. Here is the function code:

void PlaylistComponent::paintCell(juce::Graphics& g,
    int rowNumber,
    int columnId,
    int width,
    int height,
    bool rowIsSelected)
{
    g.drawText (trackTitles[rowNumber],
        2,
        0,
        width - 4,
        height,
        juce::Justification::centredLeft,
        true);
}

Again we added a variable g in the function arguments.

3. When you compile and build you can see the track names in two columns. We'll get rid of the second column because we don't need it. So we can delete

tableComponent.getHeader().addColumn("Artist", 2, 400);

and we can also add a few more tracks too:

trackTitles.push_back("Track 3");
    trackTitles.push_back("Track 4");
    trackTitles.push_back("Track 5");
    trackTitles.push_back("Track 6");

When you build and compile you will see the track names appear in the box.