How to move an QML object from one QML file to another, dynamically?

[TheIndependentAquarius]

This is the initial code:

import QtQuick 2.0
 
    Rectangle
    {
        id: container
        height: 300
        width: 300
 
        WindowA
        {
            x:0
            id: windowAId
            color: "green"
        }
 
        WindowB
        {
            id: windowBId
            anchors.top: windowAId.bottom
            anchors.topMargin: 10
            color: "black"
        }
 
        signal completed
 
        ListModel {
            id: fooModel
            ListElement { data: "red" }
        }
 
        Component.onCompleted: {
            console.log("Rect Completed!")
            container.completed()
        }
 
        Component
        {
            id: delg
            Item
            {
                Rectangle
                {
                    id: moveMe
                    height: 10; width: 10
                    border.width: 1; border.color: "black"
                    state: model.data
                    color: state
 
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            moveMe.state = (moveMe.state == "red" ? "blue" : "red")
                        }
                    }
 
                    states: [
                        State {
                            name: 'red'
                              ParentChange { target: moveMe; parent: windowAId; x: windowAId.x }
                        },
                        State {
                            name: 'blue'
                            ParentChange { target: moveMe; parent: windowBId; x: windowBId.x }
                        }
                    ]
                }
            }
        }
 
        Repeater {
            id: repeat
            model: fooModel
            delegate: delg
        }
    }

import QtQuick 2.0
    
    Rectangle
    {
        id: container
        height: 300
        width: 300
    
        WindowA
        {
            x:0
            id: windowAId
            color: "green"
        }
    
        WindowB
        {
            id: windowBId
            anchors.top: windowAId.bottom
            anchors.topMargin: 10
            color: "black"
        }
    
        signal completed
    
        ListModel {
            id: fooModel
            ListElement { data: "red" }
        }
    
        Component.onCompleted: {
            console.log("Rect Completed!")
            container.completed()
        }
    
        Component
        {
            id: delg
            Item
            {
                Rectangle
                {
                    id: moveMe
                    height: 10; width: 10
                    border.width: 1; border.color: "black"
                    state: model.data
                    color: state
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            moveMe.state = (moveMe.state == "red" ? "blue" : "red")
                        }
                    }
    
                    states: [
                        State {
                            name: 'red'
                              ParentChange { target: moveMe; parent: windowAId; x: windowAId.x }
                        },
                        State {
                            name: 'blue'
                            ParentChange { target: moveMe; parent: windowBId; x: windowBId.x }
                        }
                    ]
                }
            }
        }
    
        Repeater {
            id: repeat
            model: fooModel
            delegate: delg
        }
    }

To copy to clipboard, switch view to plain text mode 

It results in this:

2014-01-27-131146_1280x1024_scrot.png



How should I refer to WindowA and WindowB from this QML file if they are placed in a different QML file? (without using a loader)

[anda_skoa]

I am not sure I quite understand your question. WindowA and WindowB are already defined in seperate QML files, no? WindowA.qml and WindowB.qml respectively, right?

Cheers,
_

[TheIndependentAquarius]

I am not sure I quite understand your question. WindowA and WindowB are already defined in seperate QML files, no? WindowA.qml and WindowB.qml respectively, right?

Thanks for responding.
Yes, but they are being "used" in file X.qml with their "id" as "windowA" and "windowB".
How do I make the objects "windowA" and "windowB" (used in X.qml) a parent in this file (main.qml)?

am I clear now?

[anda_skoa]

I am not sure I understand, but if you instantiate WindowA and WindowB in another compenent but need access to them from outside that component, then this component must provide the access, e.g. something like

X.qml

Item {
   property Item windowA: WIndowA {}
   property Item windowB: WindowB {}
}

Item {
   property Item windowA: WIndowA {}
   property Item windowB: WindowB {}
}

To copy to clipboard, switch view to plain text mode 

main.qml

Item {
   X { id: x }
 
   anchors.right: x.windowA.right
}

Item {
   X { id: x }

   anchors.right: x.windowA.right
}

To copy to clipboard, switch view to plain text mode 

The real question will be, however, is this is a good design. A component is a natural encapsulation unit, it shouldn't be necessary to take things out of it.

Cheers,
_

[TheIndependentAquarius]

The real question will be, however, is this is a good design. A component is a natural encapsulation unit, it shouldn't be necessary to take things out of it.

Thankful for your hint.
I changed your code a bit and the following worked:

property Item windowA: windowAId
    property Item windowB: windowBId
 
    WindowA
    {
        x: 0
        id: windowAId
        color: "green"
        width: 70
        height: width
    }
 
    WindowB
    {
        y: 80
        id: windowBId
        color: "black"
    }

property Item windowA: windowAId
    property Item windowB: windowBId

    WindowA
    {
        x: 0
        id: windowAId
        color: "green"
        width: 70
        height: width
    }

    WindowB
    {
        y: 80
        id: windowBId
        color: "black"
    }

To copy to clipboard, switch view to plain text mode 

This is surely NOT a "meaningful" design, but the probelm is that we need to show a part of a video stream in one tab of our QML file and other part of the same stream in another tab.

We are using a newer version of this: http://gstreamer.freedesktop.org/dat...p-example.html

This thing "crashes" the whole application if we create two QML instances of it.
I even tried to use the "loader", but that didn't prevent it from crashing.
Now moving windows is the last option we have for preventing the application from crashing.