[Qt-qml] Looking for a working example: Dynamically created items with bound properties

[Diego Marcos]

Hi,

I'm trying to populate a Flickable with items created dynamically and I have a couple of problems that I´m not able to solve by myself. it would be great If someone have the time to take a look into my example. 

1. Property contentItem in Flickable doesn't seem to work. I had to use a workaround: I create a static invisible dummy Item in the Flickable and I use its parent as the parent of the dynamic objects.

2. Notification doesn't seem to work when I bind properties to the created items. 

I would like to understand whether I'm misunderstanding something of it is a known bug in Qt. You can find my code below. The example runs directly on the qmlviewer

Thanks a lot,

Diego.

import Qt 4.7

Rectangle{
	width: 320
	height: 400
	id: gui

	Flickable{
		id: dynamicflickableListDummy
		clip: true
		height: 100
		width: 200
		anchors.horizontalCenter: parent.horizontalCenter
		anchors.verticalCenter: parent.verticalCenter
		anchors.topMargin: 5

		function populateFlickable() {
			var previousItem;
			 // BUG? Dummy item is a workaround. It doesn't work with dynamicflickableListDummy.contentItem. I get message: "Qt.createQmlObject(): Missing parent object"
			var contentItem = dummy.parent;
			if(contentItem.children.length > 1)
				return;
			for(var i=0;i<10;++i){
				var qmlCode = 'import Qt 4.7; Rectangle {radius: 5; width: 75; height: 20; Text{text: "Dynamic ' + i + '"; color: "white"; anchors.centerIn: parent}}';
				var newItem = Qt.createQmlObject(qmlCode, contentItem);
				dynamicflickableListDummy.contentHeight += 25;
				newItem.anchors.horizontalCenter = contentItem.horizontalCenter;
				newItem.anchors.topMargin = 5;
				if (i==0)
					newItem.anchors.top = contentItem.top;
				else{
					newItem.anchors.top = previousItem.bottom;
				}
				// The color of the button should be binded to the color of the created items. Initialization works, notification doesn't.
				addBinding(buttonBody.color, newItem, 'color');
				previousItem = newItem;
			}
		}

		function addBinding(from, toObj, toProp) {
			var bindObj = Qt.createQmlObject("import Qt 4.7; Binding {}", toObj);
			if (bindObj) {
				bindObj.value = from;
				bindObj.target = toObj;
				bindObj.property = toProp;
			}
			else {
				console.log("error creating binding object");
				console.log(bindObj.errorString());
				return false;
			}
			return true;
		}

		Rectangle {
			id: dummy;
			color: "transparent";
			width: 1;
			height: 1;
		}
	}

	Rectangle{
		anchors.fill: dynamicflickableListDummy
		anchors.bottomMargin: -5
		color: "transparent"
		border.width: 2
		border.color: "gray"
		radius: 5
	}

	Rectangle {
		id: buttonBody
		anchors.top: dynamicflickableListDummy.bottom
		anchors.topMargin: 15
		anchors.horizontalCenter: parent.horizontalCenter
		property string text : "Create Dynamic Objects"
		border.color: "black";
		color: "steelblue";
		radius: 4
		width: 180
		height: 25
		Text {
			id: buttonText
			text: buttonBody.text; color: "white"
			anchors.centerIn: parent
			smooth: true
		}
		MouseArea {
			id: mr
			anchors.fill: parent
			onClicked: { dynamicflickableListDummy.populateFlickable();} //dynamicflickableList.populateFlickable(); }
		}
		states: State {
			name: "pressed"; when: mr.pressed
			PropertyChanges { target: buttonBody; color: "red" }
		}
	}
}