[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)
       }
   }
}

}

@

QtWS: Super Early Bird Tickets Available!

[Solved] Qml component property accessing