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
|
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial Usage
** Licensees holding valid Qt Commercial licenses may use this file in
** accordance with the Qt Commercial License Agreement provided with the
** Software or, alternatively, in accordance with the terms contained in a
** written agreement between you and Nokia.
**
** GNU Free Documentation License
** 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.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page propertybinding.html
\title Property Binding
Property binding is a declarative way of specifying the value of a property. Binding allows
a property's value to be expressed as an JavaScript expression that defines the value relative
to other property values or data accessible in the application. The property value is
automatically kept up to date if the other properties or data values change.
Property bindings are created implicitly in QML whenever a property is assigned an JavaScript
expression. The following QML uses two property bindings to connect the size of the rectangle
to that of \c otherItem.
\code
Rectangle {
width: otherItem.width
height: otherItem.height
}
\endcode
QML extends a standards compliant JavaScript engine, so any valid JavaScript expression can be
used as a property binding. Bindings can access object properties, make function calls and even
use builtin JavaScript objects like \e {Date} and \e {Math}. Assigning a constant value to a
property can even be thought of as a binding - afterall, a constant is a valid JavaScript
expression! Here are some examples of more complex bindings:
\code
Rectangle {
function calculateMyHeight() {
return Math.max(otherItem.height, thirdItem.height);
}
anchors.centerIn: parent
width: Math.min(otherItem.width, 10)
height: calculateMyHeight()
color: { if (width > 10) "blue"; else "red" }
}
\endcode
While syntactically bindings can be of arbitrary complexity, if a binding starts to become
overly complex - such as involving multiple lines, or imperative loops - it may be better
to refactor the component entirely, or at least factor the binding out into a separate
function.
\section1 Changing Bindings
The \l PropertyChanges element can be used within a state change to modify the bindings on
properties.
This example modifies the \l Rectangle's width property binding to be \c {otherItem.height}
when in the "square" state. When it returns to its default state, width's original property
binding will have been restored.
\code
Rectangle {
id: rectangle
width: otherItem.width
height: otherItem.height
states: State {
name: "square"
PropertyChanges {
target: rectangle
width: otherItem.height
}
}
}
\endcode
Imperatively assigning a value directly to a property will also implicitly remove a binding
on a property. A property can only have one value at a time, and if code explicitly sets
this value the binding must be removed. The \l Rectangle in the example below will have
a width of 13, regardless of the otherItem's width.
\code
Rectangle {
width: otherItem.width
Component.onCompleted: {
width = 13;
}
}
\endcode
There is no way to create a property binding directly from imperative JavaScript code.
\section1 Binding Element
The implicit binding syntax shown previously is easy to use and works perfectly for most uses
of bindings. In some advanced cases, it is necessary to create bindings explicitly using the
\l Binding element.
For example, to bind a property exposed from C++ (\c system.brightness) to a value
coming from QML (\c slider.value), you could use the Binding element as follows:
\qml
Binding {
target: system
property: "brightness"
value: slider.value
}
\endqml
*/
|
