binding two elements from two different qml files

Question

I am trying to bind two dial elements such that if the dial1 value is changed, the same value will be reflected in dial2 which is in another qml.

QML is new to me and I don't know much of the aspect. But I want to use pure QML on this and no C, C++ for these thing.

//file1.qml

dial{
id: dial1
}



//file2.qml

dial{
 id: dial2
 }

Secondly, I want to have two way binding for same scenario to happen.

There is no such concepts - different files. QML application is a tree of QML objects. So if you have some qml file that doesn't mean this object in the tree. It just a prototype so you should create instance of this object first. Show us how your 2 objects and so relation between them. — folibis, Jun 15 '17 at 19:40
I don't know exactly what are you trying to accomplish, but you could create both components in the same file (let's say main.qml). Then you could bind their properties to the same property created in main.qml. Any modifications will be reflected on both components. — Felipe Centeno, Jun 15 '17 at 19:43
@folibis I have `//CustomDial.qml` and then I am using this component `CustomDial{ }` as **object in two places** of the different TAB pages. I have each separate qml file for each Tab. Now I want to connect this both `CustomDial Object` which is in two different tab such that if one changed so is the other will be changed . — ryuk, Jun 15 '17 at 20:38

derM - not here for BOT dreams · Accepted Answer · 2017-06-15T21:58:33.183

At some place you will instantiate both files. Let's assume it is a TabView. This is the point where you will make the connection between the two files by adding a property to the TabView that will hold the shared value.
The pro of having the sharedValue is, that the time where the two files will be instantiated can be different, so if you destroy the instance of file1 and create the instance of file2 a couple of minutes later, you can still have the value.

TabView {
    property int sharedValue
    File1 {
        id: file1
    }
    File2 {
        id: file2
    }
}

Then you read this on bidirectional bindings and bind the two exposed values of the dials to the shared value. You can alternatively omit the property sharedValue and install the bidirectional binding between both exposed values directly.

What is necessary, of course, is that you expose the value of the dial, so your files would need to look

Tab {
    property alias dialValue: dial.value // now you can access the dial's value via this new property.
    CustomDial {
        id: dial
    }
}

As long as you don't alter the values in the binding, I reccommend to use two Binding-Object to install the bidirectional binding.

Your explanation helped me out to learn this two way binding concept. I actually forgot that I have TabView and this screwed me up. Keep up the good work. Thank you. — ryuk, Jun 16 '17 at 17:41

binding two elements from two different qml files

1 Answers1