[844] | 1 | /****************************************************************************
|
---|
| 2 | **
|
---|
| 3 | ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
---|
| 4 | ** All rights reserved.
|
---|
| 5 | ** Contact: Nokia Corporation (qt-info@nokia.com)
|
---|
| 6 | **
|
---|
| 7 | ** This file is part of the documentation of the Qt Toolkit.
|
---|
| 8 | **
|
---|
| 9 | ** $QT_BEGIN_LICENSE:FDL$
|
---|
| 10 | ** Commercial Usage
|
---|
| 11 | ** Licensees holding valid Qt Commercial licenses may use this file in
|
---|
| 12 | ** accordance with the Qt Commercial License Agreement provided with the
|
---|
| 13 | ** Software or, alternatively, in accordance with the terms contained in a
|
---|
| 14 | ** written agreement between you and Nokia.
|
---|
| 15 | **
|
---|
| 16 | ** GNU Free Documentation License
|
---|
| 17 | ** Alternatively, this file may be used under the terms of the GNU Free
|
---|
| 18 | ** Documentation License version 1.3 as published by the Free Software
|
---|
| 19 | ** Foundation and appearing in the file included in the packaging of this
|
---|
| 20 | ** file.
|
---|
| 21 | **
|
---|
| 22 | ** If you have questions regarding the use of this file, please contact
|
---|
| 23 | ** Nokia at qt-info@nokia.com.
|
---|
| 24 | ** $QT_END_LICENSE$
|
---|
| 25 | **
|
---|
| 26 | ****************************************************************************/
|
---|
| 27 |
|
---|
| 28 | /*!
|
---|
| 29 | \page qdeclarativedocuments.html
|
---|
| 30 | \title QML Documents
|
---|
| 31 | \brief A description of QML documents and the kind of content they contain.
|
---|
| 32 |
|
---|
| 33 | \section1 Introduction
|
---|
| 34 |
|
---|
| 35 | A QML document is a block of QML source code. QML documents generally correspond to files
|
---|
| 36 | stored on a disk or at a location on a network, but they can also be constructed directly
|
---|
| 37 | from text data.
|
---|
| 38 |
|
---|
| 39 | Here is a simple QML document:
|
---|
| 40 |
|
---|
| 41 | \snippet doc/src/snippets/declarative/qml-documents/non-trivial.qml document
|
---|
| 42 |
|
---|
| 43 | QML documents are always encoded in UTF-8 format.
|
---|
| 44 |
|
---|
| 45 | A QML document always begins with one or more import statements. To prevent elements
|
---|
| 46 | introduced in later versions from affecting existing QML programs, the element types
|
---|
| 47 | available within a document are controlled by the imported QML \l {Modules}. That is,
|
---|
| 48 | QML is a \e versioned language.
|
---|
| 49 |
|
---|
| 50 | Syntactically a QML document is self contained; QML does \e not have a preprocessor that
|
---|
| 51 | modifies the document prior to presentation to the QML runtime. \c import statements
|
---|
| 52 | do not "include" code in the document, but instead instruct the QML runtime on how to
|
---|
| 53 | resolve type references found in the document. Any type reference present in a QML
|
---|
| 54 | document - such as \c Rectangle and \c ListView - including those made within an
|
---|
| 55 | \l {Inline JavaScript}{JavaScript block} or \l {Property Binding}s, are \e resolved based exclusively on the
|
---|
| 56 | import statements. QML does not import any modules by default, so at least one \c import
|
---|
| 57 | statement must be present or no elements will be available!
|
---|
| 58 |
|
---|
| 59 | Each \c id value in a QML document must be unique within that document. They
|
---|
| 60 | do not need to be unique across different documents as id values are
|
---|
| 61 | resolved according to the document scope.
|
---|
| 62 |
|
---|
| 63 |
|
---|
| 64 | \section1 Documents as Component Definitions
|
---|
| 65 |
|
---|
| 66 | A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}. A QML component
|
---|
| 67 | is a template that is interpreted by the QML runtime to create an object with some predefined
|
---|
| 68 | behaviour. As it is a template, a single QML component can be "run" multiple times to
|
---|
| 69 | produce several objects, each of which are said to be \e instances of the component.
|
---|
| 70 |
|
---|
| 71 | Once created, instances are not dependent on the component that created them, so they can
|
---|
| 72 | operate on independent data. Here is an example of a simple "Button" component (defined
|
---|
| 73 | in a \c Button.qml file) that is instantiated four times by \c application.qml.
|
---|
| 74 | Each instance is created with a different value for its \c text property:
|
---|
| 75 |
|
---|
| 76 | \table
|
---|
| 77 | \row
|
---|
| 78 | \o Button.qml
|
---|
| 79 | \o application.qml
|
---|
| 80 |
|
---|
| 81 | \row
|
---|
| 82 | \o \snippet doc/src/snippets/declarative/qml-documents/qmldocuments.qml document
|
---|
| 83 | \o
|
---|
| 84 | \qml
|
---|
| 85 | import QtQuick 1.0
|
---|
| 86 |
|
---|
| 87 | Column {
|
---|
| 88 | spacing: 10
|
---|
| 89 |
|
---|
| 90 | Button { text: "Apple" }
|
---|
| 91 | Button { text: "Orange" }
|
---|
| 92 | Button { text: "Pear" }
|
---|
| 93 | Button { text: "Grape" }
|
---|
| 94 | }
|
---|
| 95 | \endqml
|
---|
| 96 |
|
---|
| 97 | \image anatomy-component.png
|
---|
| 98 |
|
---|
| 99 | \endtable
|
---|
| 100 |
|
---|
| 101 | Any snippet of QML code can become a component, just by placing it in the file "<Name>.qml"
|
---|
| 102 | where <Name> is the new element name, and begins with an \bold uppercase letter. Note that
|
---|
| 103 | the case of all characters in the <Name> are significant on some filesystems, notably
|
---|
| 104 | UNIX filesystems. It is recommended that the case of the filename matches the case of
|
---|
| 105 | the component name in QML exactly, regardless of the platform the QML will be deployed to.
|
---|
| 106 |
|
---|
| 107 | These QML component files automatically become available as new QML element types
|
---|
| 108 | to other QML components and applications in the same directory.
|
---|
| 109 |
|
---|
| 110 |
|
---|
| 111 |
|
---|
| 112 | \section1 Inline Components
|
---|
| 113 |
|
---|
| 114 | In addition to the top-level component that all QML documents define, and any reusable
|
---|
| 115 | components placed in separate files, documents may also
|
---|
| 116 | include \e inline components. Inline components are declared using the
|
---|
| 117 | \l Component element, as can be seen in the first example above. Inline components share
|
---|
| 118 | all the characteristics of regular top-level components and use the same \c import list as their
|
---|
| 119 | containing QML document. Components are one of the most basic building blocks in QML, and are
|
---|
| 120 | frequently used as "factories" by other elements. For example, the \l ListView element uses the
|
---|
| 121 | \c delegate component as the template for instantiating list items - each list item is just a
|
---|
| 122 | new instance of the component with the item specific data set appropriately.
|
---|
| 123 |
|
---|
| 124 | Like other \l {QML Elements}, the \l Component element is an object and must be assigned to a
|
---|
| 125 | property. \l Component objects may also have an object id. In the first example on this page,
|
---|
| 126 | the inline component is added to the \l Rectangle's \c resources list, and then
|
---|
| 127 | \l {Property Binding} is used to assign the \l Component to the \l ListView's \c delegate
|
---|
| 128 | property. While using property binding allows the \l Component object to be shared (for example,
|
---|
| 129 | if the QML document contained multiple \l ListView's with the same delegate), in this case the
|
---|
| 130 | \l Component could have been assigned directly to the \l ListView's \c delegate. The QML
|
---|
| 131 | language even contains a syntactic optimization when assigning directly to a component property
|
---|
| 132 | for this case where it will automatically insert the \l Component tag.
|
---|
| 133 |
|
---|
| 134 | These final two examples are behaviorally identical to the original document.
|
---|
| 135 |
|
---|
| 136 | \table
|
---|
| 137 | \row
|
---|
| 138 | \o
|
---|
| 139 | \snippet doc/src/snippets/declarative/qml-documents/inline-component.qml document
|
---|
| 140 | \o
|
---|
| 141 | \snippet doc/src/snippets/declarative/qml-documents/inline-text-component.qml document
|
---|
| 142 | \endtable
|
---|
| 143 |
|
---|
| 144 | \sa QDeclarativeComponent
|
---|
| 145 | */
|
---|