[QT QML]ApplicationWindow and Window

👉🏻 QT QML에서 윈도우 구현시 어플리케이션 윈도우 타입과 윈도우 타입에 대한 설명입니다.
This is a description of application window types and window types when implementing windows in QT QML.

👉🏻 Window :

✔️가장 기본적인 윈도우 컨테이너. 단순 창으로, 메뉴, 툴바, 상태바 등 고급 UI 구성 요소는 없습니다.
The most basic window container. It’s a simple window, lacking advanced UI elements like menus, toolbars, or status bars.

✔️ 윈도우는 게임, 시뮬레이션, 단순 도구 UI, 팝업을 구현하는 경우 사용합니다.
Windows is used for implementing games, simulations, simple tool UIs, and pop-ups.

👉🏻 ApplicationWindow :

✔️ Window를 상속받아 Qt Quick Controls 2에서 제공하는 메뉴바, 툴바, 상태바 등을 쉽게 사용할 수 있도록 확장된 윈도우 타입입니다.
This is an extended window type that inherits from Window and allows easy use of menu bars, toolbars, status bars, etc. provided by Qt Quick Controls 2.

✔️ 어플리케이션윈도우는 일반 데스크탑 앱, 메뉴/툴바/상태바 필수로 사용하는 경우나 macOS 시스템 메뉴 연동 필요한 경우에 사용합니다.
Application windows are used when general desktop apps require menus/toolbars/status bars, or when macOS system menu integration is required.

👉🏻 MacOS 메뉴 특징 / MacOS Menu Features

✔️MacOS에서는 아래의 사진처럼 프로그램의 메뉴는 윈도우에 붙어 있습니다.
On MacOS, the program’s menu is attached to the window, as shown in the picture below.

✔️ MacOS의 시스템메뉴와 충돌하는 경우 메뉴가 나타나지 않을 수 있습니다.
If there is a conflict with the system menu of macOS, the menu may not appear.

👉🏻 윈도우 타입과 어플리케이션의 차이점
Differences between Windows types and applications

항목 / Item	Window	ApplicationWindow
menuBar 지원 menuBar support	없음 / No	있음 (menuBar 속성) Yes (menuBar property)
toolBar 지원 toolBar support	없음 / No	있음 (toolBar 속성) Yes (toolBar property)
statusBar 지원 statusBar support	없음 / No	있음 (statusBar 속성) Yes (statusBar property)
레이아웃 Layout	단순 / Simple	메뉴/툴바/상태바가 레이아웃에 자동 배치됨 Menu/ToolBar/StatusBar automatically managed
기본 컨트롤 Built-in controls	없음 / No	Qt Quick Controls 2 컴포넌트와 호환 최적화 Optimized for Qt Quick Controls 2 components
macOS 메뉴바 macOS system menu	시스템 메뉴바와 연동 불가능함 Not supported	macOS 시스템 메뉴바와 자동 연동 Automatically integrated with macOS system menu bar
윈도우 내부 메뉴 Internal window menu	구현 필요 Must be implemented manually	menuBar 속성 사용 가능 Available via menuBar property

👉🏻 코드 / Code

✔️ 아래는 윈도우 타입과 어플리케이션 윈도우 타입에서 메뉴를 구현하는 코드입니다.
Below is the code that implements the menu in the window type and application window type.

✔️윈도우 타입에서는 메뉴를 구현해야하며 MacOS와 호환되지 않습니다.
The Windows type requires the implementation of a menu and is not compatible with MacOS.

✔️Main.qml

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Window")


    Column {
        anchors.fill: parent

        Rectangle {
            color:"lightblue"
            width:parent.width
            height:30 // 높이 지정하지 않으면 Recangle이 안보임 / Recangle is not visible if height is not specified

            Row{
                anchors.left: parent.left // Row의 왼쪽을 column의 왼쪽에 맞추기 / Align the left side of the row to the left side of the column
                anchors.leftMargin: 10 // 좌측 간격
                anchors.verticalCenter: parent.verticalCenter // 수직 중앙 정렬 / vertical center alignment

                spacing : 20 // Row안에 있는 아이템들의 간격 / Spacing between items in a row

                Text {
                    id:fileText
                    text: "File"
                    color: "#333"
                    MouseArea {
                        
                        // 마우스 클릭 영역을 Text전체로 설정
                        // Set the mouse click area to the entire text
                        
                        anchors.fill: parent
                        onClicked: fileMenu.open(fileText)
                    }
                }
                Text {
                    id:editText
                    text: "Edit";
                    color: "#333"

                    MouseArea {
                        anchors.fill : parent
                        onClicked: editMenu.open(editText)
                    }
                }
            }

        }
        Text{
            text : "Window"
            font.pixelSize: 25
            anchors.centerIn: parent

        }

        // File 메뉴 / File Menu
        Menu {
            id: fileMenu
            title: "File"
            MenuItem { text: "New" }
            MenuItem { text: "Open..." }
            MenuItem { text: "Save" }
            MenuItem {
                text: "Open ApplicatioonWindow"
                onTriggered: {

                    // 새창 띄우기,ApplicationWindow.qml 불러오기 
                    // Open a new window, load ApplicationWindow.qml
                    
                    var component = Qt.createComponent("ApplicationWindow.qml")
                    if (component.status === Component.Ready) {
                        var newWin = component.createObject(null)  // parent 없이 새 창 / New window without parent
                        if (newWin) newWin.visible = true
                    } else {
                        console.log("Error loading component:", component.errorString())
                    }
                }
            }
            MenuItem { text: "Exit" }
        }

        // Edit 메뉴 / Edit Menu
        Menu {
            id: editMenu
            title: "Edit"
            MenuItem { text: "Copy" }
            MenuItem { text: "Paste" }
            MenuItem { text: "Cut" }
        }
    }
}

👉🏻 ApplicationWindow.qml

✔️ 어플리케이션 윈도우 타입에서는 메뉴등을 구현하기가 쉽고 MacOS와 메뉴호환이 가능합니다.
In the application window type, it is easy to implement menus, etc., and menu compatibility with MacOS is possible.

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    menuBar: MenuBar {
        Menu {
            title: "File"
            MenuItem { text: "Open" }
            MenuItem { text: "Close window"; onTriggered: Qt.quit() } //real exit
            MenuItem { text: "Exit" } // macOS에서는 안나타남 / It doesn't appear on macOS
        }
    }

    Column{
        anchors.fill: parent

        Text{
            text: "Application Window"
            font.pixelSize: 25
            anchors.centerIn: parent
        }

    }
}

👉🏻 스크린 샷 / ScreenShot

https://youtu.be/oL-HIUkQLIo