Compositeur de décoration côté serveur

Introduction

Server Side Decoration Compositor est un exemple de compositeur Wayland de style bureau mettant en oeuvre des décorations de fenêtres côté serveur.

Pour une introduction aux principes de base de la création d'une fenêtre de type Qt Wayland Compositor avec Qt, voir l'exemple Qtml minimal.

Décorations

Le terme " décorations de fenêtre " fait référence à l'interface utilisateur supplémentaire qui accompagne la plupart des fenêtres dans le système de fenêtrage. En voici quelques exemples :

• Le cadre graphique autour de la surface de la fenêtre, que l'utilisateur peut cliquer et faire glisser pour redimensionner la fenêtre.
• La barre de titre de la fenêtre, qui peut être utilisée pour déplacer la fenêtre.
• Les boutons d'outils du système pour maximiser, minimiser et fermer une fenêtre.

Traditionnellement, dans Wayland, c'est au client qu'il incombe de rendre ces décorations. Parallèlement, la position, la taille et l'état de la fenêtre sont du ressort du compositeur. Certaines extensions du shell prennent optionnellement en charge les décorations côté serveur. Cela permet à un compositeur de communiquer aux clients qu'ils ne doivent pas dessiner leurs propres décorations de fenêtre. Au lieu de cela, le compositeur est responsable du dessin des décorations de la fenêtre. Cela correspond à la manière dont les décorations sont gérées dans d'autres systèmes de fenêtrage, tels que macOS, Windows et X11. Il convient de noter que certains clients peuvent ne pas prendre en charge cette fonctionnalité. Si le système est censé exécuter de telles applications, il convient d'en tenir compte.

Avantages des décorations côté serveur :

• Les clients n'ont pas à réserver d'espace pour l'interface utilisateur du système dans leurs tampons Wayland.
• Qt Quick Les clients ayant une interface graphique et les clients basés sur OpenGL n'ont pas à effectuer le rendu dans un FBO séparé et à copier le contenu dans leurs tampons Wayland.
• Les fenêtres des clients auront une apparence cohérente, quel que soit le kit d'outils d'interface utilisateur utilisé.
• Les fonctionnalités du système, telles que le redimensionnement, la fermeture et la modification de l'état de la fenêtre, sont centralisées sur le serveur au lieu d'être partagées entre le serveur et le client.

Le code

L'exemple de compositeur ne prend en charge que l'extension XdgShell. Il initialise l'extension de la manière habituelle et ajoute les surfaces à un site ListModel afin d'y accéder ultérieurement.

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

En outre, l'exemple initialise l'extension XdgDecorationManagerV1. Cela lui permet de communiquer au client qu'il préfère les décorations côté serveur.

L'interface étant facultative, il se peut que le client ne la prenne pas en charge et dessine toujours ses propres décorations. Par conséquent, le mode n'est que "préféré" et nous devons vérifier le mode réel de la fenêtre de premier niveau avant de la décorer.

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)
    }
}

Pour chaque fenêtre, nous créons une simple barre de titre au-dessus d'elle. La barre de titre comporte un dégradé, du texte, une adresse DragHandler qui gère sa position et un bouton de fermeture.

L'image montre un client qui supporte les extensions du gestionnaire de décoration en haut à gauche, et le même client avec des décorations côté client en bas à droite.

Exemple de projet @ code.qt.io