Compositor de decoraciones del lado del servidor

Introducción

El Compositor de Decoración del Lado del Servidor es un ejemplo de compositor Wayland de estilo escritorio que implementa decoraciones de ventanas del lado del servidor.

Para una introducción a los principios básicos de la creación de un Qt Wayland Compositor con Qt, vea el ejemplo Minimal QML.

Decoraciones

El término decoraciones de ventana se refiere a la interfaz de usuario adicional que acompaña a la mayoría de las ventanas en el sistema de ventanas. Ejemplos de esto son:

• El marco gráfico alrededor de la superficie de la ventana, que un usuario puede pulsar y arrastrar para cambiar el tamaño de la ventana.
• La barra de título de la ventana, que puede utilizarse para moverla.
• Los botones de herramientas del sistema para maximizar, minimizar y cerrar una ventana.

Tradicionalmente en Wayland, ha sido tarea del cliente renderizar estas decoraciones. Al mismo tiempo, la posición, tamaño y estado de la ventana es dominio del compositor. Algunas extensiones de shell soportan opcionalmente decoraciones del lado del servidor. Esto permite a un compositor comunicar a los clientes que no deben dibujar sus propias decoraciones de ventana. En su lugar, el compositor es responsable de dibujar las decoraciones de la ventana. Esto corresponde a cómo se manejan las decoraciones en otros sistemas de ventanas, como macOS, Windows y X11. Vale la pena señalar que algunos clientes pueden no soportar esto en absoluto. Si se espera que el sistema ejecute este tipo de aplicaciones, también habrá que tenerlo en cuenta.

Ventajas de las decoraciones del lado del servidor:

• Los clientes no tienen que reservar espacio para la interfaz de usuario del sistema en sus buffers Wayland.
• Qt Quick y los clientes basados en OpenGL no tienen que renderizar en un FBO separado y copiar el contenido en sus buffers Wayland.
• Las ventanas de los clientes tendrán un aspecto uniforme, independientemente del kit de herramientas de interfaz de usuario que se utilice.
• La funcionalidad del sistema, como redimensionar, cerrar y cambiar el estado de la ventana, está centralizada en el servidor en lugar de ser compartida entre el servidor y el cliente.

El código

El compositor de ejemplo sólo soporta la extensión XdgShell. Inicializa la extensión de la forma habitual y añade superficies a ListModel para poder acceder a ellas posteriormente.

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

Además, el ejemplo inicializa la extensión XdgDecorationManagerV1. Esto le permite comunicar al cliente que prefiere las decoraciones del lado del servidor.

Dado que la interfaz es opcional, puede ocurrir que el cliente no la soporte y dibuje siempre sus propias decoraciones. Por lo tanto, el modo es sólo "preferido" y necesitamos comprobar el modo real de la ventana de nivel superior antes de decorarla.

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

Para cada ventana, creamos una simple barra de título sobre ella. La barra de título tiene un degradado, algo de texto, un DragHandler que gestiona su posición y un botón de cierre.

La imagen muestra un cliente que soporta las extensiones del gestor de decoración en la parte superior izquierda, y el mismo cliente con decoraciones del lado del cliente en la parte inferior derecha.

Proyecto de ejemplo @ code.qt.io