The Qt Kinetic project is an initiative to provide powerful frameworks to create dynamic, beautiful graphical user interfaces in Qt. As an extension of this effort, the next generation of Qt's item views framework is being designed with animated user interfaces in mind. This talk will give an introduction to the Item Views NG project and the new architecture that is being proposed. Presentation by Marius Bugge Monsen held during Qt Developer Days 2009. http://qt.nokia.com/developer/learning/elearning

1. Qt Item Views
The Next Generation

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

3. Qt Item Views
The Next Generation
• What is Qt Item Views?
• Why a “Next Generation”?
• How Does it Work?
• Can I Start Using It?

4. What Is Qt Item Views?

6. QListView QTableView QTreeView

7. • QWidget-based
• Model-View
• Since Qt 4.0

8. Creative Friday!

9. Why a “Next Generation”?

10. ... and why now?

14. • Lessons Learned
• Qt Development
• Competition

15. • Design Lessons
• Different views - different use-cases
• Eye-candy matters
• KISS

16. • Process Lessons
• Be open
• Use the API
• Encourage others to use the API

17. • So What Do We Want ?

18. Shark_food by starstreak007 on flickr

19. • Features
• Fast
• Integrated
• Hardware Accelerated

20. • API
• Discoverable
• Structured
• Clear

21. • Implementation
• Simple
• Clean
• Testable

22. How Does It Work?

23. Model
View Controller

24. Data and logic
Selection state
Presentation Behavior

25. Data and logic Selection state
Presentation Behavior

26. Data
QListModelInterface QListSelectionManager
QGraphicsListView QListController
Output Input

27. QListModelInterface
vs.
QAbstractItemModel

28. • Optimizable
• Maintainable
• Expandable

29. List View
Adaptor
Tree Model

30. QListWidgetNG
QListDefaultModel QListSelectionManager
QGraphicsListView QListController

31. Graphics View
Item View

32. int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QListWidgetNG widget;
widget.show();
return app.exec();
}

33. int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QListWidgetNG widget;
widget.controller()->setModel(new MyData(&widget));
widget.show();
return app.exec();
}

34. Data and logic Selection state
QGraphicsListView Behavior

35. • View or Layout?

36. View
Item

37. Invisible item
Item

38. Invisible item
Item

39. Invisible item
Item

40. QGraphicsWidget
QGraphicsWidget

41. QPropertyAnimation
QGraphicsWidget
Position Size
Opacity Rotation
Scale

42. Demo

43. QGraphicsSimpleTextItem
QGraphicsLayout
Me
QGraphicsPixmapItem
QGraphicsSvgItem

44. View
Item
Me

45. ‘SUP DAWG YO I HERD U LIKE ITEM VIEWS...

46. View
View

47. Data and logic Selection state
QGraphicsListView Behavior

48. Data and logic Selection state
Behavior

49. Data and logic Selection state
Behavior

50. Data and logic Selection state
PathListView Behavior

52. int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QListWidgetNG widget;
widget.controller()->setView(new MyPathView);
widget.show();
return app.exec();
}

53. View
Item

54. View
Item

55. Demo

56. Data and logic Selection state
Presentation Behavior

57. Data and logic Selection state
Presentation QListController

58. Input Events
Model Controller

59. View Input Events
Item Controller

60. View Scrollbar
Item Controller

61. Data and logic Selection state
Presentation QListController

62. Data and logic Selection state
Presentation

63. Data and logic Selection state
Presentation

64. Data and logic Selection state
Presentation QKineticListController

65. int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QListWidgetNG widget(new QKineticListController);
widget.show();
return app.exec();
}

66. Can I Start Using It?

67. • Yes

68. • Yes, but ...

69. Research!

70. • Current status
• Integrating in existing applications
• Profiling and optimizing

71. • Current status
• Missing features
• API may change

72. • Unsolved problem
• Data Invalidation

73. “Don’t expect, inspect!”

74. http://labs.trolltech.com/page/Projects/Itemview/ItemviewsNG
http://qt.gitorious.org/qt-labs/itemviews-ng

75. Thank you!
Questions?