[Qt-qml] One question about binding in JavaScript

[Zharkyn Kassenov]

I have one problem with dynamiccaly binding, I checked the documentation, but has not found needed information. If you have a time, please help me, because I wish to write the program with use qml.

Simple example:

//Rect element Rect.qml
//Rectangle with binding elements for height and width property of container

import Qt 4.7

Item {
    id: container
    width: 50
    height: 24
    property alias color: rectangle.color
    property alias bHeight: bindHeight.value
    property alias bWidth: bindWidth.value

    Rectangle{
        id: rectangle
        border.color:"Gainsboro"
        anchors.fill:parent
        color: "white"
    }

    Binding {
        id: bindHeight
        target: container
        property: "height"
        value: container.height
     }

    Binding {
        id: bindWidth
        target: container
        property: "width"
        value: container.width
     }
}

//Now I try dynamic create three Rects (top, left and central) and binding they properties with next goal:
//if width property of "top Rect" or height property of "left Rect" change, then changing height or width property of "central Rect".

//untitled.qml

import Qt 4.7

Rectangle {
    id: scene
    width: 200
    height: 200

    MouseArea {
        id: mouse
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
             rects.topRect.width=rects.topRect.width/2;
             rects.leftRect.height=rects.leftRect.height/2;
        }
    }

    function rects(){}

    Component.onCompleted: {
        rects.centralRect=0, rects.topRect=0, rects.leftRect=0;
        var component;

        //creating central rectangle
        if(component==null) component = Qt.createComponent("Rect.qml" ;
        if(component.status == Component.Ready)
        {
            rects.centralRect = component.createObject(scene);
            rects.centralRect.color="blue";
        } else {
            console.log("error loading cell component" ;
            console.log(component.errorString());
            return false;
        }

         //creating top rectangle
        if(component==null) component = Qt.createComponent("Rect.qml" ;
        if(component.status == Component.Ready)
        {
            rects.topRect = component.createObject(scene);
            rects.topRect.color="green";
        } else {
            console.log("error loading cell component" ;
            console.log(component.errorString());
            return false;
        }

          //creating left rectangle
        if(component==null) component = Qt.createComponent("Rect.qml" ;
        if(component.status == Component.Ready)
        {
            rects.leftRect = component.createObject(scene);
            rects.leftRect.color="yellow";
        } else {
            console.log("error loading cell component" ;
            console.log(component.errorString());
            return false;
        }
            //anchors
        rects.topRect.anchors.left=rects.leftRect.right;
        rects.leftRect.anchors.top=rects.topRect.bottom;
        rects.centralRect.anchors.top=rects.topRect.bottom;
        rects.centralRect.anchors.left=rects.leftRect.right;

        //binding
        rects.centralRect.bHeight = rects.leftRect.height;
        rects.centralRect.bWidth = rects.topRect.width;
    }
}

It not work.

In really project the borders of top and left Rect its draged with mouse and hight and width of central Rect will be dynamically changing.

What is wrong I do?