Why my code is no longer working when moving it in another file?

jeanmilost

I have the following code (I only posted the interesting part):

TreeView.qml

...

/**
* Tree content model
*/
ListModel
{
    // common properties
    id: lmTreeContentModel
    objectName: "lmTreeContentModel"
}

/**
* Tree item
*/
Component
{
    // common properties
    id: cpItem

    /**
    * Item column layout
    */
    Column
    {
        // common properties
        id: clItem
        objectName: "clItem"
        clip: true

        /**
        * Item mouse area
        */
        MouseArea
        {
            // common properties
            id: maItem
            objectName: "maItem"
            width: rwItem.implicitWidth
            height: rwItem.implicitHeight

            /// Called when item is double clicked
            onDoubleClicked:
            {
                // expand/collapse item children
                for (let i = 1; i < parent.children.length - 1; ++i)
                    parent.children[i].visible = !parent.children[i].visible;

                txItemLabel.m_Text = maItem.getNodeText();
            }

            /**
            * Item background
            */
            Row
            {
                // common properties
                id: rwItem
                objectName: "rwItem"

                /**
                * Item indent
                */
                Item
                {
                    // common properties
                    width: model.level * 20
                    height: 1
                }

                /**
                * Item label
                */
                Text
                {
                    property string m_Text: maItem.getNodeText()

                    // common properties
                    id: txItemLabel
                    objectName: "txItemLabel"
                    text: m_Text
                    color: clItem.children.length > 2 ? "#3186ea" : "#e9d675"
                    font
                    {
                        bold: true;
                        pixelSize: 14
                    }
                }
            }

            /**
            * Gets the node text
            *@return the node text
            */
            function getNodeText()
            {
                return (clItem.children.length > 2 ?
                                clItem.children[1].visible ?
                                        qsTr("- ") : qsTr("+ ") : qsTr("  ")) + model.name;
            }
        }

        /**
        * Children repeater
        */
        Repeater
        {
            // common properties
            model: childArray
            delegate: cpItem
        }
    }
}

/**
* Tree view
*/
ListView
{
    // common properties
    anchors.left: parent.left
    anchors.top: rcTreeHeader.bottom
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    model: lmTreeContentModel
    delegate: cpItem
    clip: true

    /// Called when component is loaded
    Component.onCompleted:
    {
        for (let i = 0; i < 5; ++i)
            lmTreeContentModel.append({"name": "Node " + i, "level": 0, "childArray": []});

        let node = lmTreeContentModel.get(1);

        for (let i = 0; i < 2; ++i)
            node.childArray.append({"name": "Node 1-" + i, "level": 1, "childArray": []});
    }
}

...

This code works well and give the expected result:

However, if I move the Component tree item in a separate file and if I modify the code as below:

TreeItem.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Templates 2.15 as T

/**
* Tree item
*/
Component
{
    // common properties
    id: cpItem

    /**
    * Item column layout
    */
    Column
    {
        // common properties
        id: clItem
        objectName: "clItem"
        clip: true

        /**
        * Item mouse area
        */
        MouseArea
        {
            // common properties
            id: maItem
            objectName: "maItem"
            width: rwItem.implicitWidth
            height: rwItem.implicitHeight

            /// Called when item is double clicked
            onDoubleClicked:
            {
                //REM console.log("DOUBLE CLICKED - " + model.name + " - " + visible + " - " + parent.children.length);

                // expand/collapse item children
                for (let i = 1; i < parent.children.length - 1; ++i)
                    parent.children[i].visible = !parent.children[i].visible;

                txItemLabel.m_Text = maItem.getNodeText();
            }

            /**
            * Item background
            */
            Row
            {
                // common properties
                id: rwItem
                objectName: "rwItem"

                /**
                * Item indent
                */
                Item
                {
                    // common properties
                    width: model.level * 20
                    height: 1
                }

                /**
                * Item label
                */
                Text
                {
                    property string m_Text: maItem.getNodeText()

                    // common properties
                    id: txItemLabel
                    objectName: "txItemLabel"
                    text: m_Text
                    color: clItem.children.length > 2 ? "#3186ea" : "#e9d675"
                    font
                    {
                        bold: true;
                        pixelSize: 14
                    }
                }
            }

            /**
            * Gets the node text
            *@return the node text
            */
            function getNodeText()
            {
                return (clItem.children.length > 2 ?
                                clItem.children[1].visible ?
                                        qsTr("- ") : qsTr("+ ") : qsTr("  ")) + model.name;
            }
        }

        /**
        * Children repeater
        */
        Repeater
        {
            // common properties
            model: childArray
            delegate: cpItem
        }
    }
}

TreeView.qml:

...

/**
* Tree content model
*/
ListModel
{
    // common properties
    id: lmTreeContentModel
    objectName: "lmTreeContentModel"
}

/**
* Tree item
*/
TreeItem
{
    // common properties
    id: cpItem
}

/**
* Tree view
*/
ListView
{
    // common properties
    anchors.left: parent.left
    anchors.top: rcTreeHeader.bottom
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    model: lmTreeContentModel
    delegate: cpItem
    clip: true

    /// Called when component is loaded
    Component.onCompleted:
    {
        for (let i = 0; i < 5; ++i)
            lmTreeContentModel.append({"name": "Node " + i, "level": 0, "childArray": []});

        let node = lmTreeContentModel.get(1);

        for (let i = 0; i < 2; ++i)
            node.childArray.append({"name": "Node 1-" + i, "level": 1, "childArray": []});
    }
}

...

Then my code no longer works as expected, the children items are missing:

As I barely modified the code (I only moved the Component code in another file and instanced it by TreeItem instead of directly using the cpItem identifier in the ListView delegate property), I wonder if someone may explain me why the first version is working as expected, but the second one no longer works.

sierdzio

Have Column as the root item in TreeItem.qml, then keep define the component in TreeView.qml:

Component {
  id: treeItemComponent
  TreeItem {
  }
}

Then it should work.

jeanmilost

@sierdzio This worked for me, thank you very much. However can you explain why moving the Component itself doesn't work?

sierdzio

@jeanmilost said in Why my code is no longer working when moving it in another file?:

However can you explain why moving the Component itself doesn't work?

I don't know, to be honest, it just felt wrong to me :D My guess would be that QML engine expects at least an Item or QtObject to be the root of a QML file. When it's presented with a component, however, the logic breaks apparently.

J.Hilk

@sierdzio I actually have multiple files where the root item is a Component worked always perfectly fine!

sierdzio

@J-Hilk said in Why my code is no longer working when moving it in another file?:

@sierdzio I actually have multiple files where the root item is a Component worked always perfectly fine!

Haha ok that's good to know :-) ... but then why my proposed fix worked here?

J.Hilk

@sierdzio
🤷‍♂️ maybe copy paste error ?

I always use

right click on top item
refactoring
move component into separate file

never failed me so far :D