Plugin-Styling Qt Using Style Sheets 484
Click here to load reader
-
Upload
anjana-sharma -
Category
Documents
-
view
453 -
download
0
Transcript of Plugin-Styling Qt Using Style Sheets 484
![Page 1: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/1.jpg)
© Trolltech 2007
Styling Qt Using Style Sheets
![Page 2: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/2.jpg)
2 © Trolltech 2007
About me
Me• Girish Ramakrishnan• Software Developer + Release manager
Qt Development• Qt Style Sheet architect• MinGW platform boss• Auto completion framework• Desktop integration• Part of widget team (message box, label)
FOSS• KDocker (kdocker.sourceforge.net)• GUC (guc.mozdev.org)
![Page 3: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/3.jpg)
3 © Trolltech 2007
History
QStyle• Excellent flexible API. Used by Qt itself• “Compile, test, compile test” cycle• QStyle completely shuts off graphics designers
![Page 4: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/4.jpg)
4 © Trolltech 2007
Introducing Qt Style Sheets
Simple customization like setting colors and backgrounds
Style Guarantees Complete customization of widget look Introduced in Qt 4.2 for form widgets
![Page 5: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/5.jpg)
5 © Trolltech 2007
What are Style Sheets?
“Style strings” • Similar to CSS in concept and syntax• Adapted to the world of widgets
Interactive UI development• Designer friendly. Compile free
![Page 6: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/6.jpg)
6 © Trolltech 2007
Style Sheet Syntax
A Style Rule
QPushButton { color: red; }
QPushButton – Selector{ color: red } - Declarationcolor – attribute/property
![Page 7: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/7.jpg)
7 © Trolltech 2007
Style Sheet Syntax
A Style Sheet is a set of rules
QPushButton, QCheckBox { background-color: magenta; }
QRadioButton, QCheckBox { spacing: 8px; color: gray; }
![Page 8: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/8.jpg)
8 © Trolltech 2007
Selectors
Selectors decide whether a rule applies• Type QPushButton { color: red }• Class .QCheckBox { background-color: pink; }• ID #foodMenuView { alternating-color: gray; }• Descendant QDialog QRadioButton { spacing:
10px; }• Attribute QLabel[text=”falafel”]
{ font-size: 14pt; }
Whole range of CSS2.1 selectors supported
![Page 9: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/9.jpg)
9 © Trolltech 2007
Pseudo States
User interface statesQPushButton:hover { color: red }QCheckBox:pressed:checked { color: pink }
• :checked , :disabled , :enabled, :focus, :hover , :indeterminate , :off :on , :pressed, :unchecked (around 36)
• Use “!” for negation QPushButton:!hover { color: white; }
![Page 10: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/10.jpg)
10 © Trolltech 2007
The Box Model
![Page 11: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/11.jpg)
11 © Trolltech 2007
Qt Style Sheet Box Model Attributes
margin border
• border-width• border-style• border-color
padding min-width, min-height
• width and height refer to contents rect
width, height not supported
![Page 12: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/12.jpg)
12 © Trolltech 2007
Background properties
background• background-image• background-repeat• background-position• background-clip, background-origin• background-attachment
setting background does not scale!• Why?
![Page 13: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/13.jpg)
13 © Trolltech 2007
Scalable style sheet
Use gradients border-radius to provide rounded corners
![Page 14: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/14.jpg)
14 © Trolltech 2007
Border Image
Borrowed idea from CSS3 to make borders scalable Image cut into 9 parts
![Page 15: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/15.jpg)
15 © Trolltech 2007
Border Image
border-image: url(x.png) 3 3 3 3 tile stretch• border-image: url top right bottom left hstretch vstretch
![Page 16: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/16.jpg)
16 © Trolltech 2007
Border Image
border-image: url(x.png) 3 3 3 3 tile stretch• border-image: url top right bottom left hstretch vstretch
![Page 17: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/17.jpg)
17 © Trolltech 2007
Border Image
border-image: url(x.png) 3 3 3 3 tile stretch• border-image: url top right bottom left hstretch vstretch
![Page 18: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/18.jpg)
18 © Trolltech 2007
Border Image
border-image: url(btn.png) 5 5 5 5 stretch stretch;
![Page 19: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/19.jpg)
19 © Trolltech 2007
Border Image
border-image: url(btn.png) 5 5 5 5 stretch stretch;
![Page 20: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/20.jpg)
20 © Trolltech 2007
Border Image
border-image: url(btn.png) 5 5 5 5 stretch stretch;
![Page 21: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/21.jpg)
21 © Trolltech 2007
Rendering Model
So what happens if you set the background, border and border-radius?
![Page 22: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/22.jpg)
22 © Trolltech 2007
Rendering Model
Set clip for entire rendering operation • border-radius
Draw the background • First fill with background-color• Then draw the background-image
Draw the border• Draw the border-image or the border
Draw overlay image • image
![Page 23: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/23.jpg)
23 © Trolltech 2007
Setting the style sheet
QWidget::setStyleSheet() QApplication::setStyleSheet()
What happens when rules conflict?
![Page 24: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/24.jpg)
24 © Trolltech 2007
Sub controls
Sub controls are “Parts” of complex widget• drop-down indicator of combo box• menu-indicator of push button• buttons of a spin box
Follow CSS3 Pseudo Element syntax but has little to do conceptually• QPushButton::menu-indicator { image:url(indicator.png) }
![Page 25: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/25.jpg)
25 © Trolltech 2007
Sub controls
Sub controls are styled the exact same way as normal elements• Box model• border-image property• image property• Pseudo states
QPushButton::menu-indicator:hover { border: 2px solid red; image: url(indicator_hover.png) }
![Page 26: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/26.jpg)
26 © Trolltech 2007
Sub controls (Geometry)
Size• width, height• width and height of the element's content
![Page 27: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/27.jpg)
27 © Trolltech 2007
Rendering Model
Sub controls are rendered hierarchically Rendering
• QComboBox { }• QComboBox::drop-down { }• QComboBox::down-arrow { }
Subcontrols always have a parent and are positioned w.r.t parent• The drop-down is positioned w.r.t QComboBox• The down-arrow is positioned w.r.t drop-down
![Page 28: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/28.jpg)
28 © Trolltech 2007
Sub control positioning
subcontrol-origin• The origin rect in the parent's box model
subcontrol-position• The alignment within the above rect
QPushButton::menu-indicator { subcontrol-origin: content; subcontrol-position: right center; image: url(menu.png);}
![Page 29: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/29.jpg)
29 © Trolltech 2007
Sub control positioning
![Page 30: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/30.jpg)
30 © Trolltech 2007
Positioning Modes
Fine tune position using position modes• Relative Positioning• Absolute Positioning
![Page 31: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/31.jpg)
31 © Trolltech 2007
Relative Positioning
Use top, left, right, bottom to move a sub control from its current position
QPushButton::menu-indicator { subcontrol-origin: content; subcontrol-position: right center; image: url(menu.png); position: relative; top: 5px; left: 4px;}
![Page 32: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/32.jpg)
32 © Trolltech 2007
Relative Positioning
![Page 33: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/33.jpg)
33 © Trolltech 2007
Absolute Positioning
Absolute Positioning• Use top, left, right, bottom to define absolute positions within
the origin rectangleQPushButton::menu-indicator {
subcontrol-origin: content;subcontrol-position: right center;image: url(menu.png);position: absolute;width: 20px;top: 5px; right: 2px; bottom: 5px;
}
![Page 34: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/34.jpg)
34 © Trolltech 2007
Absolute Positioning
![Page 35: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/35.jpg)
35 © Trolltech 2007
Advanced features
You can set any Q_PROPERTY using style sheets• QlistView { qproperty-alternatingRowColors: true; }
Dynamic properties can be used in the selector• QObject::setProperty can be used to create
properties dynamically Can customize various style hints
"activate-on-singleclick", "button-layout", "gridline-color", "lineedit-password-character", "messagebox-text-interaction-flags", "opacity", "show-decoration-selected"
![Page 36: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/36.jpg)
36 © Trolltech 2007
Negative Margins
Used to make the element grow outward
![Page 37: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/37.jpg)
37 © Trolltech 2007
Qt 4.3's well kept secret
•Demo
![Page 38: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/38.jpg)
38 © Trolltech 2007
Future direction
Customizable icons and icon size • Already in 4.4 snapshots!
Make all widgets styleable• QDockWidget, QMdiSubWindow already in snapshots!
Support Mac Support for RTL Support custom QStyle subclasses QstyleItemDelegate
• Already in snapshots!
![Page 39: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/39.jpg)
39 © Trolltech 2007
Qt Style Sheets and KDE
Style Sheets work currently with built-int Qt styles• By following some guidelines, we make it work with any Qstyle• Making it work with KStyle imples that all KDE applications are
automagically customizable with style sheets
![Page 40: Plugin-Styling Qt Using Style Sheets 484](https://reader037.fdocuments.in/reader037/viewer/2022100304/54769bb7b4af9fc30a8b6214/html5/thumbnails/40.jpg)
40 © Trolltech 2007
More information
Style Sheet Example• examples/widgets/stylesheet
Style Sheet Documentation• http://doc.trolltech.com/4.3/stylesheet.html
Labs• http://labs.trolltech.com/blogs/•
Email• Girish Ramakrishnan ([email protected])• Jens Bache Wiig ([email protected])