Label Button

General JUCE discussion
1

I almost vaguely feel like I’ve done this before, but can’t seem to recall if I actually did or how… Anyway, is there a way to make a label a clickable button? I’d like to be able to add a listener to a label and recognize when it is being clicked on and trigger an action when that happens, any suggestions? Can’t seem to find anything in the label listener class…

Thanks.

2

Edit: I think I recall, it would be a mouse listener I need to attach, not a label listener.

3

Do you need the editable property of the Label? Otherwise the TextButton might be an option.

Remember, clicking on the item is already triggering something, the Label would bring up the Editor, while on TextButton it is an UI element to encourage the user to click on…

4

No, I don’t need to be able to edit this label at all. The action that I want the label to trigger was originally triggered by a TextButton, it brought up a window that contained information about the app, but I’m trying to reduce clutter on the GUI and figured I could make the main app label (The label that has the app name at the top) be clickable. I figured I needed to add a mouseListener to it and then use the callback method mouseUp() to catch the click. I can make it more obvious that it is a button by using mouseEnter() and mouseExit() to change the color of the text on the label. So, I think I have it all figured out. Thanks you.

5

I’d have thought it’d be easier to take a button and paint it to look like a label than to make a label behave like a button…

6

It really wasn’t that bad, but maybe doing it your way would be easier. I just changed the color of the text when hovering over it to make it obvious it is a button:

In the constructor:

myLabel->addMouseListener (this, false);

then:

void MainComponent::mouseEnter (const MouseEvent& e)
{
    if (e.eventComponent->getName() == myLabel->getName())
    {
        // Change text color to white
        myLabel->setColour(Label::textColourId, Colours::white);
    }
}

void MainComponent::mouseExit (const MouseEvent& e)
{
    if (e.eventComponent->getName() == myLabel->getName())
    {
        // Change text color to original gray used
        myLabel->setColour(Label::textColourId, normalLabel->findColour(normalLabel->textColourId));
    }
}

void MainComponent::mouseUp (const MouseEvent& e)
{
    if (e.eventComponent->getName() == myLabel->getName())
        whateverActionYouWant();
}
7

That’s not very OO… Why not simply derive a class from Label and override the mouse methods?

Rail

8

The reason I suggested using a button is that your code won’t handle edge-cases like releasing the button when the mouse isn’t over it, or highlighting when the mouse moves in and out while dragging, etc. Doing a Button isn’t as easy as it sounds, whereas replacing a button’s paint method with one that just draws some text is very easy.

9

I could’ve made my own ButtonLabel class, I guess I didn’t because: A) I only needed one label to act this way, so I didn’t need to utilize the code multiple times… and B) Didn’t really consider it.

10

Hmmm, yeah I see what you’re saying. I’m gonna dig into your suggestion more now that I understand why you suggested it. Although, I’m not that great with painting in JUCE and probably wouldn’t be able to successfully repaint a button to look like a label.

11

Have a look at the lookAndFeel classes (“Use the source, Luke” :wink: )
This is what the TextButton is calling:

So you can inherit from the LookAndFeel you are currently using and override the drawButtonBackground and drawButtonText methods. You can even just create a minimal LookAndFeel class just for this one Button…

To copy-cat from drawLabel look below, it didn’t change since LookAndFeel_V2:

Hope that helps…

2 Likes