1.
The Future Of
Qt Widgets

2.
• Marius Bugge Monsen (mbm)
• Qt Developer
• Qt Widget Team Lead

3.
Déjà vu?

4.
Reading Tea-Leaves

5.
The Elephant In The Room

6.
• UI Extensions for Mobile
• Scalable UI based on QGraphicsView

7.
• Harmattan UI Framework
• UI Framework build on QGraphicsView

8.
• Next Generation Qt Widgets
•?

9.
Canvas And Paint

10.
A
C
B
D

11.
A
B
C D

12.
Window System Paint Painting Code
#include<QtGui>
int main(int argc, char
*argv[])
{
QApplication a
(argc,argv);
QWidget w;
w.show();
return a.exec();
}
Update

13.
A
B
C D

14.
Window System Window Surface Painting Code
#include<QtGui>
int main(int argc, char
*argv[])
{
QApplication a
(argc,argv);
QWidget w;
w.show();
return a.exec();
}

15.
• Window
• Widgets
• Procedural Painting

16.
Not Fast Enough!

17.
• Window
• Widgets
• Primitive Elements

18.
• Graphical Primitive Elements
• Pixmaps
• Meshes
• Shaders

19.
• Graphical Primitive Elements
• Live in Graphics Memory
• Very Fast

20.
• Other Elements
• Input
• Sound
• Haptics
• ...

21.
• Declarative Format (QML)
• Canvas / Scenegraph API
• HW Acceleration (OpenGL ES2 / OpenVG)

22.
Talking Nerdy

23.
Widget

24.
Look & Feel Data & Logic

25.
42

26.
Mouse Region
Grip 42 Groove
Text

27.
Groove
Grip
Text Mouse
Region
Look & Feel

28.
Groove
Grip Range
Control
Text Mouse
Region
Look & Feel Data & Logic

29.
Groove minimum
Mouse maximum
Region Range
... Control
Text value
Grip position
Look & Feel Data & Logic

30.
Image {
id: groove
property alias value: control.value
property int minimum: 25
property int maximum: 75
...
BorderImage {
id: grip
...
}
RangeControl {
id: control
minimumValue: groove.minimum
maximumValue: groove.maximum
minimumPosition: 0
maximumPosition: groove.width - grip.width
position: grip.x
}
}

31.
42

32.
Text 42
Grip
Dial
Mouse Region

33.
Dial
Range
Text Grip Mouse Control
Region
Look & Feel Data & Logic

34.
Image {
id: dial
property alias value: control.value
...
Image {
id: grip
...
}
Text {
id: text
text: control.value
...
}
MouseRegion {
id: input
...
}
RangeControl {
id: control
minimumValue: dial.minimum
maximumValue: dial.maximum
...
}
}

35.
Mature &
New & Shiny
Tested
Look & Feel Data & Logic

36.
• QDateTimeControl
• QLineEditControl
• ...

37.
The Road Ahead

38.
• Qt Declarative + Controls
• QGraphicsItem + Controls
• QWidget + Controls

39.
• Future Widget Technology + Controls

40.
• labs.trolltech.com
• qt.gitorious.org/qt-labs/widgets-ng
• Google Summer Of Code

41.
Thank You!
Questions?

42.
Image credits:
“The Elephant In The Room” by Nancee_art on flickr
“Tea Leaves” by allaboutgeorge on flickr
“Painting Detail” by katiew on flickr
“Mixerboard” by Manuel_P on flickr
“Talk Nerdy To Me” by Ian Farrell on flickr
“Impassable” by stuckincustoms on flickr