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?

CoreGUI

(GraphicsView)Database Network

Declarative

(QML)

NetworkWebKit

(HTML 5)

QtScript (ECMAScript)

Xquery/XpathQtScript

(ECMAScript)

C++ (Modules)

Comprehensive Help Translation (Linguist) Build tool (qmake)

Tools

XMLWebKit

(HTML 5)

OpenVG

OpenGLMultimedia

C++/QML IDE

Qt Creator

Qt Quick

External libraries: Qt Mobility (Nokia), Qxt (Community), etc.

Qt is used everywhereFrom embedded devices to

desktop applicationsBy companies from

many industries

Qt Mobility

• Bearer Management

• Camera

• Contacts

• (Document) Gallery

• Tactile Feedback API

• Landmarks

• Location

• Maps/Navigation

• Messaging

• Multimedia

• Organizer

• Publish & Subscribe

• Sensors

• Service Framework

• System Info

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

QT SDK 1.1 / MEEGO SDK 1.2

Getting the package

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 APIsBlue: Qt SDK only

Pink: Meego SDK only

THE QT QUICK STORY

Compelling UI’s with Qt

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 availablethan C++ developers

Developers are from MarsDesigners are from Venus

01010001

01001101

01001100

Qt C++Flash Mockups

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

PROVIDE ONLY THINGS THAT CAN BE FAST

The QML Philosophy

Import s

Elements

Properties

CODE EXAMPLE

Getting our hands dirty

(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

Search:

Dog

Star

House

Design

States

Initial state

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

Look at this in full detail:

http://qt.nokia.com/developer/learning/online/talks/developerdays2010/tech-talks/qt-quick-rapid-user-interface-prototyping

THE FUTURE

Beyond Qt 4.7

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

OS/Hardware

2D, 3D (Open GL 2.0, GL ES 2.0, etc)

Qt GUI

Qt GraphicsView

Qt Quick - QML Engine

QML Elements

Rect, Image, Text, MouseRegion, Flickable

Qt Quick

QML

Engine

Qt GUI „light“

+

Lighthouse

plugin

QML 1.0/1.1 QML 2.0

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