How to use a secondary qml file in a main qml file

duyjuwumu

I'm brand new to Qt. I'm going through the Qt for Python docs, and I'm currently trying to run this tutorial. I'm using QtCreator to do it. My file structure is:
-- main/
.....| - main.pyproject
.....| - Cell.qml
.....| - main.py
.....| - main.qml

I'm trying to use Cell.qml in main.qml as the tutorial shows. According to this thread, as long as Cell.qml is in the same directory as main.qml, I can just use Cell in main.qml. But I keep getting this error:

QQmlApplicationEngine failed to load component
file:///main.qml:14:1: "Cell.qml": no such directory
15:15:07: /env/bin/python exited with code 255

What am I doing wrong?

Below is the content of each file.

// main.pyproject
{
    "files": ["Cell.qml","main.py","main.qml"]
}

// Cell.qml
import QtQuick 2.15

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked:  container.clicked(container.cellColor)
    }
}

# main.py
# This Python file uses the following encoding: utf-8
import sys
import os

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))

    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: page
        width: parent.width; height: parent.height
        color: "lightgray"

        Text {
            id: helloText
            text: "Hello world!"
            y: 30
            anchors.horizontalCenter: page.horizontalCenter
            font.pointSize: 24; font.bold: true
        }

        Grid {
            id: colorPicker
            x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
            rows: 2; columns: 3; spacing: 3

            Cell { cellColor: "red"; MouseArea.onClicked: helloText.color = cellColor}
         }
    }
}

eyllanesc

@duyjuwumu try changing:

engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))

to

filename = os.path.join(os.path.dirname(__file__), "main.qml")
url = QUrl.fromLocalFile(filename)
engine.load(url)

duyjuwumu

Same error
@eyllanesc said in How to use a secondary qml file in a main qml file:

@duyjuwumu try changing:

engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))

to

filename = os.path.join(os.path.dirname(__file__), "main.qml")
url = QUrl.fromLocalFile(filename)
engine.load(url)

jsulm

@duyjuwumu os.path.dirname(__file__)? Shouldn't you use current working directory, or (better) your application directory to locate the QML file? See https://doc.qt.io/qt-5/qstandardpaths.html

duyjuwumu

@jsulm Yes you have a point., but I'm following this QML tutorial verbatim. Using os works when I just have one qml file. I only get this error when using the second Cell.qml file

jsulm

@duyjuwumu "file:///main.qml:14:1: "Cell.qml": no such directory" - looks like there is no directory in the path, so it looks for Cell.qml in root directory. What does os.path.dirname(__file__) output?

eyllanesc

@duyjuwumu TYPO:

change

Cell { cellColor: "red"; MouseArea.onClicked: helloText.color = cellColor}

to

Cell { 
    cellColor: "red"
    onClicked: helloText.color = cellColor
}

duyjuwumu

@eyllanesc I feel quite dumb. Changing MouseArea.onClicked to onClicked fixed the problem. Thanks for the help to everyone who replied.