QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008
Sisällys QStyle Style sheet
Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä QWindowsStyle, QWindowsXPStyle, QWindowsVistaStyle QMacStyle, QMotifStyle QPlastiqueStyle
PlastiqueStyle (KDE tyyli)
QMotif style (oletus unix-ympäristössä)
Windows style (oletus windows-ympäristössä)
WindowsXP style (vain Windows XP)
Tyylin asettaminen Ohjelmallisesti QApplication::setStyle(QStyle* style); [static] Komentoriviltä myapplication -style motif QApplication::setStyle(new QWindowsStyle);
Yleistä Tyylin vaihto toiseen mahdollista ohjelman ajon aikana Vain yksi tyyli kerrallaan käytössä Tyylejä voidaan periyttää
Tyylin toteutus pluginina MySovellus.exe MyStyle.dll
QStylePlugin Abstrakti kantaluokka tyylipluginille Mahdollistaa pluginin lataamisen dynaamisesti class MyStylePlugin : public QStylePlugin { public: QStringList keys() const; QStyle *create(const QString &key); };
QStylePlugin #include "mystyleplugin.h" QStringList MyStylePlugin::keys() const { return QStringList() << "MyStyle"; } QStyle *MyStylePlugin::create(const QString &key) { if (key.tolower() == "mystyle") { return new MyStyle; } return 0; } Q_EXPORT_PLUGIN2(pnp_mystyleplugin, MyStylePlugin)
Tyyli pluginin käyttöönotto Tyyli-plugini ladataan ja otetaan käyttöön factory-luokan avulla QStyleFactory Style factory etsii tyyli pluginia styles alihakemistosta C:\Program Files\MyApp\styles QApplication::setStyle(QStyleFactory::create("MyStyle"));
Tyylin periyttäminen class CustomStyle : public QWindowsStyle { Q_OBJECT public: CustomStyle() ~CustomStyle() {} void drawprimitive( PrimitiveElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget ) const; };
PrimitiveElement Kertoo piirrettävän widgetin tyypin (Esim checkbox tai painike) QStyle::PE_PanelButtonCommand QStyle::PE_IndicatorCheckBox
QStyleOption Sisältää QStylen piirrossa tarvitsemat parametrit Paletti Rect fontmetrics Layout direction QStyleOptionButton Teksti Ikoni
QPalette Sisältää väritarvot widgetin eri tiloille ColorGroup (disable, active, inactive, normal) ColorRole QPalette::Window (ikkunan taustaväri) QPalette::WindowText (tekstin väri) QPalette::Button (painikkeen taustaväri) QPalette::Highlight (valittu kenttä) Jne
Tyylin avulla piirtäminen void MyWidget::paintEvent(QPaintEvent * /* event */) { QPainter painter(this); QStyleOptionFocusRect option; option.initfrom(this); option.backgroundcolor = palette().color(qpalette::background); style()->drawprimitive(qstyle::pe_framefocusrect, &option, &painter, this); }
Esimerkki http://doc.trolltech.com/4.2/widgetsstyles.html
QStyle::Polish(QWidget* pwidget) Kutsutaan jokaiselle widgetille kerran ennen kuin se piirretään ensimmäistä kertaa ruudulle setbackgroundmode
QStyle::Polish(QPalette & palette) Tyyli voi muuttaa paletin arvoja ennen widgettien piirtoa Esim Tekstuurin / taustan asettaminen QBrush::QBrush ( const QImage & image ) QBrush::QBrush ( const QGradient & gradient )
Style sheets
Style sheets (qss) Vaihtoehtoinen mekanismi, jolla voidaan kustomoida widgettien ulkoasua vrt: CSS web-sivujen toteutuksessa QApplication::setStyleSheet(const QString & sheet);
Qss-tiedosto QPushButton { background-color: palegoldenrod; border-width: 2px; border-color: darkkhaki; border-style: solid; border-radius: 5; padding: 3px; min-width: 9ex; min-height: 2.5ex; } QComboBox, QLineEdit, QSpinBox, QTextEdit, QListView { background-color: cornsilk; selection-color: #0a214c; selection-background-color: #C19A6B; }
Style rules CSS syntaksi tietyin lisäyksin Valitsin { Ominaisuus: Arvo; } Alignment { top bottom left right center }
Selector types Universal selector * = matches to all widgets Type selector QPushButton = Matches instances of QPushButton Property selector QPushButton[flat = false ] = QPushButton that are not flat ID selector QPushButton#okButton = QPushbutton whose object name is okbutton
Dynamic properties *[mandatoryfield="true"] { background-color: yellow } QLineEdit *emailedit = new QLineEdit(this); emailedit->setproperty("mandatoryfield", true); QSpinBox *agespinbox = new QSpinBox(this); agespinbox->setproperty("mandatoryfield", true);
Box model
Esimerkki: QPushbutton
Esimerkki QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-color: beige; }
QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; } Esimerkki
Esimerkki QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; } QPushButton#evilButton:pressed { background-color: rgb(224, 0, 0); border-style: inset; }
Lähteet Throlltech http://trolltech.com/products/qt How to create style plugin http://doc.trolltech.com/4.4/plugins-howto.html QT Style sheets http://doc.trolltech.com/4.4/stylesheet.html CSS http://fi.wikipedia.org/wiki/css