Using a Qml component property for read/write access of a value without killing bindings

[njeisecke]

Please have a look at the following code:

main.qml

@
import QtQuick 1.0

Rectangle {
width: 500
height: 200

Column {
Text { text: "Slider 1 " + slider1.value }
Slider { id: slider1; value: slider2.value; minimum: 0; maximum: 10; }
Text { text: "Slider 2 (drag me to set value 1, too)" + slider2.value }
Slider { id: slider2; minimum: 0; maximum: 10; }

Text { text: "Text 1 " + text1.text }
TextInput { height: 20; width: 200; id: text1; text: text2.text; }
Text { text: "Text 2 (text entered here will show in Text 1, too)" + text2.text }
TextInput { height: 20; width: 200; id: text2 }

}
}
@

Slider.qml

@
import QtQuick 1.0

Item {

property alias value: slider.value
property alias minimum: slider.minimum
property alias maximum: slider.maximum
width: slider.width
height: slider.height

Item {
id: slider; width: 400; height: 16

// value is read/write.
property real value: 1
onValueChanged: updatePos();
property real maximum: 1
property real minimum: 1
property int xMax: width - handle.width - 4
onXMaxChanged: updatePos();
onMinimumChanged: updatePos();

function updatePos() {
  console.log("update pos")
  if (maximum > minimum) {
    var pos = 2 + (value - minimum) * slider.xMax / (maximum - minimum);
    pos = Math.min(pos, width - handle.width - 2);
    pos = Math.max(pos, 2);
    handle.x = pos;
  } else {
    handle.x = 2;
  }
}

Rectangle {
  anchors.fill: parent
  border.color: "white"; border.width: 0; radius: 8
  gradient: Gradient {
    GradientStop { position: 0.0; color: "#66343434" }
    GradientStop { position: 1.0; color: "#66000000" }
  }
}

Rectangle {
  id: handle; smooth: true
  y: 2; width: 30; height: slider.height-4; radius: 6
  gradient: Gradient {
    GradientStop { position: 0.0; color: "lightgray" }
    GradientStop { position: 1.0; color: "gray" }
  }

  MouseArea {
    id: mouse
    anchors.fill: parent; drag.target: parent
    drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: slider.xMax+2
    onPositionChanged: { value = (slider.maximum - slider.minimum) * (handle.x-2) / slider.xMax + slider.minimum; }
  }
}

}
}
@

The slider is basically taken from some example.

Now please try the following:

• Use slider2 to adjust the value
• See how slider1 will display the same value as slide2 (due to the binding in main.qml:9)
• Now use slider1 to adjust the value
• Now use slider2 again => binding is removed (due to Slider.qml:56)

This seems to be a problem with bindings for all components written in Qml that use the same property for read and write access of some value.

The interesting thing is that I tried to do basically the same with a TextInput instead of the custom slider. And guess what, it works there. The binding is not lost.

Now TextInput is a component implemented in c++. So it does not actually assign a value to its text property but rather has a getter method and a notifier signal.

My question now is: How can i achieve this behaviour for Qml components too?

Thanks

Nils

[andre]

Did you look into using the Binding element?

[njeisecke]

Hi Andre,

yes. But I cannot see how Binding solves this problem.

I've also had a look at some of the Meego/Symbian components. They do basically the same as the Slider example, killing any binding as soon as the component modifies its own value property.

See http://qt.gitorious.org/qt-components/qt-components/blobs/master/src/meego/CheckBox.qml.

My motivation for doing this kind of stuff is:

• I have a settings object containing some settings
• I want to bind the component's value property to the value of the settings object
• Changes in the settings object's values (from somewhere else) will now automatically update the Qml components
• Of course this only works as long as the binding exists

This is somewhat related to: http://developer.qt.nokia.com/forums/viewthread/1779/

I was hoping the binding mechanism would simplify the old way of doing stuff like this:

@
void MyDialog::settingsToWidgets()
{
ui->textEdit->setText(m_settings.someText());
ui->slider->setValue(m_settings.someValue());
}

void MyDialog::widgetsToSettings()
{
m_settings.setSomeText(ui->textEdit->text());
m_settings.setSomeValue(ui->slider->value());
}
@

Thank you

Nils

[minimoog77]

In Qt Quick 1.1 you can establish binding in imperative JS code... See http://developer.qt.nokia.com/forums/viewthread/5494/