Qt Quick for Qt Developers
Introduction to Qt Quick
Based on Qt 5.4 (QtQuick 2.4)
Contents
30,000 feet Qt overview
Meet Qt Quick
Concepts
2015
Objectives
Overview of the Qt library
Understanding of QML syntax and concepts
Elements and identities
Properties and property binding
Basic user interface composition skills
Qt framework presentation
Qt Quick inside the Qt framework
Familiarity with common elements
Understanding of anchors and their uses
Ability to reproduce a design
2015
The Leading C++ Cross-Platform Framework
Cross-Platform
Class Library
One Technology for
All Platforms
Integrated
Development
Tools
Shorter Time-to-Market
Cross-Platform
IDE, Qt Creator
Productive development
environment
Used by over 800,000 developers in 70+ industries
Proved & tested technology since 1994
4
2015
Qt UI Oering Choose the Best of All Worlds
Qt Quick
Qt Widgets
Web / Hybrid
C++ on the back, declarative UI design
(QML) in the front for beautiful, modern
touch-based User Experiences.
Customizable C++ UI controls for
traditional desktop look-and-feel. Also
good for more static embedded UIs for
more limited devices / operating systems.
Use HTML5 for dynamic web documents,
Qt Quick for native interaction.
2015
The Widget World
2015
The Graphics View World
2015
The OpenGL World
2015
The Qt Quick World
2015
Qt Applications Are Native Applications
Qt / Windows
Qt / OSX
Windows GDI
Windows Kernel
PC HW
Cocoa
Mac Kernel
MacHW
Qt / Embedded
Qt / Android
X11, Wayland, EGLFS
Linux Kernel
Embedded HW
10
Qt Application
QtGui
QtCore
QtNetwork
QtSql
QtMultimedia
etc.
Android NDK
Android Kernel
Android HW
2015
Qt Quick Requirements
Platform must support OpenGL ES2
Needs at least QtCore, QtGui, QtQml, and QtQuick modules
Other modules can be used to add new features:
11
QtGraphicalEects: add eects like blur, dropshadow...
Qt3D:3D programming in QML
QtMultimedia: audio and video items, camera
QtWebEngine: web view
2015
Qt Modules
12
The Qt framework is split into modules:
Examples: QtCore, QtGui, QtWidgets, QtNetwork, QtMultimedia...
Modules contain libraries, plugins and documentation.
Libraries are linked to your applications
Libraries group a set of common features (xml, dbus, network...)
Qt Core is mandatory for all Qt applications
2015
Meet Qt Quick
What is Qt Quick?
14
A set of technologies including:
Declarative markup language: QML
Imperative Language: JavaScript
Language runtime integrated with Qt
C++ API for integration with Qt
applications
QtCreator IDE support for the QML
language
2015
Philosophy of Qt Quick
15
Intuitive User Interfaces
Design-Oriented
Rapid Prototyping and Production
Easy Deployment
Enable designer and developers to work on the same sources
2015
Rapid Workow with Qt Quick
Qt Quick
Declarative UI Design
Designer
Stunningly Fluent Modern User Interfaces, written with
QML. Ideal for rapid UI prototyping.
Imperative Logic
Processes, Threads,
IPC, Containers,
I/O, Strings,
Etc.
HTTP
FTP
SSL
SQL
&
Oracle
Databases
Serial Port
Sql
NFC
Network
Positioning
Core
Bluetooth
Developer
XML
Power of Cross-Platform Native Qt/C++
+ Direct Hardware Access
16
2015
Concepts
What Is QML?
Declarative language for User Interface elements:
Describes the user interface
18
What elements look like
How elements behave
UI specied as tree of elements with properties
2015
A Tree of Elements
19
Let's start with an example...
2015
Viewing an Example
import QtQuick 2.4
Rectangle {
width: 400;
height: 400
color: "lightblue"
}
Locate the example: rectangle.qml
Launch the QML runtime:
qmlscene rectangle.qml
Demo: qml-intro/ex-concepts/rectangle.qml
20
2015
Elements
Elements are structures in the markup
language
Not visible itself
Has a position, dimensions
Usually used to group visual elements
Rectangle, Text, TextInput,...
Non-visual elements:
Represent visual and non-visual parts
Item is the base type of visual
elements
States, transitions,...
Models, paths,
Gradients, timers, etc.
Elements contain properties
Can also be extended with custom
properties
See Documentation: QML Elements
21
2015
Properties
Elements are described by properties:
Simple name-value denitions
22
width, height, color,
With default values
Each has a well-dened type
Separated by semicolons or line breaks
Used for
Identifying elements (id property)
Customizing their appearance
Changing their behavior
2015
Property Examples
Standard properties can be given
values:
Text {
text: "Hello world"
height: 50
}
Grouped properties keep related
properties together:
Identity property gives the element a
name:
Identifying elements (id property)
Customizing their appearance
Changing their behavior
Text {
id: label
text: "Hello world"
}
Text {
font.family: "Helvetica"
font.pixelSize: 24
// Prefferred syntax
// font { family: "Helvetica"; pixelSize: 24 }
}
23
2015
Property Examples
Attached properties are applied to
elements:
TextInput {
text: "Hello world"
KeyNavigation.tab: nextInput
}
24
KeyNagivation.tab is not a
standard property of TextInput
Is a standard property that is attached
to elements
Custom properties can be added to
any element:
Rectangle {
property real mass: 100.0
}
Circle {
property real radius: 50.0
}
2015
Binding Properties
Item {
width: 400; height: 200
Rectangle {
x: 100; y: 50; width: height * 2; height: 100
color: "lightblue"
}
}
Properties can contain expressions
See above: width is twice the height
Not just initial assignments
Expressions are re-evaluated when needed
Demo: qml-intro/ex-concepts/expressions.qml
25
2015
Identifying Elements
The id property denes an identity for an element
Lets other elements refer to it
For relative alignment and positioning
To use its properties
To change its properties (e.g., for animation)
For re-use of common elements (e.g., gradients, images)
Used to create relationships between elements
See Documentation: Property Binding
26
2015
Using Identities
Item {
width: 300; height: 115
Text {
id: title
x: 50; y: 25 text: "Qt Quick"
font.family: "Helvetica"; font.pixelSize: 50
}
Rectangle {
x: 50; y: 75; height: 5
width: title.width
color: "green"
}
}
Demo: qml-intro/ex-concepts/identity.qml
27
2015
Viewing an Example
Text {
id: title
x: 50; y: 25 text: "Qt Quick"
font.family: "Helvetica"; font.pixelSize: 50
}
Rectangle {
x: 50; y: 75; height: 5
width: title.width
color: "green"
}
28
Property Text element has the identity, title
Property width of Rectangle bound to width of title
2015
Basic Types
Property values can have dierent
types:
Numbers (int and real): 400 and 1.5
Boolean values: true and false
Strings: HelloQt
Constants: AlignLeft
Lists:[...]
Scripts:
One item lists do not need brackets
Included directly in property denitions
Other types:
colors, dates, rects, sizes, 3Dvectors,...
Usually created using constructors
See Documentation: QML Types
29
2015
Behind the Scene
30
2015
Summary
QML denes user interfaces using elements and properties
Standard elements contain properties and methods
31
Properties can be changed from their default values
Property values can be expressions
Id properties give identities to elements
Properties are bound together
Elements are the structures in QML source code
Items are visual elements
When a property changes, the properties that reference it are updated
Some standard elements dene methods
A range of built-in types is provided
2015
Questions
32
How do you load a QML module?
What is the dierence between Rectangle and width?
How would you create an element with an identity?
What syntax do you use to refer to a property of another element?
2015
Lab Items
The image on the right shows two items and two
child items inside a 400 400 rectangle.
1. Recreate the scene using Rectangle items.
2. Can items overlap? Experiment by moving the light
blue or green rectangles.
3. Can child items be displayed outside their parents?
Experiment by giving one of the child items negative
coordinates.
33
2015
