QML Syntax Basics▲

QML is a multi-paradigm language that enables objects to be defined in terms of their attributes and how they relate and respond to changes in other objects. In contrast to purely imperative code, where changes in attributes and behavior are expressed through a series of statements that are processed step by step, QML's declarative syntax integrates attribute and behavioral changes directly into the definitions of individual objects. These attribute definitions can then include imperative code, in the case where complex custom application behavior is needed.

QML source code is generally loaded by the engine through QML documents, which are standalone documents of QML code. These can be used to define QML object types that can then be reused throughout an application. Note that type names must begin with an uppercase letter in order to be declared as QML object types in a QML file.

Import Statements▲

A QML document may have one or more imports at the top of the file. An import can be any one of:

  • a versioned namespace into which types have been registered (e.g., by a plugin)

  • a relative directory which contains type-definitions as QML documents

  • a JavaScript file

JavaScript file imports must be qualified when imported, so that the properties and methods they provide can be accessed.

The generic form of the various imports are as follows:

  • import Namespace VersionMajor.VersionMinor

  • import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier

  • import "directory"

  • import "file.js" as ScriptIdentifier

Examples:

  • import QtQuick 2.0

  • import QtQuick.LocalStorage 2.0 as Database

  • import "../privateComponents"

  • import "somefile.js" as Script

Please see the QML Syntax - Import Statements documentation for in-depth information about QML imports.

 

Object Declarations▲

Syntactically, a block of QML code defines a tree of QML objects to be created. Objects are defined using object declarations that describe the type of object to be created as well as the attributes that are to be given to the object. Each object may also declare child objects using nested object declarations.

An object declaration consists of the name of its object type, followed by a set of curly braces. All attributes and child objects are then declared within these braces.

Here is a simple object declaration:

 
Sélectionnez
Rectangle {
    width: 100
    height: 100
    color: "red"
}

This declares an object of type Rectangle, followed by a set of curly braces that encompasses the attributes defined for that object. The Rectangle type is a type made available by the QtQuick module, and the attributes defined in this case are the values of the rectangle's width, height and color properties. (These are properties made available by the Rectangle type, as described in the Rectangle documentation.)

The above object can be loaded by the engine if it is part of a QML document. That is, if the source code is complemented with import statement that imports the QtQuick module (to make the Rectangle type available), as below:

 
Sélectionnez
import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

When placed into a .qml file and loaded by the QML engine, the above code creates a Rectangle object using the Rectangle type supplied by the QtQuick module:

Image non disponible

If an object definition only has a small number of properties, it can be written on a single line like this, with the properties separated by semi-colons:

 
Sélectionnez
Rectangle { width: 100; height: 100; color: "red" }

Obviously, the Rectangle object declared in this example is very simple indeed, as it defines nothing more than a few property values. To create more useful objects, an object declaration may define many other types of attributes: these are discussed in the QML Object Attributes documentation. Additionally, an object declaration may define child objects, as discussed below.

Child Objects▲

Any object declaration can d