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

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 from the labs• Q&A

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.

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

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

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!

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

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

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 keypad form factors• Native is the only way to get things done

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

Developers are from MarsDesigners are from Venus 01010001 ♥☺ 01001101  01001100 Flash Mockups Qt C++ Photoshop

GIMP/Photoshop to QML

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

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 – 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

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.flickr.com/services/feeds/photos_ public.gne? format=rss2&tags=zeppelin

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>

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

Beyond Qt 4.7THE FUTURE

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

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)

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

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

by meetmeego

Accessibility

Upload Details

Usage Rights

1 Embed 88

Statistics

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