Implement stylesheet feature with CSS file for custom widgets

IMAN4K

Hi Everyone.
I'm developing custom widgets for my app. for example i've a RadioButton Class derived from QAbstractButton
and in subclass implementation (and painting) i use some properties {font-size, font-family, color, height, opacity,.... }
What i want is to fetch these property from a css file in my app (Styles.css).
Something like this :
Styles.css

#RadioButton {
    color:#009688;
    pen-width:2;
    opacity:0.54;
    font-size:13;
}

Is this possible with standard QWidget::setStyleSheet(const QString & styleSheet) function ?

Due to my custom widgets should i parse Styles.css on my own (or using qcssparser_p.h) and do as follow ?

style.h

namespace Style {
	class radiobutton {
		/* parse Styles.css  and get the properties here */
	};
        /* other widgets */
}

RadioButton.h

#include "style.h"
class RadioButton {
private:
	Style::radiobutton _st;
	/* use  properties value for example _st.opacity() */
};

So in your opinion what is the best solution ?

raven-worx

@IMAN4K
you get only the style features of the base class.
Why exactly did you create a custom RadioButton derived from QAbstractButton?
And what types of css properties do you want to support?

IMAN4K

Why exactly did you create a custom RadioButton derived from QAbstractButton?

Well. it's custom.
Because i don't want standard widget appearance and also implemented some animation

And what types of css properties do you want to support?

color, opacity , ... as i said

raven-worx

@IMAN4K said:

And what types of css properties do you want to support?

color, opacity , ... as i said

and the "..." is the interesting part i asked for...

QSS is capable of setting properties. So before starting to parse the stylesheet code i suggest you use simply QProperties.

See this post of mine for setting basic data types via QSS.

Ni.Sumi

@raven-worx

It's other question :) related to this.

for customized widgets , can't we use like this ?

setObjectname("SomeName");

and

#SomeName ::xxxx
{}

raven-worx

@Ni.Sumi

#SomeName ::xxxx

I don't know if the space between the id- and pseudo-element selector is intentional in your example? It should work without the space (if the widget with the object name supports the pseudo-element of course). With the space it wont work.

Qt docs say:

Sub-controls are always positioned with respect to another element - a reference element. This reference element could be the widget or another Sub-control.

Ni.Sumi

@raven-worx

yeah, the space is just by mistakenly. Sorry. It's clear.

IMAN4K

@raven-worx
I read that post but this is not working :(

class Sample : public QWidget {
	Q_OBJECT

	Q_PROPERTY(QColor color READ color WRITE setColor DESIGNABLE true);

public:
	Sample(QWidget *parent) : QWidget(parent) {
		QString qss = "Sample {color: rgb(47, 169, 226);}";
		setStyleSheet(qss);
	}

	QColor color() const { return _c; }
	void setColor(const QColor &c) {
		_c = c;
	}

private:
	QColor _c;

protected:
	void paintEvent(QPaintEvent *) {
		QPainter p(this);
		p.fillRect(rect(), color());
	}
};

raven-worx

@IMAN4K said:

I read that post but this is not working :(

first of all you didn't read the post carefully enough ;)

Sample { color: rgb(47, 169, 226); }

should be

Sample { qproperty-color: rgb(47, 169, 226); }

Using the color QSS-property is still possible, but then you need to retrieve it from the widget's palette:

widget->palette().color( QPalette::Text );

IMAN4K

@raven-worx
Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting
I think i should go for hard parsing stuff !
Could i use qcssparser_p.h for retrieving values ?

raven-worx

@IMAN4K said:

Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting

means?
Then create a property for each state/type.

IMAN4K

@raven-worx
First retrieving the values not working for above example :
If i use qdebug

qDebug() << this->palette().color(QPalette::Text).red() 
			<< this->palette().color(QPalette::Text).green() 
			<< this->palette().color(QPalette::Text).blue();

I get rbg -> 0 0 0 while i'm using rgb-> 47, 169, 226

Secound if we have two colors :
Q_PROPERTY(QColor color-on READ color-on WRITE setColor-on DESIGNABLE true);
Q_PROPERTY(QColor color-off READ color-off WRITE setColor-off DESIGNABLE true);
How get each color in class ?
is there a direct access to these properties like color-on() ?
or when we declare opacity property like :
Q_PROPERTY(float opacity-on READ opacity-on WRITE setOpacity-on DESIGNABLE true);
How access this propertty value ?

raven-worx

@IMAN4K
what do you mean how should you access these values?!
You specified a getter method in the property definition. You've already shown how to do in an example of yours before?!

IMAN4K

@raven-worx
Oh..
Sorry i think that was qt-bug (getter return invalid) but now it's work

For last question !
Could i use qcssparser_p.h for retrieving values for my purpose ? (i'm a lover of parsing :) )
Thanks.