Qt & Qt Quick   ”Coding Qt”-Workshop C-Base, Berlin, 01.04.2011
Outline• Basics    – What is Qt?    – What is Qt Quick?•   How to obtain the SDK(s)•   Example walkthrough•   Hot stuff fr...
What is Qt?C++ (Modules)                                                                 Qt Quick                         ...
Qt is used everywhere  From embedded devices to   By companies from     desktop applications     many industries
Qt Mobility  •   Bearer Management                 •   Messaging  •   Camera                            •   Multimedia  • ...
Qt Development on MeeGo• Qt Widgets (C++, deprecated)  – Limited use on MeeGo• MeeGo Touch Framework (C++, QGV)  – MeeGo-i...
Getting the packageQT SDK 1.1 / MEEGO SDK 1.2
SDK’s for Development• Qt SDK 1.1 (beta)  – One stop Shop for development on all    released Nokia Smartphone Devices  htt...
SDK Contents• Qt Creator IDE• Qt for Maemo/MeeGo  – MADDE (cross compile toolchain)• Qt for Symbian• Qt for Desktop  – Win...
Compelling UI’s with QtTHE QT QUICK STORY
The state of the UI in• 5 – 10 year product lifecycle• UI adds value, but doesn´t differentiate• Standard desktops and key...
The state of the UI today•   1 – 2 year product lifecycle•   UI differentiation is a must•   Touch-screen and large-screen...
Developers are from MarsDesigners are from Venus 01010001                               ♥☺ 01001101                      ...
GIMP/Photoshop to QML
Properties of QML• Declarative Language (Flash, HTML, XAML)• Bases on Property Bindings    – Reuses the Qt property system...
The QML PhilosophyPROVIDE ONLY THINGS THATCAN BE FAST
Import sElementsProperties
Getting our hands dirtyCODE EXAMPLE                          (Curtesy of Jens Bache-Wiig, Qt DF)
Pickr – A Flickr search app• A full application in a few minutes• Topics  – Building your own reusable QML elements  – Usi...
Concept           Dog           Star           House Search:
Design
States             Initial stateView state
Using XmlListModel• C an be used for parsing all XML  – Examples: ATOM and RSS feeds  – For instance Twitter:http://api.fl...
Using XmlListModel (cont‘d.)<?xml version="1.0"? ><rss>   <channel>     <item>        <title>Shiny car</title><media:thumb...
Fully running exampleLook at this in full detail:http://qt.nokia.com/developer/learning/online/talks/developerdays2   010/...
Beyond Qt 4.7THE FUTURE
Qt Components• Provide high level widgets  – Symbian  – MeeGo  – Desktop (inofficial)  – Custom• MeeGo widgets not public ...
QML 2.0 and Lighthouse             QML 1.0/1.1                                   QML 2.0                             QML E...
Further Developments• Qt Modularization• Open Governance   – Open Reviews   – Maintainer/Trust Relation Principle (Linux) ...
Upcoming SlideShare
Loading in …5
×

Qt & Qt Quick - "Coding Qt"-Workshop @ MeeGo Freeday

2,376 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,376
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
104
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Qt & Qt Quick - "Coding Qt"-Workshop @ MeeGo Freeday

  1. 1. Qt & Qt Quick ”Coding Qt”-Workshop C-Base, Berlin, 01.04.2011
  2. 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. 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) OpenGLTools Qt Creator Comprehensive Help Translation (Linguist) Build tool (qmake) C++/QML IDEExternal libraries: Qt Mobility (Nokia), Qxt (Community), etc.
  4. 4. Qt is used everywhere From embedded devices to By companies from desktop applications many industries
  5. 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. 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. 7. Getting the packageQT SDK 1.1 / MEEGO SDK 1.2
  8. 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. 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. 10. Compelling UI’s with QtTHE QT QUICK STORY
  11. 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. 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. 13. Developers are from MarsDesigners are from Venus 01010001 ♥☺ 01001101  01001100 Flash Mockups Qt C++ Photoshop
  14. 14. GIMP/Photoshop to QML
  15. 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. 16. The QML PhilosophyPROVIDE ONLY THINGS THATCAN BE FAST
  17. 17. Import sElementsProperties
  18. 18. Getting our hands dirtyCODE EXAMPLE (Curtesy of Jens Bache-Wiig, Qt DF)
  19. 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. 20. Concept Dog Star House Search:
  21. 21. Design
  22. 22. States Initial stateView state
  23. 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. 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. 25. Fully running exampleLook at this in full detail:http://qt.nokia.com/developer/learning/online/talks/developerdays2 010/tech-talks/qt-quick-rapid-user-interface-prototyping
  26. 26. Beyond Qt 4.7THE FUTURE
  27. 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. 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. 29. Further Developments• Qt Modularization• Open Governance – Open Reviews – Maintainer/Trust Relation Principle (Linux) – Reviewer Principle (WebKit)Qt Contributors summithttp://developer.qt.nokia.com/groups/qt_contributors_summit/wiki

×