This slides were part of a presentation during a workshop in Berlin (c-base) and powered by meetmeego.org. The video of this presentation is available here: http://meetmeego.org/2011/04/02/video-vom-qt-workshop-beim-meego-freeday/ The presentation was done by Daniel Molkentin (from Nokia).

1. Qt & Qt Quick
”Coding Qt”-Workshop
C-Base, Berlin, 01.04.2011

2. Outline
• Basics
– What is Qt?
– What is Qt Quick?
• How to obtain the SDK(s)
• Example walkthrough
• Hot stuff from the labs
• Q&A

3. What is Qt?
C++ (Modules) Qt Quick
GUI Declarative
Core Database Network
(GraphicsView) (QML)
WebKit QtScript QtScript
Network Xquery/Xpath
(HTML 5) (ECMAScript) (ECMAScript)
WebKit OpenVG
XML Multimedia
(HTML 5) OpenGL
Tools Qt Creator
Comprehensive Help Translation (Linguist) Build tool (qmake) C++/QML IDE
External libraries: Qt Mobility (Nokia), Qxt (Community), etc.

4. Qt is used everywhere
From embedded devices to By companies from
desktop applications many industries

5. Qt Mobility
• Bearer Management • Messaging
• Camera • Multimedia
• Contacts • Organizer
• (Document) Gallery • Publish & Subscribe
• Tactile Feedback API • Sensors
• Landmarks • Service Framework
• Location • System Info
• Maps/Navigation • Versit (vCard)
http://qt.nokia.com/products/qt-addons/mobility/ Blue: QML-enabled

6. Qt Development on MeeGo
• Qt Widgets (C++, deprecated)
– Limited use on MeeGo
• MeeGo Touch Framework (C++, QGV)
– MeeGo-internal toolkit, to be deprecated
• Qt Quick (QML, JavaScript, C++)
– The new toolkit Our focus!

7. Getting the package
QT SDK 1.1 / MEEGO SDK 1.2

8. SDK’s for Development
• Qt SDK 1.1 (beta)
– One stop Shop for development on all
released Nokia Smartphone Devices
http://developer.qt.nokia.com/prereleases
• MeeGo.com MeeGo SDK 1.2 (preview)
– Same Installer Framework (Windows), binary
distro packages (Linux) for Development on
MeeGo
http://meego.com/downloads

9. SDK Contents
• Qt Creator IDE
• Qt for Maemo/MeeGo
– MADDE (cross compile toolchain)
• Qt for Symbian
• Qt for Desktop
– Windows (MinGW, MSVC optional)
• Qt Mobility APIs
Blue: Qt SDK only
Pink: Meego SDK only

10. Compelling UI’s with Qt
THE QT QUICK STORY

11. The state of the UI in
• 5 – 10 year product lifecycle
• UI adds value, but doesn´t differentiate
• Standard desktops and keypad form
factors
• Native is the only
way to get things
done

12. The state of the UI today
• 1 – 2 year product lifecycle
• UI differentiation is a must
• Touch-screen and large-screen UI
• Script developers more available
than C++ developers

13. Developers are from Mars
Designers are from Venus
01010001
♥☺
01001101 
01001100
Flash Mockups
Qt C++
Photoshop

14. GIMP/Photoshop to QML

15. Properties of QML
• Declarative Language (Flash, HTML, XAML)
• Bases on Property Bindings
– Reuses the Qt property system
• Easy to read and write (think JSON)
• Extends JavaScript (imperative)
• Extensible with C++ code
• Provides simple, fast to execute
primitives

16. The QML Philosophy
PROVIDE ONLY THINGS THAT
CAN BE FAST

17. Import s
Elements
Properties

18. Getting our hands dirty
CODE EXAMPLE
(Curtesy of Jens Bache-Wiig, Qt DF)

19. Pickr – A Flickr search app
• A full application in a few minutes
• Topics
– Building your own reusable QML elements
– Using graphical assets
– Using animations, states and transitions
– Declaring properties
– Get from mockup to working app using the
same code base with not discontinuity be-
tween Designer and Developer perspective

20. Concept
Dog
Star
House
Search:

21. Design

22. States
Initial state
View state

23. Using XmlListModel
• C an be used for parsing all XML
– Examples: ATOM and RSS feeds
– For instance Twitter:
http://api.flickr.com/services/feeds/photos_
public.gne? format=rss2&tags=zeppelin

24. Using XmlListModel (cont‘d.)
<?xml version="1.0"? >
<rss>
<channel>
<item>
<title>Shiny car</title>
<media:thumbnail url="http://flickr.com/42/f7_t.jpg" />
</item>
</channel>
</rss>

25. Fully running example
Look at this in full detail:
http://qt.nokia.com/developer/learning/online/talks/developerdays2
010/tech-talks/qt-quick-rapid-user-interface-prototyping

26. Beyond Qt 4.7
THE FUTURE

27. Qt Components
• Provide high level widgets
– Symbian
– MeeGo
– Desktop (inofficial)
– Custom
• MeeGo widgets not public yet (again)
• Custom Widgets depend on QML 1.1

28. QML 2.0 and Lighthouse
QML 1.0/1.1 QML 2.0
QML Elements
Rect, Image, Text, MouseRegion, Flickable
Qt Quick - QML Engine Qt GUI „light“
Qt Quick
+
Qt GraphicsView QML
Lighthouse
Engine
Qt GUI plugin
OS/Hardware
2D, 3D (Open GL 2.0, GL ES 2.0, etc)

29. Further Developments
• Qt Modularization
• Open Governance
– Open Reviews
– Maintainer/Trust Relation Principle (Linux)
– Reviewer Principle (WebKit)
Qt Contributors summit
http://developer.qt.nokia.com/groups/qt_contributors_summit/wiki