summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/binding.qdoc
blob: 4f9bdc8494ebe52b56658c6e735ea728104ed6a6 (plain)
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
/****************************************************************************
**
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
** Contact: Qt Software Information (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the either Technology Preview License Agreement or the
** Beta Release License Agreement.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file.  Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Nokia gives you certain
** additional rights. These rights are described in the Nokia Qt LGPL
** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
** package.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3.0 as published by the Free Software
** Foundation and appearing in the file LICENSE.GPL included in the
** packaging of this file.  Please review the following information to
** ensure the GNU General Public License version 3.0 requirements will be
** met: http://www.gnu.org/copyleft/gpl.html.
**
** If you are unsure which license is appropriate for your use, please
** contact the sales department at qt-sales@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
\page binding.html
\title Data Binding in QML
\target binding

Data binding provides a declarative way of specifying the data associated with objects, as well as the relationship between data of different objects. For example, you could bind the text of a label to the value of a slider: as the value of the slider changed, the label would be automatically updated with the new value.

Bindings are created in QML when an expression is assigned to a property. For example, the following produces two rectangles of equal size (\c rect2 is bound to the size of \c rect1):
\code
Rectangle { id: rect1; width: 100; height: 100 }
Rectangle { id: rect2; width: rect1.width; height: rect1.height }
\endcode

There is also a special \l Binding element, which is typically used to bind from the UI to the underlying UI model (see \l {Passing Data Between C++ and QML} for an example of this). The bindings above could be expressed using the \l Binding element as:

\code
Binding { target: rect2; property: "width";  value: rect1.width }
Binding { target: rect2; property: "height"; value: rect1.height }
\endcode

In addition to binding directly to a property, you can also bind to the results of expressions involving properties. For example:
\code
Text { text: contact.firstname + ' ' + contact.lastname }
Image { source: if (contact.gender == "female") {"pics/female.png"} else {"pics/male.png"} }
\endcode

Relevant items can also be bound to the contents of a model - see \l ListView for an example of this.

Data can be bound to C++ objects - see \l {QML/C++ Data Binding}.
*/

/*!
\page qtbinding.html
\target qtbinding
\title QML/C++ Data Binding

The QML mechanisms of data binding can also be used to bind Qt C++ objects.

The data binding framework is based on Qt's property system (see the Qt documentation for more details on this system). If a binding is meant to be dynamic (where changes in one object are reflected in another object), \c NOTIFY must be specified for the property being tracked. If \c NOTIFY is not specified, any binding to that property will be an 'intialization' binding (the tracking object will be updated only once with the initial value of the tracked object).

Relevant items can also be bound to the contents of a Qt model.
For example, ListView can make use of data from a QAbstractItemModel-derived model.


\section1 Passing Data Between C++ and QML

Data binding provides one method of data transfer between C++ and QML.

For example, lets say you want to implement a slider in QML that changes the screen brightness of the device it is running on. You would start by declaring a brightness property on your QObject-derived class:
\code
class MyScreen : public QObject
{
    Q_OBJECT
public:
    MyScreen(QObject *parent=0);

    Q_PROPERTY(int brightness READ brightness WRITE setBrightness NOTIFY brightnessChanged);
    int brightness() const;
    void setBrightness(int b);
    ...

signals:
    void brightnessChanged();

private:
    int m_brightness;
};

int brightness() const
{
    return m_brightness;
}

void setBrightness(int b)
{
    if (b != m_brightness) {
        m_brightness = b;
        emit brightnessChanged();

        //set device brightness
        ...
    }
}
\endcode

\note One important thing to keep in mind is that the changed signal should only be emitted when there is a real change ( \c b \c != \c m_brightness ), or you may get an infinite loop.

Next, make an instance of this class visible to the QML bind engine:
\code
QmlView *view = new QmlView;
view->setUrl("MyUI.qml");

MyScreen *screen = new MyScreen;
QmlContext *ctxt = view->rootContext();
ctxt->setContextProperty("screen", screen);

view->execute();
\endcode

\note Bindings must be made after setUrl() but before execute().

Finally, in QML you can make the appropriate bindings, so in \c "MyUI.qml":

\code
Slider { value: screen.brightness }
Binding { target: screen; property: "brightness"; value: slider.value }
\endcode

The \l QBindableMap class provides a convenient way to make data visible to the bind engine.

C++ \l {qmlmodels}{Data Models} may also be provided to QML.

*/