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
|
/*!
\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 QListModelInterface-derived model. (QListModelInterface is part of the next generation Model/View architecture being developed for Qt.)
\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
QFxView *view = new QFxView;
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.
*/
|
