1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquick-quickstart-basics.html
\title Quick Start Guide - QML Basics
\brief Basic QML application development examples
\section1 Creating a QML Document
A QML document defines a hierarchy of objects with a highly-readable,
structured layout. Every QML document consists of two parts: an imports
section and an object declaration section. The types and functionality most
common to user interfaces are provided in the \l{QtQuick}
import.
\section2 Importing and Using the QtQuick Module
To use the \l{QtQuick} module, a QML document needs to
import it. The import syntax looks like this:
\qml
import QtQuick 2.0
\endqml
The types and functionality that \l{QtQuick} provides can now
be used in the QML document!
\section2 Defining an Object Hierarchy
The object declaration in a QML document defines what will be displayed in the
visual scene. \l{QtQuick} provides the basic building blocks
for all user interfaces, including objects to display images and text, and to
handle user input.
A simple object declaration might be a colored rectangle with some text centered
in it:
\qml
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
}
\endqml
This defines an object hierarchy with a root \l Rectangle object
which has a child \l Text object. The \c parent of the \l Text object is
automatically set to the \l Rectangle, and similarly, the \l Text object is
added to the \c children property of the \l Rectangle object, by QML.
\section2 Putting it Together
The \l Rectangle and \l Text types used in the above example are both provided
by the \l{QtQuick} import. To use them, we need to import
\l{QtQuick}. Putting the import and object declaration
together, we get a complete QML document:
\qml
import QtQuick 2.0
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
}
\endqml
If we save that document as "HelloWorld.qml" we can load and display it.
\section1 Loading and Displaying the QML Document
To display the graphical scene defined by the QML document, it may be loaded
with the \l{Prototyping with qmlscene}{qmlscene} tool. The
\l{Prototyping with qmlscene}{qmlscene} tool should be installed into the
Qt installation directory. Assuming that the Qt binaries are installed into
or are available in the system executable path, you can display the QML
document with the following command:
\code
qmlscene HelloWorld.qml
\endcode
You should see the text "Hello, World!" in the center of a red rectangle.
*/
|
