QT tyylit. Juha Järvensivu 2008

Koko: px
Aloita esitys sivulta:

Download "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

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

Qt perusteet. Juha-Matti Vanhatupa. (vanhan kurssin Graafisen käyttöliittymän ohjelmointi materiaalia)

Qt perusteet. Juha-Matti Vanhatupa. (vanhan kurssin Graafisen käyttöliittymän ohjelmointi materiaalia) Qt perusteet Juha-Matti Vanhatupa (vanhan kurssin Graafisen käyttöliittymän ohjelmointi materiaalia) Sisältö Käännösprosessi MetaObjectSystem Hyödyt Qt:n moduulit Qt käyttöliittymän muistinhallinta Debug-tulosteet

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

QT framework. Juha Järvensivu 2007

QT framework. Juha Järvensivu 2007 QT framework Juha Järvensivu juha.jarvensivu@tut.fi 2007 QT Framework QT Class Library QT Designer QT Assistant QT Linguist http://trolltech.com QT Class Library C++ API >400 luokkaa Kattava widget kirjasto

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

Digitaalisen median tekniikat. Luento 3: CSS Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

Tiedostonkäsittely ja asetusten tallentaminen. Graafisen käyttöliittymän ohjelmointi Luento 14

Tiedostonkäsittely ja asetusten tallentaminen. Graafisen käyttöliittymän ohjelmointi Luento 14 Tiedostonkäsittely ja asetusten tallentaminen Graafisen käyttöliittymän ohjelmointi Luento 14 Sisällys Asetusten tallentaminen (QSettings) Windowsin rekisteri Ini-tiedostot Tietovirrat ja tiedostonkäsittely

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8. Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.

Lisätiedot

Graafisen käyttöliittymän ohjelmointi

Graafisen käyttöliittymän ohjelmointi TIE-11300 Tietotekniikan vaihtuva-alainen kurssi Graafisen käyttöliittymän ohjelmointi Luento 4 Valikot ja dialogit Juha-Matti Vanhatupa Sisältö Pääikkuna Valikot Dialogit Pääikkuna (top-level window)

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Dialogit. Juha Järvensivu 2008

Dialogit. Juha Järvensivu 2008 Dialogit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Yleistä 2 vaihtoehtoista toteutusmekanismia Layoutteihin perustuva dialogi Absoluuttisiin koordinaatteihin perustuva dialogi Haasteita 1. Dialogin selkeä

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Graafisen käyttöliittymän ohjelmointi Syksy 2013

Graafisen käyttöliittymän ohjelmointi Syksy 2013 TIE-11300 Tietotekniikan vaihtuva-alainen kurssi Graafisen käyttöliittymän ohjelmointi Syksy 2013 Luento 9 Qt model/view Juha-Matti Vanhatupa Sisältö Qt:n MV mallin osat Mallin ja näkymän välinen kommunikointi

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne