QML Syntax

Tod Gentille
www.syncorsystems.com
@todgentille
 Overview

Basic Types

QML Object

Nesting

Attributes

Importing

Commenting

Components
Basic Language Types

C++ Types

Basic types from

QML modules

Basic types no
import required
The Basic Types

int

bool

real

double

string

url

list

enumeration

var
Qt Quick Imported Types
color

font

matrix 4x4

quaternion

vector2D

vector3d

date

point

size

rect
The Key to Defining Colors
 Global Objects

• qsTr
• font
Qt •
•
lighter
darker
Qt.quit() •
•
resolvedUrl
size
• quit

QML • XMLHttpRequest
• Offline Storage/Database APIs
console.log() • Logging
QML Common Font Properties
 Working with Dates

Specify as “YYYY-MM-DD” string

Format with Qt.formatDate() or Qt.formatDateTime()

Qdate  date
 C++ Types
a topic for another day
 QML Object Declaration

Name

Delimiters

id attribute

property
 Attributes

id

properties

signals

signal handlers

methods

attached properties
 id Attribute

optional – but recommended

titleCase required

“ Be advised to use consistent IDs for all

root items in your project, for example,
just root. This helps you keep track of
items used and avoid side effects.
”
id Attribute Example
Nesting Elements
 Custom Properties

Properties of a specific type

Variant properties

onFirstStringChanged

on_FirstStringChanged
Alias Properties
Example Custom Property Usage
Grouped Properties
Property Aliases
Property Scope
Building Components
 Summary

Basic types

Imported types

Control types
Label
TextField

Color, Date, and Font types

Object Creation
Attributes,Nesting

Custom Components
Alias property