QT Quick with python

[irakli]

Hello,

I searched the internet for 2 days to understand how Python backend should be integrated with Qt Quick project.
With the introduction of PySide6_DS (https://www.qt.io/blog/qtds-python) now it's possible to enable python generator while exporting QDS project. So if I created QDS project called "demo" and exported it with python generator enabled, this creates project structure like this one:

Demo/
├─ Demo/
│ ├─ qmldir
│ ├─ Constants.qml
│ ├─ EventListSimulator.qml
│ ├─ EventListModel.qml
├─ DemoContent/
│ ├─ App.qml
│ ├─ Screen01.ui.qml
│ └─ fonts/ ...
└─ Python/
├─ main.py
├─ autogen/

Here's where my confusion starts. I developed some basic UI in QDS and it is saved in Screen01.ui.qml. But .ui.qml files are not supposed to be edited manually, nor they are supposed to have methods like button.clicked.connect(somepymethod). All the tutorials/guides even on the qt site shows that UI elements should be connected to Python functions/methods within .qml files.

Can anyone please explain in this project structure context how python backend should be connected to UI?
Can anyone give a basic example of the best practice?
I have experience in PySide6 development with qt widgets, where you import widgets in the python code and directly apply methods to those widgets, but apparently it's done differently in Qt Quick.

Thanks in advance.

[irakli]

I think I finally understand how .ui.qml, .qml and python backend should work together when working with QDS project.
Way I did this was to export component ID as property alias in QDS by clicking @ sign, as shown on screenshot:

Then this alias should be used in .qml files, such as App.qml in order to access the component in .ui.qml (This was the biggest confusion point for me). Then we can use signals and slots to connect components with backend as usual.

I created a minimal example and can be seen here in case anyone has same issue.
https://github.com/irakliskhirtladze/QML-Demo

[CristianMaureira]

Hello @irakli
In the future, always start by the official documentation or official repository to reduce your research time to a few minutes. If a use-case is not there, it means it will be a difficult topic or something we need to fix.

• https://code.qt.io/cgit/pyside/pyside-setup.git/tree/examples
• https://doc.qt.io/qtforpython-6/

There you can see many examples on different topics, including QtQuick projects.
Within the Python directory, you can see how qml files are interacting with Python.

Overall the way of making your new designs will be used is that each qml file will be using the components defined in ui.qml files. Since you are creating those new qml files, then there you need to rely on using your backend, that will be in charge of calling Python functions. That example can be seen in this simple example https://code.qt.io/cgit/pyside/pyside-setup.git/tree/examples/quick/painteditem where Python declares a TextBalloon class that will be used as QML_ELEMENT with the name TextBalloonPlugin that is imported in the qml file and you can use that functionality.

[Jaime02]

In addition, here you have a full example about integrating Design Studio and Python:

Link to Qt GitLab example

It demonstrates how to use the @QML_ELEMENT decorator, how to set up the QML directories and a custom Python "backend" which receives, manipulates and sends data to the Qt Quick UI

[irakli]

@Jaime02 Thanks for taking your time to help.
I've used your example to see the implementation details. The app works as needed, however, when I try to open the project in the QDS I get an error which can be seen on the screenshot:

This is exactly why I am confused. I mean the final product is working indeed, but we are not supposed to be putting javascript code or function calls in .ui.qml file, otherwise why would we get these errors?
If we have MainScreen.ui.qml for ui layout only, should we also create it's twin MainScreen.qml file which will be used for javascript/function calls?

BTW I am using QDS community edition if that matters at all.

[Pl45m4]

@irakli said in QT Quick with python:

otherwise why would we get these errors

Not a QML expert but I think yes, that's the reason.
.ui.qml files are solely for QtQuick designs and not for QML/JavaScript code.
That needs to go to your .qml file.
(I'm not familiar with how Python works with QML, but your overall project seems to run as you say)

[irakli]

Thanks all for the helpful comments. I think I'll create a bridge qml file for javascripts/function calls separate from ui.qml and python files.

[Jaime02]

As @Pl45m4 said, Qt Design Studio is not able to handle all the QML files of the example. Currently, it does not handle any C++ or Python code, so it does not detect the Audio module, for example.

[irakli]

I think I finally understand how .ui.qml, .qml and python backend should work together when working with QDS project.
Way I did this was to export component ID as property alias in QDS by clicking @ sign, as shown on screenshot:

Then this alias should be used in .qml files, such as App.qml in order to access the component in .ui.qml (This was the biggest confusion point for me). Then we can use signals and slots to connect components with backend as usual.

I created a minimal example and can be seen here in case anyone has same issue.
https://github.com/irakliskhirtladze/QML-Demo