Bordered and Rounded Buttons

General JUCE discussion
#1

Hi all,

I would like to add control over a TextButton's corner radius and border size.

What I though was make a class MyButton, derived from TextButton, and add two variables i.e. cornerRadius & borderSize.
Then through my LookAndFeel I could override the drawButtonBackground() to include these variables and draw accordingly.

Problem: How can I access the two variables of my class? The drawButtonBackground() only passes a Button*.

Can this be done through a LookAndFeel or should I just override the paintButton() and do the drawing directly there?

Any other thoughts?

Nik

#2

You can add these variables (cornerRadius && borderSize) and appropriate getters/setters in your custom LookAndFeel class.
Then you can store an instance of your custom LookAndFeel in your class and apply it for your class MyButton in constructor:

class MyButton: public TextButton

{
public:
    MyButton();

...
...

private:
    CustomLookAndFeel m_customLookAndFeel;
};

MyButton::MyButton()
{ 
    this->setLookAndFeel (&m_customLookAndFeel);
}

After that you can set your needed variables (e.g. cornerRadius) when you need:

void MyButton::setCornerRadius (int newCornerRadius)
{
    m_customLookAndFeel.setCornerRadius (newCornerRadius);
}

 

Cheers!

#3

Thank you Gammer,

Your example is working fine. But, being a newbe, I wonder...

wouldn't it be "more right" if the getters/setters where functions in my class, and I override the paintButton() to call my drawing functions of myLookAndFeel (as it is done in the TextButton class)?

That is, my class would be like so (same as your said), adding the get/set functions and overriding the paintButton().


class MyButton: public TextButton 
{ 
public: 
    MyButton(); 
    ... 
    void setConrerRadius(float radius);
    void setBorderSize(float bSize);
    float get... 
    float set...
    void paintButton(Graphics& g, bool isMouseOverButton, bool isButtonDown) override;

private: 
    CustomLookAndFeel m_customLookAndFeel; 
}; 

MyButton::MyButton() 
{ 
    this->setLookAndFeel (&m_customLookAndFeel); 
}

And the paintButton


void MyButton::paintButton (Graphics& g, bool isMouseOverButton, bool isButtonDown)
{
    m_customLookAndFeel.drawMyButton(g, *this, bool isMouseOverButton, bool isButtonDown); 
    // where through "this" I have access to the variables I need
}

// This would be the customLookAndFeel function declaration, so it has a "MyButton" pointer in its variables.
void drawMyButton (Graphics& g, MyButton& button, bool isMouseOverButton, bool isButtonDown);


Though, I understand that the setters then should also call the repaint() funtion?

Sorry if I miss any abvious answers!!

Nik

#4

If you want to have your own MyButton class which inherit Button, I think it's not so much difference, but for me it's more clear and convenient to perform these operations in LookAndFeel.

But also it makes a sense to create your button class only if you are going to use many buttons with different cornerSize & borderSize values.
If not, you can also just use standard Textbuttons and configure LookAndFeel with appropriate values as you need in your component's constructor.
 

#5

Thank you very much for your time Gammer and your suggestions.
I think I just need a bit more experimentation for now, following your example, to find my "natural" apprach about it.

Thanks again,

Nikolas

 

#6

You're welcome!


I'm glad if my answers gave any usefull information for you :)

#7

can you please help regarding this thread. i want to develop a button like this. i have used LookAndFeel class to customize the button but unable to set the border radius corner.