Qt Quick

Basic introduction Juha Ristolainen / Futurice Oy

@Riussi on Twitter

Tampere MeeGo Meetup on 23rd November 2010

What?

• Qt Quick is an umbrella term: – Qt Metaobject Language (QML)

– Language runtime integrated with Qt

– QtDeclarative C++ module in Qt

– Qt Creator IDE-support and graphical designer (2.1)

• Qt UI Creation Kit

• Complete toolkit for creating dynamic custom UIs

Why?

• Rapid UI prototyping – Creating and changing UIs has been difficult in the

past – No compilation step needed, easy and fast to modify

and test

• Design oriented – Accessible tools for designers, easy to use – ”Blank canvas”

• Qt Quick Components will provide basic components

– Lightweight and customizable components

• Intuitive and great looking user interfaces

QML

• QML is a new declarative language

• QML describes the user interface

– Described as a tree of elements with properties

• Compose UIs from elements

Text Image

Rectangle

Elements

• Elements are the basic structures in QML

• QML provides only a set of basic elements

– Rectangle, Text, Image, ...

– Also non-visible elements

• Item, States, transitions, models, paths, timers, ...

• Elements contain properties

– Can be extended with custom properties

Properties

• Elements are described by properties

• Simple name-value definitions with default values

• Used for:

– Customizing appearance

– Changing behaviour

• Bindings

– Identifying elements

Properties, pt 2

• Id-property – Used for referencing elements

• Standard properties – Width, height, color, ...

• Grouped properties – Font.family, font.pixelSize

• Attached properties – Properties that elements don’t have by default but can be

attached – KeyNavigation.tab: anotherElement

• Custom properties – Property string username: ””

QML: Basic types

• Property values can have different types: – Numbers

– Boolean

– Strings

– Constants

– Lists

– Scripts

– Other basic type: colors, dates, times, rects, points, sizes

Property binding

• Property values can contain expressions

• Expressions can be blocks of Javascript

• Expressions are evaluated when needed

– Uses Qt signals/slots

Images

• Image

– Source-property is network transparent

– Can be easily transformed

• BorderImage

– Define stretchable areas on image for scalable assets

– Similar to Android’s 9-patch

Gradients

• Gradient-property

– Add two or more GradientStops

• Position between 0.0 and 1.0

• Color

– Using gradients is CPU-intensive

• Preferable to use images

Layouts

• Used to position and align elements

– Line up edges or central lines of elements

• Dynamic layouts

– Avoid hardcoded values, use anchors and bindings. Remember when using the graphical editor

• Anchor-based

Anchors

• Anchors – Can refer to other elements

• centerIn, fill, ...

– Can refer to anchors of other elements • Left, right, top, bottom, verticalCenterm ...

• Margins – Specify margins between elements connected with

anchors

• Constraints – Some items need to be well-defined – Avoid circular dependencies

Hello World import Qt 4.7

Rectangle {

id: mainRect

width: 500; height: 500

color: "lightblue" // color takes SVG colornames as well

// Add an image in the middle of the rectangle

Image {

id: faceImage

source: "face.png"

smooth: true

height: parent.height / 2; width: parent.width / 2

anchors.centerIn: parent // refer to parent or use mainRect

}

// Put a text field underneath it

Text {

anchors.top: faceImage.bottom; anchors.topMargin: 20

anchors.horizontalCenter: faceImage.horizontalCenter

text: qsTr("Hello, World")

font.family: "Nokia Sans”; font.pixelSize: 32

}

}

Demo

• 01-basics

User input

• Mouse / touch

• Keyboard

Mouse/touch input

• MouseArea

– Defines areas on the screen where touch input occurs

– Layout like any other item

• Ways to handle input

– Signals:

• onClicked, onEntered, ...

– Property bindings:

• mouseArea.containsMouse

• GestureArea in Labs

Keyboard input

• Two elements: – TextInput

– TextEdit

• No decorations. Need to create using other elements

• Navigation between elements – Changing focus:

• Clicking

• Attached properties Keys and KeyNavigation

• Raw keyboard input – Predefined handlers for common keys: e.g. onLeftPressed

Demo

• 02-input

States

• Items can define states

• State is a set of property values for an item

– States-property: list of item’s named states

– State-property: current state

• Property values are set when entering a state

State changes

• Explicitly on user interaction

– MouseArea events, TextInput events

• Let the state decide

– When-property

– Make sure when is true only for one state at a time

Transitions

• Transitions define how items change when switching states

• Usually for animating state changes

• From and to-properties

– Wildcard * allowed

• Reversible transitions

– Used with when

Animations

• Can be applied to any visible elements • Animations update element properties to cause a

visual change • Specialized types

– NumberAnimation – ColorAnimation – RotationAnimation – Vector3dAnimation – ...

• Easing curves for variable speed animations

Multiple animations

• SequentialAnimation

– Run animations in sequence

• ParallelAnimation

– Run animations in parallel

• PauseAnimation

– Insert pauses into animation groups

Demo

• 03-states

Data models

• Pure models

– ListModel

– XmlListModel

• Visual models

– Combine information on how to show data with data

– VisualItemModel

– VisualDataModel

ListModel

• Contains simple sequences of elements – No information on how to display data. Data view

items need to define a delegate for showing data

• ListElement – No pre-defined properties, define all properties

yourself

• Can be used with ListViews, Repeaters, etc.

• Dynamic list of items – Can be operated on with methods like append,

remove, move

Data views

• ListView

• GridView

• PathView

– Define a path where to show data from the model

ListView

• Model for data, Delegate for drawing (no default delegate

• Flickable surface with no decorations

• Header, footer, highlight

• Current item

• Sections

– Categorize and sort on some property

XmlListModel

• Maps XML data to model properties using Xpath-queries

• Define a source for XML data

– local or network

• Define a query for single item of data in XML

• XmlRole

– Query different pieces of data from single item

// XmlListModel getting data from a public RSS-feed

XmlListModel {

id: listModel

source: "http://labs.qt.nokia.com/feed/"

query: "/rss/channel/item"

XmlRole {

name: "title"; query: "title/string()"

}

XmlRole {

name: "pubDate"; query: "pubDate/string()"

}

XmlRole {

name: "link"; query: "link/string()”

}

XmlRole {

name: "description"; query: "description/string()”

}

}

Demo

• 04-listview

Demo

• 05-xmllistmodel

Not covered

• Defining custom components – In pure QML or C++

• QML C++ integration – Creating QML-plugins with C++ – Expose QObjects to QML, use signals/slots

• Embed QML inside C++ application • For bigger projects think about using a C++

”engine” and QML for UI • Qt Mobility QML bindings (Maps, Location,

Gallery, etc)

What are you waiting for?

• Get started today

• All you need:

– Qt 4.7

– Qt Creator 2.1 (beta currently available)

• For mobile development Nokia Qt SDK

More information

• Qt 4.7 documentation: http://doc.qt.nokia.com/4.7/index.html

• Qt Developer Network: http://developer.qt.nokia.com/

Shameless plug

• Visit Tampere MeeGo network: http://www.meetup.com/Tampere-MeeGo-Network/

• MeeGoLandia in Tampere April 2011: http://meegolandia.com/

Thank you

• Juha Ristolainen

– Senior Consultant at Futurice Oy

– http://www.futurice.com/

– @Riussi on Twitter