We have already been writing shiny Qt Quick applications for a while now. Thanks to the people working on Qt Quick Desktop Components, Qt Quick is no longer interesting only on mobile platforms.
One of the fundamental things that was still missing, is the possibility to create a toplevel window directly inside a QML application. This is now possible without writing any additional C++ code, by using the new functionality provided in the Qt Quick Desktop Components repository.
The provided functionality includes:
- Creating toplevel windows directly in QML
- Define window modality and window decorations
- Use QML bindings to resize / minimize / maximize a toplevel window
- Adding menus with shortcuts to a toplevel window using QML items
- Gather information about the screen geometry
- Create property bindings across several windows
Lets take a brief look at those features.
A Toplevel Window
This is how a main window for your application can be created:
Window {
id: mainWindow
title: "My MainWindow"
width: 640
height: 480
visible: true
}
If you want to create a child window, simply create another Window item inside the first one and set visible to true. Of course the child window will be deleted automatically as soon as the parent window is being closed.
Modality and Window Decorations
The modality or window decorations can be defined as well:
Window {
...
windowDecoration: true
modal: true
}
Size Constraints
If your window should have certain constraints on size you can apply these as follows:
Window {
...
minimumWidth: 100
minimumHeight: 100
maximumHeight: 400
maximumHeight: 400
}
Desktop Geometry
For a lot of applications the maximum window size is obviously tied to the available screen resolution and the available space on screen. Therefore we also export a Desktop item that delivers screenGeometry and availableGeometry per screen as well as a global screenCount. If you are interested in this information please take a look at the Gallery.qml example.
Minimize, Maximize and Normalize
In case you want your window to be minimized, normalized or maximized on a certain event, you can use the windowState property of the Window item to achieve this:
Button {
...
onClicked: window.windowState = Qt.WindowMaximized
}
Property Bindings across several Windows
Due to the fact that the scenes of different windows still share the same declarative engine, it is perfectly viable to create property bindings across several windows. Simply refer to an object in a different window as you are already used to do with QML Items.
Window {
...
Rectangle {
id: myRect
color: "green"
}
Window {
...
MouseArea {
anchors.fill: parent
onClicked: myRect.color = "red"
}
}
}
Menus, Submenus and Shortcuts
Using the QML items MenuBar, Menu and MenuItem you can actually create native menubars and menus on desktop platforms. A Menu can have several MenuItems and of course also nested Menus.
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;
}
}
}
...
}
Context Menus
Sometimes it is also nice to have a ContextMenu for certain options. In that case some javascript certainly needs to be involved.
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)
}
Getting rid of QmlViewer's MainWindow
When using qmlviewer there will always be qmlviewer's main window visible on the screen that can not be styled with additional Menus.
You can avoid this by using the provided qmldesktopviewer application instead. If you decide to use qmldesktopviewer for this purpose, make sure that your main QML file's root item is a Window.
$ ./qmldesktopviewer/qmldesktopviewer examples/TopLevel.qml
Available Code and Examples
Currently all the code and examples can be found in the Qt Quick Components for Desktop repository in the master branch.
The repository also contains two examples that might be helpful.
There is the file examples/TopLevel.qml which wraps around the regular Gallery and adds menus and toplevel window behavior.
Further there is also examples/TopLevelBrowser.qml, a very simple webbrowser based on QtWebkit's WebView Item. While this very simple browser might not give you the best browsing experience, it serves great as an example for opening and closing tabs or even new browser windows on the fly.
Have fun experimenting with this new feature set. And let us know how you like it.
