Server-seitiger Dekorations-Compositor

Einführung

Der Server-seitige Dekorations-Compositor ist ein Beispiel für einen Wayland-Compositor im Desktop-Stil, der serverseitige Fensterdekorationen implementiert.

Eine Einführung in die Grundlagen der Erstellung eines Qt Wayland Compositor mit Qt finden Sie im Beispiel „Minimal QML“.

Dekorationen

Der Begriff „Fensterdekorationen“ bezieht sich auf die zusätzliche Benutzeroberfläche, die die meisten Fenster im Fenstersystem begleitet. Beispiele hierfür sind:

• Der grafische Rahmen um die Fensterfläche, auf den ein Benutzer klicken und den er ziehen kann, um die Größe des Fensters anzupassen.
• Die Titelleiste des Fensters, die zum Verschieben des Fensters verwendet werden kann.
• Die Systemschaltflächen zum Maximieren, Minimieren und Schließen eines Fensters.

Traditionell war es in Wayland Aufgabe des Clients, diese Dekorationen zu rendern. Gleichzeitig fallen Position, Größe und Zustand des Fensters in den Zuständigkeitsbereich des Compositors. Einige Shell-Erweiterungen unterstützen optional serverseitige Dekorationen. Dies ermöglicht es einem Compositor, den Clients mitzuteilen, dass sie ihre eigenen Fensterdekorationen nicht zeichnen sollen. Stattdessen ist der Compositor für das Zeichnen der Fensterdekorationen verantwortlich. Dies entspricht der Handhabung von Dekorationen in anderen Fenstersystemen wie macOS, Windows und X11. Es ist zu beachten, dass bestimmte Clients dies möglicherweise überhaupt nicht unterstützen. Wenn erwartet wird, dass auf dem System solche Anwendungen ausgeführt werden, sollte dies ebenfalls berücksichtigt werden.

Vorteile serverseitiger Dekorationen:

• Clients müssen in ihren Wayland-Puffern keinen Platz für die System-Benutzeroberfläche reservieren.
• Qt Quick und OpenGL-basierte Clients müssen nicht in ein separates FBO rendern und den Inhalt in ihre Wayland-Puffer kopieren.
• Client-Fenster weisen ein einheitliches Erscheinungsbild auf, unabhängig davon, welches UI-Toolkit verwendet wird.
• Systemfunktionen wie das Ändern der Fenstergröße, das Schließen und das Ändern des Fensterstatus werden zentral auf dem Server verwaltet, anstatt zwischen Server und Client aufgeteilt zu sein.

Der Code

Der Beispiel-Compositor unterstützt ausschließlich die Erweiterung „ XdgShell “. Er initialisiert die Erweiterung auf übliche Weise und fügt Oberflächen zu einem „ ListModel “ hinzu, um später darauf zugreifen zu können.

XdgShell {
    onToplevelCreated: (toplevel, xdgSurface) => shellSurfaces.append({shellSurface: xdgSurface});
}
XdgDecorationManagerV1 {
    preferredMode: XdgToplevel.ServerSideDecoration
}

Darüber hinaus initialisiert das Beispiel die Erweiterung „ XdgDecorationManagerV1 “. Dadurch kann es dem Client mitteilen, dass es serverseitige Dekorationen bevorzugt.

Da die Schnittstelle optional ist, könnte es sein, dass der Client sie nicht unterstützt und immer seine eigenen Dekorationen zeichnet. Daher ist der Modus nur „bevorzugt“, und wir müssen den tatsächlichen Modus des obersten Fensters überprüfen, bevor wir es dekorieren.

Column {
    id: chrome
    width: shellSurfaceItem.implicitWidth
    Rectangle {
        visible: modelData.toplevel.decorationMode === XdgToplevel.ServerSideDecoration
        width: parent.width
        height: 30
        gradient: "HeavyRain";
        Text {
            text: modelData.toplevel.title
            anchors.centerIn: parent
        }
        Item {
            anchors.right: parent.right
            width: 30
            height: 30
            Text { text: "X"; anchors.centerIn: parent }
            TapHandler {
                onTapped: modelData.toplevel.sendClose()
            }
        }
        DragHandler {
            target: chrome
        }
    }
    ShellSurfaceItem {
        id: shellSurfaceItem
        moveItem: parent
        shellSurface: modelData
        onSurfaceDestroyed: shellSurfaces.remove(index)
    }
}

Für jedes Fenster erstellen wir oberhalb davon eine einfache Titelleiste. Die Titelleiste verfügt über einen Farbverlauf, Text, ein „ DragHandler “, das ihre Position verwaltet, sowie eine Schaltfläche zum Schließen.

Das Bild zeigt oben links einen Client, der die Erweiterungen des Dekorationsmanagers unterstützt, und unten rechts denselben Client mit clientseitigen Dekorationen.

Beispielprojekt @ code.qt.io