1 QML Intro

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

1 QML Intro

Uploaded by

1 QML Intro

Uploaded by

Qt Quick for Qt Developers

Based on Qt 5.4 (QtQuick 2.4)

30,000 feet Qt overview

Overview of the Qt library

Understanding of QML syntax and concepts

Elements and identities

Basic user interface composition skills

Familiarity with common elements

The Leading C++ Cross-Platform Framework

Used by over 800,000 developers in 70+ industries

Qt UI Oering Choose the Best of All Worlds

C++ on the back, declarative UI design

Customizable C++ UI controls for

Use HTML5 for dynamic web documents,

The Widget World

The Graphics View World

The OpenGL World

The Qt Quick World

Qt Applications Are Native Applications

X11, Wayland, EGLFS

Platform must support OpenGL ES2

QtGraphicalEects: add eects like blur, dropshadow...

The Qt framework is split into modules:

A set of technologies including:

Intuitive User Interfaces

Rapid Workow with Qt Quick

Stunningly Fluent Modern User Interfaces, written with

Power of Cross-Platform Native Qt/C++

+ Direct Hardware Access

Declarative language for User Interface elements:

What elements look like

UI specied as tree of elements with properties

Let's start with an example...

Locate the example: rectangle.qml

Elements are structures in the markup

Not visible itself

Represent visual and non-visual parts

Item is the base type of visual

Elements contain properties

Can also be extended with custom

See Documentation: QML Elements

Elements are described by properties:

width, height, color,

Identifying elements (id property)

Standard properties can be given

Grouped properties keep related

Identity property gives the element a

Attached properties are applied to

Custom properties can be added to

Properties can contain expressions

See above: width is twice the height

Not just initial assignments

The id property denes an identity for an element

For relative alignment and positioning

Used to create relationships between elements

See Documentation: Property Binding

Property Text element has the identity, title

Property values can have dierent

One item lists do not need brackets

colors, dates, rects, sizes, 3Dvectors,...

See Documentation: QML Types

Behind the Scene

QML denes user interfaces using elements and properties

Standard elements contain properties and methods

Properties can be changed from their default values

Properties are bound together

Elements are the structures in QML source code

When a property changes, the properties that reference it are updated

Some standard elements dene methods

How do you load a QML module?

You might also like