[Qt-qml] One question about binding in JavaScript

[tapani.mikola at nokia.com]

At least doing the binding via two new properties work like this:

Rect.qml
=========

import Qt 4.7

Rectangle {
    id: rectangle
    width: 50
    height: 24
    border.color:"Gainsboro"
    color: "white"
}


and the main qml file:
==============

import Qt 4.7

Rectangle {
    id: scene
    width: 200
    height: 200
    property real bWidth: 50
    property real bHeight: 24

    MouseArea {
        id: mouse
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
             bWidth = bWidth/2;
             bHeight = bHeight/2;
        }
    }

    function rects(){}

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

        //creating central rectangle
        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
        var bindObj = Qt.createQmlObject("import Qt 4.7; Binding {value: bWidth}", scene)
        if (bindObj) {
            bindObj.target = rects.centralRect
            bindObj.property = "width"
        }
        else {
            console.log("error creating binding component") ;
            console.log(bindObj.errorString());
            return false;
        }
        bindObj = Qt.createQmlObject("import Qt 4.7; Binding {value: bWidth}", scene)
        if (bindObj) {
            bindObj.target = rects.topRect
            bindObj.property = "width"
        }
        else {
            console.log("error loading binding component") ;
            console.log(bindObj.errorString());
            return false;
        }
        bindObj = Qt.createQmlObject("import Qt 4.7; Binding {value: bHeight}", scene)
        if (bindObj) {
            bindObj.target = rects.centralRect
            bindObj.property = "height"
        }
        else {
            console.log("error loading binding component") ;
            console.log(bindObj.errorString());
            return false;
        }
        bindObj = Qt.createQmlObject("import Qt 4.7; Binding {value: bHeight}", scene)
        if (bindObj) {
            bindObj.target = rects.leftRect
            bindObj.property = "height"
        }
        else {
            console.log("error loading binding component") ;
            console.log(bindObj.errorString());
            return false;
        }
    }
}





On 08/03/2010 03:19 PM, ext Zharkyn Kassenov wrote:

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?
_______________________________________________
Qt-qml mailing list
Qt-qml at trolltech.com<mailto:Qt-qml at trolltech.com>
http://lists.trolltech.com/mailman/listinfo/qt-qml

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20100803/3917fdbe/attachment.html