Can I pass a variable into Qml?

franziss

I have a qml file icon.qml, as shown below.

@
Image {
id: icon
width: 64
height: 64
source: image

MouseArea {
    id: iconMouseArea
    anchors.fill: parent
    width: 64
    height: 64

    drag.target: parent
    drag.axis: Drag.XandYAxis
}

}
@

Is it possible to pass a variable image into icon.qml? So that when I instantiated icon.qml, I can pass any image into icon.qml, and display that image? Thank you for your help. =)
@
var iconObj = Qt.createComponent("icon.qml");
iconObj.createObject(parent);
@

Chuck Gao

Of course you can :) You can search the keyword "property binding" in help document.

apap_

you can do this :
@
var component = Qt.createComponent("icon.qml");
var object = component.createObject(parent);
object.source = image;
@

Take a look to this doc : "http://doc.qt.nokia.com/latest/qdeclarativedynamicobjects.html":http://doc.qt.nokia.com/latest/qdeclarativedynamicobjects.html

thisisbhaskar

I had a doubt if
@object.source = image;@ works. Generally 'object' is the id we give inside the qml element. Good to know that it works.

One more thing is we can pass properties to created object in createObject call itself.

object = component.createObject(parent, {"x": 100, "y": 100});

apap_

@Vijay : in fact you can set the properties directly in createObject(), but it's only available from QtQuick 1.1 ;-)

franziss

Dear all,

Thank you very much for your help, I tried apap_ solution, and it works great. I tried Vijay solution, but it doesn't work for QtQuick 1.0

For apap_ solution, can I pass as
@
object.imageName = "a.jpg"
@

then in icon.qml,

@
property var imageName
image: imageName
@

It there any mistake in my syntax? Thank you.

apap_

when you declare a property in a qml element, you have to specify his type :
@
property string imageName: "defaultImage.jpg"
@
and you should initialize your property to a default value. I think that without initialization, you should get an error when you create your object because imageName will be undefined.

franziss

Hi apap_

This is so cool, thank you so much for your help. :)

franziss

Hi Guys,

I realised that we cannot dynamically assigned id to the dynamically created object.
http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeintroduction.html

@
var iconObj = Qt.createComponent("icon.qml");
var object = iconObj.createObject(parent);
object.id = "hello";
@

And I understand that we cannot get qtquick 1.1, so we cannot do this

@
object = component.createObject(parent, {“id”: "hello"});
@

Do you have any suggestions to overcome this problem. Thank you very much for your help!

thisisbhaskar

In this case you should assume object as id, because that is what you use to refer to the members of created object. Can you let me know the use case where you need to add an id to the dynamically created object.

franziss

Hi Vijay,

Thank you for your help. I have a button, which when pressed, will create an object. This object is actually a slide (if you think of it as a power point slide kind of thing), which I use qml rectangle to represent. So I am trying to give each slide an id, which is in this way: slide1, slide2, .... sliden

thisisbhaskar

Ok.. I understand the use case now. Now, in this case it makes sense to be able to give id to dynamically created item. But seems not possible.

One way to solve is to have a list array ( Don't know syntax of list/array in JavaScript), and keep appending your slides to it. You can refer to them later with list index.

Sorry for not being able to give you proper solution. But hope this helps.

franziss

Hi Vijay,

Thank you for your suggestion. Will QtQuick 1.1 support dynamic instantiation of id?