서버 측 장식 컴포지터

소개

서버 측 장식 컴포지터는 서버 측 창 장식을 구현하는 데스크톱 스타일의 Wayland 컴포지터 예제입니다.

Qt를 사용하여 Qt Wayland Compositor 에 대한 소개는 최소 Qml 예제를 참조하십시오.

장식

'창 장식'이라는 용어는 윈도우 시스템에서 대부분의 창에 수반되는 추가 UI를 의미합니다. 그 예로는 다음과 같은 것들이 있습니다.

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

전통적으로 Wayland에서는 이러한 장식 요소를 렌더링하는 것이 클라이언트의 역할이었습니다. 반면, 창의 위치, 크기 및 상태는 컴포지터의 영역입니다. 일부 셸 확장 기능은 선택적으로 서버 측 장식 요소를 지원합니다. 이를 통해 컴포지터는 클라이언트에게 자체적으로 창 장식 요소를 그리지 말아야 한다는 사실을 알릴 수 있습니다. 대신, 컴포지터가 창 장식을 그리는 역할을 담당합니다. 이는 macOS, Windows, X11과 같은 다른 윈도우 시스템에서 장식이 처리되는 방식과 일치합니다. 일부 클라이언트는 이를 전혀 지원하지 않을 수 있다는 점에 유의해야 합니다. 시스템에서 이러한 애플리케이션을 실행할 것으로 예상된다면, 이 점도 고려해야 합니다.

서버 측 장식(decorations)의 장점:

• 클라이언트는 Wayland 버퍼 내에서 시스템 UI를 위한 공간을 따로 확보할 필요가 없습니다.
• Qt Quick 또한 OpenGL 기반 클라이언트는 별도의 FBO에 렌더링한 후 그 내용을 Wayland 버퍼로 복사할 필요가 없습니다.
• 사용 중인 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