QT tyylit. Juha Järvensivu 2008

Transkriptio

1 QT tyylit Juha Järvensivu 2008

2 Sisällys QStyle Style sheet

3 Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä QWindowsStyle, QWindowsXPStyle, QWindowsVistaStyle QMacStyle, QMotifStyle QPlastiqueStyle

4 PlastiqueStyle (KDE tyyli)

5 QMotif style (oletus unix-ympäristössä)

6 Windows style (oletus windows-ympäristössä)

7 WindowsXP style (vain Windows XP)

8 Tyylin asettaminen Ohjelmallisesti QApplication::setStyle(QStyle* style); [static] Komentoriviltä myapplication -style motif QApplication::setStyle(new QWindowsStyle);

9 Yleistä Tyylin vaihto toiseen mahdollista ohjelman ajon aikana Vain yksi tyyli kerrallaan käytössä Tyylejä voidaan periyttää

10 Tyylin toteutus pluginina MySovellus.exe MyStyle.dll

11 QStylePlugin Abstrakti kantaluokka tyylipluginille Mahdollistaa pluginin lataamisen dynaamisesti class MyStylePlugin : public QStylePlugin { public: QStringList keys() const; QStyle *create(const QString &key); };

12 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)

13 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"));

14 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; };

15 PrimitiveElement Kertoo piirrettävän widgetin tyypin (Esim checkbox tai painike) QStyle::PE_PanelButtonCommand QStyle::PE_IndicatorCheckBox

16 QStyleOption Sisältää QStylen piirrossa tarvitsemat parametrit Paletti Rect fontmetrics Layout direction QStyleOptionButton Teksti Ikoni

17 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

18 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); }

19 Esimerkki

20 QStyle::Polish(QWidget* pwidget) Kutsutaan jokaiselle widgetille kerran ennen kuin se piirretään ensimmäistä kertaa ruudulle setbackgroundmode

21 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 )

22

23 Style sheets

24 Style sheets (qss) Vaihtoehtoinen mekanismi, jolla voidaan kustomoida widgettien ulkoasua vrt: CSS web-sivujen toteutuksessa QApplication::setStyleSheet(const QString & sheet);

25 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; }

26 Style rules CSS syntaksi tietyin lisäyksin Valitsin { Ominaisuus: Arvo; } Alignment { top bottom left right center }

27 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

28 Dynamic properties *[mandatoryfield="true"] { background-color: yellow } QLineEdit * edit = new QLineEdit(this); edit->setproperty("mandatoryfield", true); QSpinBox *agespinbox = new QSpinBox(this); agespinbox->setproperty("mandatoryfield", true);

29 Box model

30 Esimerkki: QPushbutton

31 Esimerkki QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-color: beige; }

32 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

33 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; }

34 Lähteet Throlltech How to create style plugin QT Style sheets CSS