[solved]How to implement Delegate in seperate file?

kathy

I have a small QML project using GridView and XmlListModel to diaplay images:

in my main.qml -
@import QtQuick 1.0
import "Shared" as SHARED

Rectangle {
id: mainPage
width: 520; height: 640
color: "#000000"

SHARED.MyModel { id: xmlModel }

// SHARED.GridDelegate { id: theDelegate }

Component {
    id: theDelegate
    Item {
        width: 130; height: 130
        Image {
            id: thumbnailImg
            source: thumbPath
            x: 1
            y: 1
            anchors.centerIn: parent
            smooth: true
        }
    }
}

GridView {
    id: photoGridView
    model: xmlModel
    delegate: theDelegate

    cacheBuffer: 100
    cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height
}

}@

the GridDelegate.qml -
@Item {
width: 130; height: 130
Image {
id: thumbnailImg
source: thumbPath
x: 1
y: 1
anchors.centerIn: parent
smooth: true
}
}@
If I use the delegate defined in the main.qml. It run as expected.

But If I use the GridDelegate.qml file defined in the subdirectory "Shared" and keep all other no change. No image show up.

MyModel.qml -
@XmlListModel {
source: "./img.xml"
query: "/root/item"

XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "thumbPath"; query: "thumbPath/string()" }
XmlRole { name: "imgPath"; query: "imgPath/string()" }

}@

wladek

Hi kathy,

The Delegate must be a Component.
So the GridDelegate.qml has to look like this:
@Component{
Item {
width: 130; height: 130
Image {
id: thumbnailImg
source: thumbPath
x: 1
y: 1
anchors.centerIn: parent
smooth: true
}
}
}@

Regards,
Wladek