And to make the code cleaner one could do:
test.js
====
var rectComponent = null
var rects = new Object()
function createRect (color)
{
if (!rectComponent) rectComponent = Qt.createComponent("Rect.qml")
if(rectComponent.status == Component.Ready)
{
var ret = rectComponent.createObject(scene);
ret.color = color
return ret
} else {
console.log("error loading cell component") ;
console.log(rectComponent.errorString());
return null
}
}
function addBinding (from, toObj, toProp)
{
var bindObj = Qt.createQmlObject("import Qt 4.7; Binding {value:
"+from+"}", scene)
if (bindObj) {
bindObj.target = toObj
bindObj.property = toProp
}
else {
console.log("error creating binding object")
console.log(bindObj.errorString())
return false
}
return true
}
and in the qml file there could be something like:
================================
import Qt 4.7
import "test.js" as Js
Rectangle {
id: scene
width: 800
height: 480
property real bWidth: 50
property real bHeight: 24
Behavior on bWidth {
NumberAnimation {
easing.type: "InOutQuad"
duration: 200
}
}
Behavior on bHeight {
NumberAnimation {
easing.type: "InOutQuad"
duration: 200
}
}
MouseArea {
id: area
property bool dragging: false
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onReleased: {
if (!dragging) {
if (mouse.button == Qt.LeftButton) { bWidth /= 2; bHeight /= 2 }
else { bWidth *= 2; bHeight *= 2 }
}
dragging = false
}
onPositionChanged: {
dragging = true
Js.rects.leftRect.width = mouse.x
Js.rects.topRect.height = mouse.y
}
}
Component.onCompleted: {
if (!(Js.rects.centralRect = Js.createRect("blue"))) return
if (!(Js.rects.topRect = Js.createRect("green"))) return
if (!(Js.rects.leftRect = Js.createRect("yellow"))) return
Js.rects.topRect.anchors.left=Js.rects.leftRect.right;
Js.rects.leftRect.anchors.top=Js.rects.topRect.bottom;
Js.rects.centralRect.anchors.top=Js.rects.topRect.bottom;
Js.rects.centralRect.anchors.left=Js.rects.leftRect.right;
if (!Js.addBinding ("bWidth", Js.rects.centralRect, "width")) return
if (!Js.addBinding ("bWidth", Js.rects.topRect, "width")) return
if (!Js.addBinding ("bHeight", Js.rects.centralRect, "height")) return
if (!Js.addBinding ("bHeight", Js.rects.leftRect, "height")) return
}
}
On 08/03/2010 04:23 PM, Mikola Tapani (Nokia-MS/Tampere) wrote:
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@trolltech.com<mailto:Qt-qml@trolltech.com>
http://lists.trolltech.com/mailman/listinfo/qt-qml
_______________________________________________
Qt-qml mailing list
Qt-qml@trolltech.com
http://lists.trolltech.com/mailman/listinfo/qt-qml
