KDE Apps with Python: Part 1

Most of the applications created by KDE are primarily written in C++. Previously, I have worked with Qt apps on Python, but never gave QML a shot. QML is the new trend in desktop and mobile applications, because its faster, and easier to develop. Writing GUI’s have become a piece of cake. So, how do we exactly put together QML apps, with Python?

First, I wanted to try Qt6 out. So I set up my python environment with PySide6 and poetry. PySide6 is the python bindings for Qt6, the primary GUI framework used in this project.

Getting Started⌗

# fill in all your details of the project here
# when asked for interactive dependency configuration, hit 'no' for now. 
# we will get back to this later
poetry init

# add PySide6
poetry add PySide6

I wanted to create a desktop app, which helps me get the lyrics of the current playing song, on the music app. So, I called it Lyriks. Gave it a ‘k-ish name, coz I wanted it to sound more like KDE 😅😛.

Ok, here is my final pyproject.toml file which was created by poetry init command:

[tool.poetry]
name = "lyriks"
version = "0.1.0"
description = "Get the lyrics of the currently listening song with Lyrix, built for KDE"
authors = []
license = "MIT"

[tool.poetry.dependencies]
python = ">=3.6, <3.10"
PySide6 = "^6.1.1"

[tool.poetry.dev-dependencies]

[build-system]
requires = ["poetry-core>=1.0.0"]
build-backend = "poetry.core.masonry.api"

Looks good!

Writing QML, with Kirigami ✨⌗

Next step: writing the QML User Interface. I started off with this basic template, and named it as ui/main.qml:

import QtQuick 2.6

import QtQuick.Controls 2.0
import org.kde.kirigami 2.13 as Kirigami

Kirigami.ApplicationWindow
{
    title: "Lyriks"
    width: 480
    height: 720

    pageStack.initialPage: Qt.resolvedUrl("LyricsPage.qml")
    
}

Most of the stuff in the previous QML code are obvious… except one thing. pageStack!! 🤔, so I set out in search for how the pageStack works in Kirigami.

So, I unearthed this:

According to the Kirigami Documentation

Kirigami apps are typically organized in Pages . Those are the different ‘Screens’ of an app. You will want to have a page dedicated to specific aspects of your app’s interaction, and you can create different QML files each containing the code for separate pages.

Yeah! Makes sense. So, the different layouts (or views) are supposed to be added as “Pages”, and so we can dynamically load a page when we want 🤔. Interesting ✨

This is pretty useful to change the views quickly, for example: from login view, to dashboard, and back.

Now, I need to write the main Layout for the Lyrics App, add a qml page file, with name LyrixPage.qml:

import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0
import org.kde.kirigami 2.13 as Kirigami



Kirigami.Page
{
    id: root
    title: "Lyriks"
    
    ColumnLayout {
        width: parent.width

        Kirigami.Heading {
            level: 1
            id: trackNameLabel
            text: "🎵"

        }
        Label {
            id: artistNameLabel
            text: "You are currently not listening to any song"
        }
        
    }

Now, we will use qmlscene tool to view the QML we have just written ✨

qmlscene main.qml

In the next post, we will discuss on how to connect Python logic to QML, and discuss about formatting.