Solved QML itemdelegate file doesn't auto update in a TreeView

[Haitham]

Hello everybody
I'm a newbie at both Qt and QML so bear with me.

I'm having 2 separate QML files (main file and a tree delegate file), both in the resources file in my Qt application.
The model for the tree view is written in C++ and no problem with that.

So my problem is as follows,

whenever I edit the delegate file, I've to rewrite the part where I call the delegate in the main file in order for the changes to take effect (i.e itemDelegate: MyTreeDelegate{}).

here are the two qml files

//main.qml
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import MyTreeModel 1.0  //from qmlRegister in C++ code

Rectangle{
    MyTreeModel
    {
        id: theModel
    }

    TreeView
    {
        style: TreeViewStyle    //for styling the tree
        {
            backgroundColor: "white"
            alternateBackgroundColor:"white"
        }


        headerVisible: false    //to hide the header
        anchors.fill: parent    //to fill rectangle
        
        model: theModel

        //this is the line I've to rewrite everytime I change the delegate file
        itemDelegate:  MyTreeDelegate{}


        TableViewColumn
        {
            role: "name_role"
            title: "Status"
        }
    }
}

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    id:baseRec
    color: "transparent"
    height: 5
    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            console.log("row: ",styleData.row)
            console.log("column: ",styleData.column)
            console.log("index: ",styleData.index)
        }
    }

    Text
    {
        anchors.verticalCenter: parent.verticalCenter
        text: styleData.value === undefined ? "" : styleData.value
    }

    Image
    {
        height: baseRec.height
        width: height
        id:rightImage
        source: "images/RedOff.png"
        anchors
        {
            verticalCenter:baseRec.verticalCenter
            right:baseRec.right
        }
    }

    Image
    {
        id:leftImage
        height: baseRec.height
        width: height
        source: "images/GreenOff.png"
        anchors
        {
            verticalCenter:baseRec.verticalCenter
            right:rightImage.left
        }
    }
}

is this a bug? I'm using Qt 5.8.0 FYI.

Thanks in advance.

[Haitham]

Ok
I've found out the solution.

I've to capsulate my delegate in a Component QML Type as shown below

MyTreeDelegate.qml

Component   //must wrap rectange inside a component QML type to be called from a different file
{
    Rectangle
    {
        id:baseRec
        color: "transparent"
        //    color: ( styleData.row % 2 == 1 ) ? "white" : "#60e6dd"
        height: 5
        //    border.color: "black"
        //    border.width: 1
        MouseArea
        {
            anchors.fill: parent

            onClicked:
            {
                console.log("row: ",styleData.row)
                console.log("column: ",styleData.column)
                console.log("index: ",styleData.index)
            }

        }

        Text
        {
            anchors.verticalCenter: parent.verticalCenter
            text: styleData.value === undefined ? "" : styleData.value
            // The branches don't have a description_role so styleData.value will be undefined
        }

        Image
        {
            height: baseRec.height
            width: height
            id:rightImage
            source: "images/RedOff.png"
            anchors
            {
                verticalCenter:baseRec.verticalCenter
                right:baseRec.right
            }
        }

        Image
        {
            id:leftImage
            height: baseRec.height
            width: height
            source: "images/GreenOff.png"
            anchors
            {
                verticalCenter:baseRec.verticalCenter
                right:rightImage.left
            }
        }
    }
}

and then I can call it in main.qml as shown below

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import MyTreeModel 1.0  //from qmlRegister in C++ code

Rectangle{
    MyTreeModel
    {
        id: theModel
    }

    MyTreeDelegate
    {
        id: theDelegate
    }

    TreeView
    {
        id: treeView
        style: TreeViewStyle    //for styling the tree
        {
            backgroundColor: "white"
            alternateBackgroundColor:"white"
            //branch delegates are used for delegating the arrow on the left
        }
        //think of what to do on a double click or single click
        //think of how to delegate only specific children

        headerVisible: false    //to hide the header
        anchors.fill: parent    //to fill rectangle

        model: theModel
        onItemDelegateChanged:
        {
//        console.log("current index: ", index)
        }

        itemDelegate: theDelegate

        TableViewColumn
        {
            role: "name_role"
            title: "Status"
        }
        //        TableViewColumn {
        //            role: "description_role"
        //            title: "Description"
        //        }
    }
}