Presented at the Bossa'10 conference in Manaus, Brazil. The presentation talks about the direction in which the Qt widgets are being developed and introduces the idea of Controls to Qt and QML.

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

7. The Elephant In The Room

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

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

10. • Next Generation Qt Widgets
•?

11. Canvas And Paint

13. A
C
B
D

14. A
B
C D

15. 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

16. A
B
C D

17. 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();
}

18. • Window
• Widgets
• Procedural Painting

19. Not Fast Enough!

20. • Window
• Widgets
• Primitive Elements

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

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

23. • Other Elements
• Input
• Sound
• Haptics
• ...

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

25. Talking Nerdy

26. Widget

27. Look & Feel Data & Logic

29. 42

30. Mouse Region
Grip 42 Groove
Text

31. Groove
Grip
Text Mouse
Region
Look & Feel

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

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

34. 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
}
}

35. 42

36. Text 42
Grip
Dial
Mouse Region

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

38. 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
...
}
}

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

40. • QDateTimeControl
• QLineEditControl
• ...

41. The Road Ahead

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

43. • Future Widget Technology + Controls

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

45. Thank You!
Questions?

46. 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