Workflow for Designing an Application with Qt Design Studio and Building a Python Backend

Gum73

Hello,

I’m just starting out with QML and modern Qt tools.

I recently discovered Qt Design Studio and wanted to use it for a new Python project.

I created a small example, but I’m stuck at the step of connecting QML to Python, specifically with .ui.qml files.

My questions:

-Why do I have a .ui.qml file in my project instead of a regular .qml file?

How can I link a button in my .ui.qml to Python?

I haven’t found any accessible and clear tutorials on the real workflow for connecting Qt Design Studio -> QML -> Python.

When I create the project in Qt Design Studio, I get a folder App1AppContent containing a file Screen01.ui.qml with my buttons.
I have enabled the Python generator in Qt Design Studio, and there is a python folder.

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import SeculasApp

Rectangle {
    id: rectangle
    width: Constants.width
    height: Constants.height

    color: Constants.backgroundColor

    Button {
        id: btn_start_1
        x: 448
        y: 247
        text: qsTr("Start")

        Connections {
            target: btn_start_1
            function onClicked() {
                rectangle.state = "clicked"
            }
        }
    }
    Button {
        id: btn_start_2
        x: 448
        y: 300
        text: qsTr("Start 2")

        Connections {
            target: btn_start_2
            function onClicked() {
                rectangle.state = "clicked"
            }
        }
    }

    Switch {
        id: switch1
        x: 448
        y: 175
        text: qsTr("safety enable")
    }
    states: [
        State {
            name: "clicked"
        }
    ]
}

Thanks

Pl45m4

Hi and welcome to the forum

@Gum73 said in Workflow for Designing an Application with Qt Design Studio and Building a Python Backend:

Why do I have a .ui.qml file in my project instead of a regular .qml file?

As you can tell from the content *.ui.qml files are similar to regular *.qml files, but the extension indicates that they come from Qt Design Studio's editor... in contrast to *.ui files which are edited by using QtDesigner or QtCreator's Design Mode describe user interfaces for QtWidget applications.
And in fact that QML is a declarative language anyway, there is no difference apart from what is also already stated in the files header:

If you edit this file manually, you might introduce QML code that is not supported by Qt Design Studio.

This means that .ui.qml files are or should always be compatible with QtDesignStudio.

How can I link a button in my .ui.qml to Python?

There is

https://www.qt.io/blog/qtds-python

but I don't know how far it has become...

You can always go the manual route and use QtDS as "designer"/editor, then include your design in your PySide/PyQt app.
As I've said above, from that perspective *.ui.qml files are just *.qml files...
(also for most OS only the part after the last dot forms the file extension, IIRC)

Here you can see what is not allowed in QtDS UI QML files:

https://doc.qt.io/qtcreator/creator-quick-ui-forms.html

Gum73

Thanks for everything!
I've already seen those links, and unfortunately they don't cover Python very well.
I managed to set up a small backend in Python, but there aren't many references on the subject...
How do people do it? I saw that QtQuick design was deprecated in QtCreator. Why? What should we use instead?

Pl45m4

@Gum73 said in Workflow for Designing an Application with Qt Design Studio and Building a Python Backend:

I managed to set up a small backend in Python, but there aren't many references on the subject...

For general Qt + Python things, you can check out the Qt for Python documentation

The connection to QML works there as it does with the original Qt for C++... create an engine, load/import QML modules etc.

How do people do it?

When I do QML stuff I usually don't use any visual editor for the most part. Putting simple QtQuick Elements together and playing around until it works it pretty straightforward.

I saw that QtQuick design was deprecated in QtCreator. Why? What should we use instead?

Definitely, yes (for a reason) !! I've activated the deprecated QtCreator plugin lately because I was curious... and it's horrible... :)
For more complex projects/designs or if you really want an editor with WYSIWYG functionality, QtDS is the best and probably only (not sure ?!) choice.
But since QtQuick is descriptive I don't see why I need it for basic design.
For more complex projects and when you go hard on "Design" with utilizing the Figma Bridge (only premium/commercial feature anyway) it's a different story :)

Edit:

Here you can find simple Python examples for QML/QtQuick backends

https://doc.qt.io/qtforpython-6/examples/index.html

This, for instance:

https://doc.qt.io/qtforpython-6/examples/example_quick_window.html#example-quick-window

Gum73

Thanks a lot @Pl45m4 for your time !
With this link (https://doc.qt.io/qtforpython-6/examples/index.html) i found some good examples !
However i face a big problem it seems impossible to embed QWidgets (like PyQtGraph or Matplotlib plots) directly in a QML panel.
I'm looking for alternatives or solution but nothing ...
Thanks