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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
/****************************************************************************
**
** 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-essentials.html
\title Quick Start Guide - QML Essentials
\brief Essential QML application development examples
\section1 Handling User Input
One of the great advantages of using QML to define a user interface is that it
allows the user interface designer to define how the application should react
to events with simple JavaScript expressions. In QML, we refer to those events
as \l{Signal and Handler Event System}{signals} and such signals can be handled
with \l{qml-signals-and-handlers}{signal handlers}.
For example, consider the following example:
\qml
import QtQuick 2.0
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
MouseArea {
anchors.fill: parent
onClicked: parent.color = "blue"
}
}
\endqml
This example can be saved as "ClickableHelloWorld.qml" and run with qmlscene.
Whenever the user clicks anywhere in the window, the rectangle will change
from red to blue. Note that the \l MouseArea type also emits the clicked
signal for touch events, so this code will also work on a mobile device.
Keyboard user input can be similarly handled with a simple expression:
\qml
import QtQuick 2.0
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
focus: true
Keys.onPressed: {
if (event.key == Qt.Key_Return) {
color = "blue";
event.accepted = true;
}
}
}
\endqml
By accepting focus, the color can be changed to blue whenever the return key
is pressed.
\section1 Property Bindings
Objects and their properties form the basis of a graphical interface defined
in a QML document. The QML language allows properties to be bound to each
other in various ways, enabling highly dynamic user interfaces.
In the following example, the geometry of each child \l Rectangle is bound to
that of the parent \l Rectangle. If the geometry of the parent \l Rectangle
were to change, the geometry of each child \l Rectangle would automatically
update due to the property bindings.
\qml
import QtQuick 2.0
Rectangle {
width: 400
height: 200
Rectangle {
width: parent.width / 2
height: parent.height
}
Rectangle {
width: parent.width / 2
height: parent.height
x: parent.width / 2
}
}
\endqml
\section1 Animations
Properties can also be dynamically updated via animations. The \c QtQuick
import provides various animation types which can be used to animate changes
to a property's value. In the following example, a property is animated which
then gets displayed in a \l Text area:
\qml
import QtQuick 2.0
Rectangle {
color: "lightgray"
width: 200
height: 200
property int animatedValue: 0
SequentialAnimation on animatedValue {
loops: Animation.Infinite
PropertyAnimation { to: 150; duration: 1000 }
PropertyAnimation { to: 0; duration: 1000 }
}
Text {
anchors.centerIn: parent
text: animatedValue
}
}
\endqml
The value being displayed will vary from 0 to 150 periodically.
\section1 Defining Custom QML Types for Re-use
One of the most important concepts in QML is that of type re-use. An
application will probably have multiple visual elements which are all similar
(for example, multiple push buttons), and QML allows these sort of things to
be defined as re-usable, custom types, to minimize code duplication and
maximize readability.
For example, imagine that the developer defines a new \c Button type in the
\c Button.qml file:
\snippet qml/qml-extending-types/components/Button.qml 0
That type may now be re-used multiple times in the application, as follows:
\table
\row
\li \snippet qml/qml-extending-types/components/application.qml 0
\li \image qml-extending-types.png
\endtable
In this way, modular user interface elements can be built up and re-used within
an application.
See \l {QML Object Attributes}
for more details on how to develop your own reusable components.
*/
|
