QML Programming

Fundamentals and Beyond

Introduction to QML
Material based on Qt 5.12
Copyright 2020, Integrated Computers Solutions, Inc. (ICS)
This work may not be reproduced in whole or in part without the express written consent of ICS.

© Integrated Computer Solutions Inc. www.ics.com 1

Course Outline
Session 1: April 28, Introduction to QML Session 5: May 15, Custom Items & Components
● About QML ● Creating your own Components
● Properties ● Creating a Module
● Basic Types
Session 6: May 19, Model / View
Session 2: May 1, QML Item Placement ● Model / View
● How to correctly size and place items ● QML Models
● When to use Anchors, Layouts and Positioners ● QML Views

Session 3: May 5, Touch Interaction Session 7: May 22, C++ Integration

● QML Signals ● Why expose C++ to QML
● Touch Events ● Exposing C++ Objects
● Single and Multi-Touch ● Exposing C++ Classes
● Swipe and Pinch Gestures

Session 4: May 8, States & Transitions

● Creating and defining states
● Using Transitions

© Integrated Computer Solutions Inc. www.ics.com 2

About ICS

ICS Designs User Experiences and Develops Software for

Connected Devices
• Largest source of independent Qt expertise in North America since 2002
• Headquartered in Waltham, MA with offices in California, Canada, Europe
• Includes Boston UX, ICS’ UX design division

• Embedded, touchscreen, mobile and desktop applications

• Exclusive Open Enrollment Training Partner in North America

© Integrated Computer Solutions Inc. www.ics.com 33

 UX/UI Design and Development for Connected
Devices Across Many Industries

© Integrated Computer Solutions Inc. www.ics.com 44

 POLL QUESTIONS

© Integrated Computer Solutions Inc. www.ics.com 5

Agenda

● What is Qt Quick?
● What is QML and how it is structured:
● QML Properties
● QML Property Binding
● QML Types
● Demo: Simple QML Project
● Questions ?

© Integrated Computer Solutions Inc. www.ics.com 6

What is Qt Quick?
GUI Thread
A set of technologies including:
● Declarative markup language: QML QML engine (extends JavaScript engine)
• Manages QML types
● Scripting Language: JavaScript • Manages QML objects
• Manages property bindings
● Language runtime integrated with Qt
● C++ API for integration with Qt applications
● QtCreator IDE support for the QML language
● Qt Quick Designer Renderer Thread
● Debugger
● QML Profiler

© Integrated Computer Solutions Inc. www.ics.com 7

Philosophy of Qt Quick
● Intuitive User Interfaces
● Design-Oriented
● Rapid Prototyping and Production
● Easy Deployment
● Designers and developers work on the same sources

© Integrated Computer Solutions Inc. www.ics.com 8

Rapid Workflow with Qt Quick
Qt Quick
Declarative UI Design

Stunningly Fluent Modern User Interfaces, written with

Designer QML. Ideal for rapid UI prototyping.

Imperative Logic

Power of Cross-Platform Native Qt/C++

Core Network Sql

Positioning
Developer

Serial Port
Bluetooth
XML

NFC
Processes, Threads, HTTP SQL &
IPC, Containers, FTP Oracle
I/O, Strings, SSL Database
Etc.
+ Direct Hardware Access

© Integrated Computer Solutions Inc. www.ics.com 9

What Is QML?
Declarative language for User Interface building blocks
● Describes the user interface
○ What UI building blocks look like
○ How they behave
● UI specified as tree of QML objects with properties
Example file: MyRectangle.qml
import QtQuick 2.12 // Loads version 2.12 of the QtQuick module

Rectangle {
width: 400; height: 400
color: "lightblue"
}

© Integrated Computer Solutions Inc. www.ics.com 10

QML File Structure
● Root Item type
import ModuleName VersionNumber
● Identifier //Import modules as needed.
● Property declarations Item {
id: exampleItem
● Signal declarations property var exampleProperty:42
● JavaScript functions signal exampleSignal(var variantArgument)
function example() { return 0; }
● Object properties width: background.width
● Child objects height: background.height
Rectangle {
● States id: background
● Transitions …
}
states: [ State { … }, … ]
transitions: [ Transition { … }, … ]
}

© Integrated Computer Solutions Inc. www.ics.com 11

A Tree of QML Objects

© Integrated Computer Solutions Inc. www.ics.com 12

QML Types

● QML types are structures in the ● Non-visual QML types:

markup language ○ States, transitions, Models,
○ Represent visual and non-visual paths, gradients, timers,...
parts ● QML types contain properties
● Item is the base type of visual ○ Extendable with custom
types properties
○ Not visible itself
○ Has a position, dimensions, focus
○ Supports layering
○ Usually used to group visual types
○ Rectangle, Text, TextInput,...

© Integrated Computer Solutions Inc. www.ics.com 13

Properties
QML types are described by properties:
● Simple name-value definitions
○ width, height, color,…
○ With default values
○ Each has a well-defined type
○ Separated by semicolons or line breaks

● Used for
○ Identifying QML objects (id property)
○ Customizing their appearance
○ Changing their behavior

© Integrated Computer Solutions Inc. www.ics.com 14

Property Types
Property values can have different types:
● Numbers (int and real): 400 and 1.5
● Boolean values: true and false
● Strings: “Hello Qt”
● Constants: AlignLeft
● Lists:[...]
○ One item lists do not need brackets
● Scripts:
○ Included directly in property definitions
● Other types:
○ colors, dates, rects, sizes, 3Dvectors,...
○ Usually created using constructors

© Integrated Computer Solutions Inc. www.ics.com 15

Property Examples
● Standard properties can be given values:
Text {
text: "Hello world"
height: 50
}

● Grouped properties keep related properties together: Use either below.

Text { Text {
font { font.family: "Helvetica"
family: "Helvetica" font.pointSize: 24
pointSize: 24 }
}
}

© Integrated Computer Solutions Inc. www.ics.com 16

Property Examples
● Attached properties are applied to ● Custom properties can be added to
QML objects without object any object:
creation:
TextInput { Rectangle {
text: "Hello world" property real mass: 100.0
KeyNavigation.tab: nextInput }
}
CircleButton {
property alias bgColor: itemA.color
● KeyNavigation.tab is not a }
standard property of TextInput.
It is a property that is attached to
objects

© Integrated Computer Solutions Inc. www.ics.com 17

Binding
Window {
visible: true; width: 400; height: 200
Rectangle {
x: 100; y: 50;
width: height * 2
height: parent.height / 2
color: "lightblue"
}
}

● Properties can contain JavaScript expressions

○ See above: width is twice the height
● Not just for initial assignments, expressions are re-evaluated when needed
● Note! The JavaScript assignment operator ‘=‘ is not a binding
○ Assignment: width = height * 2 // No re-evaluation
○ Assignment to a binding: width = Qt.binding(function() { return height * 2; } )

© Integrated Computer Solutions Inc. www.ics.com 18

Identifying Objects
● Text
Text { item has the id title
● id: title
Properties width, x, y of Rectangle bound to the properties x, y, and height of
x: 50; y: 25
title"Qt
text: as shown.
Quick"
font { family: "Helvetica"; pointSize: parent.width * 0.1 }
}
Rectangle {
x: title.x
y: title.y + title.height - height;
height: 5
width: title.width
color: "green"
}

● Text item has the id title

● Properties width, x, y of Rectangle bound to the properties x, y, and height of
title as shown.
© Integrated Computer Solutions Inc. www.ics.com 19
Colors
Rectangle {
id: redRect
x: 0; y: 0;
width: parent.width / 3; height: parent.height
color: "#ff0000"
}
Rectangle {
id: greenRect
x: redRect.width; width: parent.width / 3; height: parent.height
color: Qt.rgba(0,0.75,0,1)
}
Rectangle {
x: redRect.width + greenRect.width;
width: parent.width / 3;
height: parent.height;
color: "blue"
opacity: 0.5
}

© Integrated Computer Solutions Inc. www.ics.com 20

Images
Rectangle {
width: 400; height: 400
color: "black"
Image {
x: (parent.width - width) / 2
y: (parent.height - height) / 2
source: "../images/rocket.png"
}
}

● Property source contains a relative path

● Properties width and height are obtained from the image file
● Some Additional properties include rotation, opacity, scale

© Integrated Computer Solutions Inc. www.ics.com 21

Text Type
Rectangle {
width: 400; height: 400; color: "lightblue"
Text {
x: parent.width * 0.25; y: parent.height * 0.25
text: qsTr("Qt Quick”)
font { family: "Helvetica";
pixelSize: parent.width * 0.1 }
}
}
// fontSizeMode property is another way to do scaling

● Can also use HTML tags in the text property:

○ "<html><b>Qt Quick</b></html>"

● Width and height can also be determined by the font metrics and text
● The rectangle's size could depend on the font size
○ FontMetrics { id: metrics: font.family: “Courier” }
○ Rectangle { height: metrics.height * nofRows }

© Integrated Computer Solutions Inc. www.ics.com 22

© Integrated Computer Solutions Inc. www.ics.com 23
 Q&A Session

If you have additional questions or feedback,

please contact us at [email protected]

© Integrated Computer Solutions Inc. www.ics.com 24