LookAndFeel app skinning tutorial


#1

how use LookAndFeel? documentation scant.


#2

sorry, my question wasn’t clear.

How do you use the LookAndFeel class?

I want all fonts in my app to be Arial.

In my content component constructor I have this:

LookAndFeel customLook; customLook.setDefaultSansSerifTypefaceName("Arial"); LookAndFeel::setDefaultLookAndFeel(&customLook);

But this is crashing with access violation here.

void ResizableWindow::paint (Graphics& g) { getLookAndFeel().fillResizableWindowBackground (g, getWidth(), getHeight(), getBorderThickness(), *this);


#3

Sorry, my silly mistake.
(customLook needs to be member variable.)

Now it works great.
How do you change the purple glossy style that appears on several components? And what else can you change about this glossy style? For example, if i wish the glossy highlight to appear dimmer or if I want the button corner radius to be smaller?


#4

Your customLook instance is getting deleted when it goes out of scope, try making it a member variable or even easier just set the font of the default or current LookAndFeel:

LookAndFeel::getDefaultLookAndFeel().setDefaultSansSerifTypefaceName(“Arial”);

or

getLookAndFeel.setDefaultSansSerifTypefaceName(“Arial”);


#5

Ah, that’s great. Thanks dave.
Still I’m curious about making changes to the Juce chrome. I guess I will start by investigating color ID stuff.

Is there a table somewhere of all the various component visual properties that can be edited? Such as border width, border color, background color, text color, selected item highlight color, checkmark color, etc.?

I like the Juce default style, it’s consistent and fast. But with some small aesthetic tweaks I think it could be lots more beautiful.


#6

All the components are drawn using a LookAndFeel class. You can create your own subclass of that and override the methods that you want custom drawing for.

For example if you only want custom Buttons you can override drawButtonBackground(). I normally start by copying the default Juce LookAndFeel method and customise it from there.

You then obviously have to instantiate your custom look and feel and apply it with LookAndFeel::setDefaultLookAndFeel() or Component::setLookAndFeel().

If you just want to change the colours you can do this with LookAndFeel::setColour (TextButton::buttonColourId, Colours::red); for example, or use setColour() on an individual component.

There’s a pretty complete example using the OldSchoolLookAndFeel in the Juce demo, if you need more details.

Hope that helps.


#7

Thanks Dave, that helps a lot.