QML Documents

A QML document is a block of QML source code. QML documents generally correspond to files stored on a disk or at a location on a network, but they can also be constructed directly from text data.

Here is a simple QML document:

 import QtQuick 1.0

 Rectangle {
     width: 240; height: 320;

     resources: [
         Component {
             id: contactDelegate
             Text {
                 text: modelData.firstName + " " + modelData.lastName
             }
         }
     ]

     ListView {
         anchors.fill: parent
         model: contactModel
         delegate: contactDelegate
     }
 }

QML documents are always encoded in UTF-8 format.

A QML document always begins with one or more import statements. To prevent elements introduced in later versions from affecting existing QML programs, the element types available within a document are controlled by the imported QML Modules. That is, QML is a versioned language.

Syntactically a QML document is self contained; QML does not have a preprocessor that modifies the document prior to presentation to the QML runtime. import statements do not "include" code in the document, but instead instruct the QML runtime on how to resolve type references found in the document. Any type reference present in a QML document - such as Rectangle and ListView - including those made within an JavaScript block or Property Bindings, are resolved based exclusively on the import statements. QML does not import any modules by default, so at least one import statement must be present or no elements will be available!

Each id value in a QML document must be unique within that document. They do not need to be unique across different documents as id values are resolved according to the document scope.

 import QtQuick 1.0

 Rectangle {
     property alias text: textItem.text

     width: 100; height: 30
     border.width: 1
     radius: 5
     smooth: true

     gradient: Gradient {
         GradientStop { position: 0.0; color: "darkGray" }
         GradientStop { position: 0.5; color: "black" }
         GradientStop { position: 1.0; color: "darkGray" }
     }

     Text {
         id: textItem
         anchors.centerIn: parent
         font.pointSize: 20
         color: "white"
     }

 }

 import QtQuick 1.0

 Column {
     spacing: 10

     Button { text: "Apple" }
     Button { text: "Orange" }
     Button { text: "Pear" }
     Button { text: "Grape" }
 }

 import QtQuick 1.0

 Rectangle {
     width: 240; height: 320;

     ListView {
         anchors.fill: parent
         model: contactModel
         delegate: Component {
             Text {
                 text: modelData.firstName + " " + modelData.lastName
             }
         }
     }
 }

 import QtQuick 1.0

 Rectangle {
     width: 240; height: 320;

     ListView {
         anchors.fill: parent
         model: contactModel
         delegate: Text {
             text: modelData.firstName + " " + modelData.lastName
         }
     }
 }