[Solved] Reparent an item to an another from an other file

VTiTux

I want to use 'ParentChange' for reparenting my item to an another.
This works fine if my item and the new parent is into the same QML file, but, for improving the reading of my application, I want to move my item to an other file (this item is for debuging only).
But if I move my item and the ParentChange component, this doesn't work any more. QML don't known the id of the new parent, localized into an other file.
How can I do that?

stevenceuppens

Hi,

Can you post a small code example?

VTiTux

Yes:, my code looks like that:
@
Rectangle{
id: developpmentView

Item{
    id: application

    Rectangle{
        id: draggableItem
        ...
    }
}


Button{
    text: "Debug"
    property bool activeDebug: false
    onClicked: {
        if( !activeDebug ){
            activeDebug = true
            debugLoader.sourceComponent = debugItem
        }else{
            activeDebug = false
            debugLoader.sourceComponent = undefined
        }
    }
}

Loader: {
    id: debugLoader
}

Component{
    id: debugItem
    Rectangle{
        id: debugZone
        anchors.fill: parent
        z: 10
        opacity: 0.3
        color: "lightBlue"
        states: State{
            name: "reparented"
            ParentChange{
                target: debugZone

(1) parent: draggableItem
(2) x: draggableItem.x
(3) y: draggableItem.y
(4) width: draggableItem.width
(5) height: draggableItem.height
(6) scale: draggableItem.scale
}
Component.onCompleted: {
debugZone.state = "reparented"
}
}
}
}

}
@

This works, but if I move all my developpementView to an other file, I have this message:
@line (1): ReferenceError: draggableItem is not defined
@

For lines 2, 3, ..., 6, I can write alias to access to these properties, but for the parent, I don't know how to make.

stevenceuppens

You can use:

@property alias someName: someItem@

I created a quick example based on your code

main.qml
@
import QtQuick 2.1
import QtQuick.Controls 1.1

Rectangle{
id: developmentView

width: 600
height: 400

MyApp {
    id: myApp
    anchors.fill: parent
}

Button{
    text: "Debug"
    property bool activeDebug: false
    onClicked: {
        if( !activeDebug ){
            activeDebug = true
            debugLoader.sourceComponent = debugItem
        }else{
            activeDebug = false
            debugLoader.sourceComponent = undefined
        }
    }
}

Loader {
    id: debugLoader
    anchors.fill: parent
}

Component{
    id: debugItem
    Rectangle{
        id: debugZone
        anchors.fill: parent
        z: 10
        opacity: 0.3
        color: "lightBlue"
        states: State{
            name: "reparented"
            ParentChange{
                target: debugZone
                parent: myApp.targetItem
                x: myApp.targetItem.x
                y: myApp.targetItem.y
                width: myApp.targetItem.width
                height: myApp.targetItem.height
                scale: myApp.targetItem.scale
            }
            Component.onCompleted: {
                debugZone.state = "reparented"
            }
        }
    }
}

}
@

MyApp.qml
@
import QtQuick 2.0

Item{
id: application

property alias targetItem: draggableItem

Rectangle{
    id: draggableItem

    width: 100
    height: 100

    x: parent.width / 2
    y: parent.height / 2

    border.color: "red"

    MouseArea {
        anchors.fill: parent
        drag.axis: Drag.XAndYAxis
        drag.target: parent
    }
}

}
@

VTiTux

Thanks you very much.
It's works.

I didn't know that we can use alias with items.