Compositeur de décorations côté serveur

Introduction

Le compositeur de décorations côté serveur est un exemple de compositeur Wayland de type bureau mettant en œuvre des décorations de fenêtres côté serveur.

Pour une introduction aux principes de base de la création d’un Qt Wayland Compositor avec Qt, consultez l’exemple Minimal Qml.

Décorations

Le terme « décorations de fenêtre » désigne 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, sur lequel l’utilisateur peut cliquer et faire glisser pour redimensionner la fenêtre.
• La barre de titre de la fenêtre, qui peut servir à déplacer la fenêtre.
• Les boutons système permettant d’agrandir, de réduire et de fermer une fenêtre.

Traditionnellement, sous Wayland, c'est au client qu'il incombe de dessiner ces décorations. En revanche, la position, la taille et l'état de la fenêtre relèvent de la compétence du compositeur. Certaines extensions de shell prennent en charge, de manière facultative, les décorations côté serveur. Cela permet au compositeur d'indiquer aux clients qu'ils ne doivent pas dessiner leurs propres décorations de fenêtre. C’est alors le compositeur qui se charge de dessiner les décorations de fenêtre. Cela correspond à la manière dont les décorations sont gérées sur 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 faut également en tenir compte.

Avantages des décorations côté serveur :

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

Le code

Le compositeur présenté dans cet exemple ne prend en charge que l’extension « XdgShell ». Il initialise l’extension de la manière habituelle et ajoute des surfaces à un objet « ListModel » afin de pouvoir y accéder ultérieurement.

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

De plus, l’exemple initialise l’extension « XdgDecorationManagerV1 ». Cela lui permet d’indiquer 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, ce mode n’est que « préféré » et nous devons vérifier le mode réel de la fenêtre de niveau supérieur 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 de celle-ci. La barre de titre comporte un dégradé, du texte, une extension « DragHandler » qui gère sa position, ainsi qu’un bouton de fermeture.

L’image montre, en haut à gauche, un client prenant en charge les extensions du gestionnaire de décorations, et, en bas à droite, ce même client avec des décorations côté client.

Exemple de projet @ code.qt.io