The Qt Kinetic Project aims to allow Qt users to more easily create dynamic, smooth and animated GUIs on all platforms. During this session, we'll introduce the new technologies in the Qt Kinetic project, and show how they can be used to create exciting UIs. Presentation by Thierry Bastian held during Qt Developer Days 2009. http://qt.nokia.com/developer/learning/elearning

1. New Qt Creator Tools for
Declarative UI Construction
10/08/09
Project Bauhaus

2. Agenda
• About me
• What is Declarative UI?
• Project workflow
• The Bauhaus Project
• Bauhaus Demo
2

3. About me
• Erik Verbruggen
• Working for Qt Development Frameworks, Nokia
since February 2009
• Working on project Bauhaus and Qt Creator
3

4. What is Declarative UI?
• It is a new paradigm to create user interfaces
• The paradigm lets you go beyond defining only static user
interfaces
• The language is a declarative language which heavily
uses JavaScript
• Designed to run well on restricted hardware
4

5. Project Workflow (Classical)
Static
picture
Dynamic UI
(Flash/HTML)
Graphical Designer C++ Developer
C++
UI + back-end
App on
Device
5

6. Project Workflow (Classical)
● Works very well for static UIs:
● Well-known and mature building blocks
● Often does not push hardware to its limits
● Does not work for “flashy” UIs:
● Requires frequent on-device testing to “get it
right”
● Lots of custom visual “components”
● Heavily customized UI, possibly more than one
for the same application
6

7. Project Workflow (QML)
UI
Static images C++ back-end
(QML)
Graphical Designer C++ Developer
7

8. The Bauhaus Project (High Level)
• One goal:
– Facilitate QML creation as much as possible
• Two sides of the same coin:
– Visually change QML
– Textually change QML
And have them play nice with each other!
8

9. (Not) The Bauhaus Project
• Qt Designer:
– Perfect for traditional “static” UIs
– QWidget centric
– Will stay the choice for traditional apps.
9

10. Demo
This is unreleased software,
and work-in-progress!
10

11. The Bauhaus Project (Textual Editor)
• Syntax highlighting
• Code completion
• Navigation
• Integrated Help
• Refactoring
11

12. The Bauhaus Project (Visual Editor)
• Fresh code base
• Free to mix components:
– Stock QML
– Custom QML
– Custom C++
• Visual State Editing
• Easy Layout Editing
• Visual Property Editing
• Uses refactoring to keep the QML source as
much as-is
12

13. The Bauhaus Project (Release Roadmap)
• Final release depends on the final release of QML
• Preview versions as soon as QML is stable
– Expected late this year
13

14. Questions & Answers
14