QML DocumentsA 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: 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 with a corresponding version. QML does not have a preprocessor that modifies the document prior to presentation to the QML engine, unlike C or C++. The import statements do not copy and prepend the code in the document, but instead instruct the QML engine 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. At least one import statement must be present such as import QtQuick 2.0. 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. Documents as Component DefinitionsA QML document defines a single, top-level QML component. A QML component is a template that is interpreted by the QML engine to create an object with some predefined behaviour. As it is a template, a single QML component can be "run" multiple times to produce several objects, each of which are said to be instances of the component. Once created, instances are not dependent on the component that created them, so they can operate on independent data. Here is an example of a simple "Button" component (defined in a Button.qml file) that is instantiated four times by application.qml. Each instance is created with a different value for its text property:
Any snippet of QML code can become a component, just by placing it in the file "<Name>.qml" where <Name> is the component name, and begins with an uppercase letter. Note that the case of all characters in the <Name> are significant on some filesystems, notably UNIX filesystems. It is recommended that the case of the filename matches the case of the component name in QML exactly, regardless of the platform the QML will be deployed to. These QML component files automatically become available as new QML element types to other QML components and applications in the same directory. The QML Components article details the creation of components and how to load them in other components. Inline ComponentsIn addition to the top-level component that all QML documents define, and any reusable components placed in separate files, documents may also include inline components. Inline components are declared using the Component element, as can be seen in the first example above. Inline components share all the characteristics of regular top-level components and use the same import list as their containing QML document. Components are one of the most basic building blocks in QML, and are frequently used as "factories" by other elements. For example, the ListView element uses the delegate component as the template for instantiating list items - each list item is just a new instance of the component with the item specific data set appropriately. Like other QML Elements, the Component element is an object and must be assigned to a property. Component objects may also have an object id. In the first example on this page, the inline component is added to the Rectangle's resources list, and then Property Binding is used to assign the Component to the ListView's delegate property. The QML language even contains a syntactic optimization when assigning directly to a component property for this case where it will automatically insert the Component tag. This means that by enclosing components in a Component element, we can assign an id to the component and use the component elsewhere These final two examples perform identically to the original document. For information about components, the QML Components article details the creation of components and how to load them in other components. See also QQmlComponent. |