Qt Quick でのトップレベルウィンドウとメニュー

Published Tuesday August 30th, 2011
Leave a comment
Posted in Qt Quick | Tags: , ,

この記事は Qt Blog の “Toplevel Windows and Menus with Qt Quick” を翻訳したものです。
執筆: Zeno Albisser, 8月26日

素晴らしい Qt Quick アプリケーションがこれまでもたくさん書かれてきましたが、デスクトップ用 QML Components の開発も進んでおり、Qt Quick はもはやモバイルプラットフォームだけのものではなくなってきています。

これまで未対応だった重要な機能の1つが QML アプリケーションの中から直接トップレベルのウィンドウを作成することでしたが、Qt Quick デスクトップ Components の新機能を使用することで C++ のコードを書かずにこの機能が実現できるようになりました。


今回は以下の機能が利用できるようになりました。

  • QML から直接トップレベルウィンドウの生成が可能に
  • モーダルの設定やウィンドウ装飾の設定が可能に
  • トップレベルウィンドウのリサイズや最小化、最大化のための QML のバインディング
  • QML の要素でトップレベルウィンドウへショートカット付きのメニューの追加に対応
  • スクリーンのジオメトリに関する情報の取得
  • ウィンドウ間でのプロパティバインディング

それでは簡単にこれらの機能を見てみましょう。

トップレベルウィンドウ

アプリケーションのメインウィンドウの生成は以下のようになります。

Window {
    id: mainWindow
    title: "My MainWindow"
    width: 640
    height: 480
    visible: true
}

子ウィンドウの生成は、別の Window 要素を最初のウィンドウの内部に生成し、visibletrue に設定するだけです。また、親ウィンドウが閉じられた場合には自動的に子ウィンドウも破棄されます。

モーダルとウィンドウの装飾

モーダルとウィンドウの装飾の設定も可能です。

Window {
    ...
    windowDecoration: true
    modal: true
}

サイズの制約

以下のようにウィンドウにサイズの制約を設定することも可能です。

Window {
    ...
    minimumWidth: 100
    minimumHeight: 100
    maximumHeight: 400
    maximumHeight: 400
}

デスクトップのジオメトリ

大半のアプリケーションではウィンドウの最大サイズはスクリーンの解像度とスクリーン上の表示領域により決まります。このため、グローバルな screenCount と、スクリーン毎の screenGeometryavailableGeometry を提供する Desktop 要素も提供します。もしこれに興味がある方は Gallery.qml のサンプルをご覧ください。

最小化、最大化、通常表示

ウィンドウの最小化、最大化、通常表示をしたい場合には、Window 要素の windowState プロパティで変更が可能です。

Button {
    ...
    onClicked: window.windowState = Qt.WindowMaximized
}

ウィンドウ間でのプロパティバインディング

複数のウィンドウで同じエンジンを共有しているため、ウィンドウ間でのプロパティバインディングも問題無く動作します。異なるウィンドウのオブジェクトへの参照は、既存の QML 要素への参照方法と同じです。

Window {
    ...
    Rectangle {
        id: myRect
        color: "green"
    }
    Window {
        ...
        MouseArea {
            anchors.fill: parent
            onClicked: myRect.color = "red"
        }
    }
}

メニュー、サブメニュー、ショートカット

MenuBarMenuMenuItem を使用することにより、ネイティブのメニューバーやメニューをデスクトッププラットフォーム上で生成することが可能です。Menu には複数の MenuItems を持つことができ、Menu のネストも可能です。

MenuBar {
    Menu {
        text: "File"
        MenuItem {
             text: "Quit"
             shortcut: "Ctrl+Q"
             iconSource: images/quit.png
             onTriggered: Qt.quit()
        }
        ....
    }
    Menu {
        text: "Edit"
        Menu {
            text: "Advanced"
            MenuItem {
                text: "Maximize"
                shortcut: "Ctrl+M"
                iconSource: images/fullscreen.png
                onTriggered: window.windowState = Qt.WindowMaximized;
            }
        }
    }
    ...
}

コンテキストメニュー

ContextMenu も必要な場合があります。この場合は JavaScript が若干必要です。

ContextMenu {
    id: contextMenu
    MenuItem {
        text: "Copy"
        shortcut: "Ctrl+C"
        onTriggered: copy()
    }
    MenuItem {
        text: "Paste"
        shortcut: "Ctrl+V"
        onTriggered: paste()
    }
}
MouseArea {
    anchors.fill: parent
    acceptedButtons: Qt.RightButton
    onPressed: contextMenu.showPopup(mouseX,mouseY)
}

QmlViewer のメインウィンドウについて

qmlviewer を使用する場合は、常に qmlviewer のメインウィンドウが表示されるため、メニューの設定等を適用することができません。
この問題を解決するために qmldesktopviewer というアプリケーションを用意しました。qmldesktopviewer を使用する場合は QML ファイルのルート要素は必ず Window にしてください。

$ ./qmldesktopviewer/qmldesktopviewer examples/TopLevel.qml

ソースコードとサンプル

全てのソースコードとサンプルは Qt Quick Components for Desktop のリポジトリ の master ブランチにあります。

このリポジトリに含まれる2つのサンプルはとても参考になるでしょう。
examples/TopLevelBrowser は QtWebKit の WebView 要素を使用したシンプルなウェブブラウザです。ブラウザとしては完璧ではないかもしれませんが、タブの追加や削除、新しいウィンドウでの表示などの機能を実装してあるので参考にしてください。

この新しい機能を是非お試しください。そして気に入ってもらえるとうれしいです。

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt Quick | Tags: , ,

Leave a Reply

Your email address will not be published.

Get started today with Qt Download now