서버 측 데코레이션 컴포저

소개

서버 측 데코레이션 컴포저는 서버 측 창 장식을 구현하는 데스크톱 스타일의 웨이랜드 컴포저 예제입니다.

Qt로 컴포저를 만드는 기본 원리에 대한 소개는 Qt Wayland Compositor 를 만드는 기본 원리에 대한 소개는 Minimal Qt Qml 예제를 참조하십시오.

데코레이션

윈도우 데코레이션이라는 용어는 윈도우 시스템에서 대부분의 윈도우에 수반되는 추가 UI를 의미합니다. 예를 들면 다음과 같습니다:

• 사용자가 클릭하고 드래그하여 창 크기를 조정할 수 있는 창 표면 주변의 그래픽 프레임.
• 창을 이동하는 데 사용할 수 있는 창의 제목 표시줄.
• 창을 최대화, 최소화 및 닫기 위한 시스템 도구 버튼.

전통적으로 웨이랜드에서는 이러한 장식을 렌더링하는 것이 클라이언트의 작업이었습니다. 동시에 창의 위치, 크기 및 상태는 컴포저의 영역입니다. 일부 셸 확장은 선택적으로 서버 측 장식을 지원합니다. 이를 통해 컴포저는 클라이언트에 자체 창 장식을 그려서는 안 된다는 메시지를 전달할 수 있습니다. 대신 컴포저가 창 장식을 그릴 책임이 있습니다. 이는 macOS, Windows 및 X11과 같은 다른 창 시스템에서 데코레이션이 처리되는 방식에 해당합니다. 특정 클라이언트에서는 이를 전혀 지원하지 않을 수 있다는 점에 유의할 필요가 있습니다. 시스템에서 이러한 애플리케이션을 실행할 것으로 예상되는 경우 이 점도 고려해야 합니다.

서버 측 장식의 장점:

• 클라이언트는 Wayland 버퍼에 시스템 UI를 위한 공간을 예약할 필요가 없습니다.
• Qt Quick 그리고 OpenGL 기반 클라이언트는 별도의 FBO로 렌더링하여 웨이랜드 버퍼에 콘텐츠를 복사할 필요가 없습니다.
• 클라이언트 창은 사용 중인 UI 툴킷에 관계없이 일관된 모양을 갖습니다.
• 크기 조정, 닫기, 창 상태 변경과 같은 시스템 기능은 서버와 클라이언트 간에 공유되지 않고 서버에서 중앙 집중화됩니다.

코드

예제 컴포저는 XdgShell 확장자만 지원합니다. 일반적인 방법으로 확장자를 초기화하고 나중에 액세스할 수 있도록 ListModel 에 서페이스를 추가합니다.

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

또한 이 예제에서는 XdgDecorationManagerV1 확장을 초기화합니다. 이를 통해 서버 측 장식을 선호한다는 것을 클라이언트에 전달할 수 있습니다.

인터페이스는 선택 사항이므로 클라이언트가 이를 지원하지 않고 항상 자체 장식을 그릴 수 있습니다. 따라서 모드는 "기본 설정"일 뿐이며 데코레이션을 하기 전에 최상위 창의 실제 모드를 확인해야 합니다.

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

각 창에 대해 그 위에 간단한 제목 표시줄을 만듭니다. 제목 표시줄에는 그라데이션, 일부 텍스트, 위치를 관리하는 DragHandler, 닫기 버튼이 있습니다.

이미지 왼쪽 위에는 데코레이션 관리자 확장 기능을 지원하는 클라이언트가 있고, 오른쪽 아래에는 클라이언트 측 데코레이션이 있는 동일한 클라이언트가 있습니다.

예제 프로젝트 @ code.qt.io