doc/src/qtquick1/qdeclarativedocument.qdoc

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