[Solved] Qml component property accessing

[aniljoby]

I have two qml files namely rect.qml and a main.qml. When i clicked the mouse area region of main.qml a rectangle having size, color from rect.qml is created in main.It is fine.The rect.qml have the ability to increase/decrease the width of the rectangle too.

I want to save the width into variables created in main.qml. If I created two rectangles and saved its width into two variables,and if i select the first rectangle and resized, it should be updated to its own variable.

main.qml
@import QtQuick 2.0

Item{
id:root
width: 640
height: 540
property int w1 //to get the width of first rectangle
property int w2 //to get the width of second rectangle
Rectangle {
id:rect
anchors.fill: parent
MouseArea {
anchors.fill: parent
onClicked: {
Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY})

//what to do here?
/Also if changed the width of any of the two rectangles, the corresponding variable should get updated/

}
}

}
}

@

Rect.qml
@

import QtQuick 2.0

Rectangle {
id: rect
color: "yellow"
width: 50
height: 50
MouseArea {
id: right

    width: 8
    height: parent.height
    anchors.right: parent.right
   
    property int oldMouseX
    hoverEnabled: true
    onPressed: {
        oldMouseX = mouseX
    }

    onPositionChanged: {
       if (pressed) {
          rect.width = rect.width + (mouseX - oldMouseX)
       }
   }
}

}

@

[p3c0]

Hi,

Would there be fixed amount of Rectangles ?
I'm asking since if they are limited you can create those many variables in main.qml and access the required variable directly from Rect.qml.
You can assign the variable a new value in Rect.qml here:
@
onPositionChanged: {
if (pressed) {
rect.width = rect.width + (mouseX - oldMouseX)
w1 = rect.width // for first rectangle
}
}
@

[aniljoby]

But if i have 5 rectangles what to do?
My requirement is that, if the width of any one of the 5 rectangle is changed after creating all the 5, the corresponding variable should be get updated,how to do that...
and thanks for your reply....

[p3c0]

So to make it more dynamic you can create a array in main.qml and access that array from the Rect.qml to store the corresponding widths.
To create an array,
@
property var rectWidths : []
@

[aniljoby]

OK.
If i edit one of the rectangles' width after creating all the five. Will that width will be updated in the corresponding memory of the array

[p3c0]

You will need to update the corresponding element in the array from the Rect of which you are modifying the width.

[aniljoby]

Sir can you please edit the code with this concept (you said right now). I don't know how to code that.Hope you help.
I am looking forward for your kind reply.

[p3c0]

Here,
main.qml
@
import QtQuick 2.0

Item{
id:root
width: 640
height: 540
//property int w1 //to get the width of first rectangle
//property int w2 //to get the width of second rectangle
property var rectWidths : []
property int index: 0
Rectangle {
id:rect
anchors.fill: parent
MouseArea {
anchors.fill: parent
onClicked: {

            Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY, index: index++})
       }
    }
}

Rectangle { //click on this to get updated rect widths from array
    color: "red"
    width: 40
    height: 40
    MouseArea {
        anchors.fill: parent
        onClicked: {
            for(var i=0;i<rectWidths.length;i++)
                console.log("Width of Rect no",i,"is",rectWidths[i])
        }
    }
}

}
@

And,
Rect.qml
@
import QtQuick 2.0

Rectangle {
id: rect
color: "yellow"
width: 50
height: 50

property alias index: rect.itemId
property int itemId

MouseArea {
    id: right

    width: 8
    height: parent.height
    anchors.right: parent.right

    property int oldMouseX
    hoverEnabled: true
    onPressed: {
        oldMouseX = mouseX
    }

    onPositionChanged: {
        if (pressed) {
            rect.width = rect.width + (mouseX - oldMouseX)
            rectWidths[itemId] = rect.width
        }
    }
}

}
@

Hope this is what you expect.

[aniljoby]

Thank you very much.....

[p3c0]

You are Welcome :)
So, if you think the question is solved you can mark it as solved by editing the thread title and prepend [Solved].

[aniljoby]

main.qml
@import QtQuick 2.0

Item{
id:root
width: 640
height: 540
property int count:0
property var rectangle:[]

Rectangle {
id:rect
anchors.fill: parent
MouseArea {
anchors.fill: parent
onClicked: {

rectangle[count]=Qt.createComponent("Rect.qml").createObject(parent, {x: mouseX, y: mouseY})

count++

//here we can create number of rectangles,
//rectangle[0].width will have the width of first rectangle
//rectangle[0].height will have the height of first rectangle
//rectangle[0].x will have the xpos of first rectangle
//rectangle[0].y will have the ypos of first rectangle
/editing a rectangle after its creation will be automatically updated in the corresponding array,so we need not to be care about that/
//count will have number of rectangles created

}
}

}
}

@

Rect.qml
@

import QtQuick 2.0

Rectangle {
id: rect
color: "yellow"
width: 50
height: 50
MouseArea {
id: right

    width: 8
    height: parent.height
    anchors.right: parent.right
   
    property int oldMouseX
    hoverEnabled: true
    onPressed: {
        oldMouseX = mouseX
    }

    onPositionChanged: {
       if (pressed) {
          rect.width = rect.width + (mouseX - oldMouseX)
       }
   }
}

}

@