The Future Of

Qt Widgets
•   Marius Bugge Monsen (mbm)

•   Qt Developer

•   Qt Widget Team Lead
Déjà vu?
Reading Tea-Leaves
The Elephant In The Room
• UI Extensions for Mobile
 • Scalable UI based on QGraphicsView
• Harmattan UI Framework
 • UI Framework build on QGraphicsView
• Next Generation Qt Widgets
 •?
Canvas And Paint
A

C

    B
        D
A


    B


C       D
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
A


    B


C       D
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();
                                    }
• Window
   • Widgets
    • Procedural Painting
Not Fast Enough!
• Window
   • Widgets
    • Primitive Elements
• Graphical Primitive Elements
 • Pixmaps
 • Meshes
 • Shaders
• Graphical Primitive Elements
 • Live in Graphics Memory
 • Very Fast
• Other Elements
 • Input
 • Sound
 • Haptics
 • ...
• Declarative Format (QML)
• Canvas / Scenegraph API
• HW Acceleration (OpenGL ES2 / OpenVG)
Talking Nerdy
Widget
Look & Feel   Data & Logic
42
Mouse Region



Grip        42        Groove



           Text
Groove


         Grip


Text                 Mouse
                     Region

       Look & Feel
Groove


         Grip                   Range
                               Control
Text                 Mouse
                     Region

       Look & Feel            Data & Logic
Groove       minimum

 Mouse        maximum
 Region                      Range
                     ...    Control
   Text          value

  Grip         position

Look & Feel                Data & Logic
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
  }
}
42
Text   42


                              Grip
Dial




               Mouse Region
Dial
                                Range
Text     Grip        Mouse     Control
                     Region


       Look & Feel            Data & Logic
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
      ...
  }
}
Mature &
New & Shiny
                Tested




 Look & Feel   Data & Logic
• QDateTimeControl
• QLineEditControl
• ...
The Road Ahead
• Qt Declarative + Controls
• QGraphicsItem + Controls
• QWidget + Controls
• Future Widget Technology + Controls
• labs.trolltech.com
• qt.gitorious.org/qt-labs/widgets-ng
• Google Summer Of Code
Thank You!

Questions?
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

The Future of Qt Widgets