この記事は Qt Blog の "Toplevel Windows and Menus with Qt Quick" を翻訳したものです。
執筆: Zeno Albisser, 8月26日
素晴らしい Qt Quick アプリケーションがこれまでもたくさん書かれてきましたが、デスクトップ用 QML Components の開発も進んでおり、Qt Quick はもはやモバイルプラットフォームだけのものではなくなってきています。
これまで未対応だった重要な機能の１つが QML アプリケーションの中から直接トップレベルのウィンドウを作成することでしたが、Qt Quick デスクトップ Components の新機能を使用することで C++ のコードを書かずにこの機能が実現できるようになりました。
今回は以下の機能が利用できるようになりました。
- QML から直接トップレベルウィンドウの生成が可能に
- モーダルの設定やウィンドウ装飾の設定が可能に
- トップレベルウィンドウのリサイズや最小化、最大化のための QML のバインディング
- QML の要素でトップレベルウィンドウへショートカット付きのメニューの追加に対応
- スクリーンのジオメトリに関する情報の取得
- ウィンドウ間でのプロパティバインディング
それでは簡単にこれらの機能を見てみましょう。
トップレベルウィンドウ
アプリケーションのメインウィンドウの生成は以下のようになります。
Window {
id: mainWindow
title: "My MainWindow"
width: 640
height: 480
visible: true
}
子ウィンドウの生成は、別の Window 要素を最初のウィンドウの内部に生成し、visible を true に設定するだけです。また、親ウィンドウが閉じられた場合には自動的に子ウィンドウも破棄されます。
モーダルとウィンドウの装飾
モーダルとウィンドウの装飾の設定も可能です。
Window {
...
windowDecoration: true
modal: true
}
サイズの制約
以下のようにウィンドウにサイズの制約を設定することも可能です。
Window {
...
minimumWidth: 100
minimumHeight: 100
maximumHeight: 400
maximumHeight: 400
}
デスクトップのジオメトリ
大半のアプリケーションではウィンドウの最大サイズはスクリーンの解像度とスクリーン上の表示領域により決まります。このため、グローバルな screenCount と、スクリーン毎の screenGeometry や availableGeometry を提供する 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"
}
}
}
メニュー、サブメニュー、ショートカット
MenuBar や Menu、MenuItem を使用することにより、ネイティブのメニューバーやメニューをデスクトッププラットフォーム上で生成することが可能です。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 ブランチにあります。
このリポジトリに含まれる２つのサンプルはとても参考になるでしょう。
examples/TopLevelBrowser は QtWebKit の WebView 要素を使用したシンプルなウェブブラウザです。ブラウザとしては完璧ではないかもしれませんが、タブの追加や削除、新しいウィンドウでの表示などの機能を実装してあるので参考にしてください。
この新しい機能を是非お試しください。そして気に入ってもらえるとうれしいです。
