QML and Esri's QML API

Extending QML with ArcGIS Runtime

The ArcGIS Runtime SDK for Qt QML API extends QML by providing ArcGIS Runtime SDK technology as QML types. With ArcGIS Runtime SDK for Qt QML API, you write and build your apps on Linux, OS X, or Windows. You write your app once and deploy to all supported platforms: Android, iOS, Linux, Mac, and Windows. The QML code works across platforms. For more information about platforms supported by ArcGIS Runtime SDK for Qt, see System requirements.

QML is a declarative language designed to build cross-platform apps. Similar to JavaScript or CSS, QML defines computation logic without defining the order of events, or a flow of actions. In QML you define what your app will accomplish, not how. Properties of individual QML components can be bound to the properties of any other QML component resulting in instant responses in your app's user interface without writing lengthy condition functions.

QML is a part of The Qt Company's Qt framework and is delivered in the form of the Qt Quick module. This module provides both a QML API, which supplies QML types for creating user interfaces with the QML language, and a C++ API for extending QML applications with C++ code.

QML syntax in brief

A QML file always starts with one or more import statements. These statements can be either a library, a relative directory, or a script file. Your QML file will typically start with the following code:

import QtQuick 2.3
import ArcGIS.Runtime 10.25

QML objects are specified by their type, followed by a pair of braces. Objects always begin with a capital letter, and between the braces you can specify information about the object, including properties, signals, or functions. The following example defines a blue rectangle with a width and height of 200.

Rectangle {
    id: rectangleBlue
    width: 200
    height: 200
    color: "blue"

Properties can be specified one per line or placed on a single line separated by a semicolon. Property values of one object can be bound to the property value of another object. The following example defines a red rectangle whose width and height are dependent upon those of the blue rectangle (defined above). The red rectangle is also anchored to the right of the blue rectangle.

Rectangle {
    id: rectangleRed
    width: rectangleBlue.width
    height: rectangleBlue.height
    color: "red"
    anchors.right: rectangleBlue.left

If any property changes, then all bound properties will change immediately.

For more information about QML, see The Qt Company at http://qt.io/.