Mac Toolbars for Qt Quick

Published Friday April 8th, 2011
12 Comments on Mac Toolbars for Qt Quick
Posted in macOS, Qt Quick

As Jens wrote a while ago, we are looking into customizing Qt Quick for use on the desktop. In one of the comments he also revealed that I’m working a Mac-specific project. Time to blog!

Toolbar in action : Nothing we haven’t seen on Mac before, although the customize menu is new to Qt applications.

What is different from the current Qt solution? First of all, we’re using NSToolBar instead of QToolBar, which means we get the correct native look and feel (including the desired customization menu) for free. Second, the toolbar can be created just like any other QML item:

MacToolBar {
    MacToolButton {
        text : "Button 1"
        iconSource : "images/qtlogo.png"
        toolTip : "This is button number 1"
        onActivated : status.text = "Button1 Clicked"

     MacToolButton { standardItem : MacToolButton.ShowColors   }
     MacToolButton { standardItem : MacToolButton.Space }

MacToolBars are not drawn on the QML scene, but instead attach a NSToolBar to the window.

The color panel can be accessed in a similar fashon:

MacColorPanel {
    onColorChanged : { status.color = color; }

Finally, if you are using Qt from C++ there is also a QAction-based interface:

QWidget *window = ...;
QtMacToolBar * macToolBar = new QtMacToolBar(window);
QAction * fooAction = macToolBar->addAction("FooButton");
QAction * barAction = macToolBar->addAction("BarButton");

Code is at examples/MacToolbar.qml from qt-components/desktop, branch “mac”.

Removed ampersand from C++ example.

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

Posted in macOS, Qt Quick


Freddie says:

Is it possible that this will become a standard, non-platform specific widget, such as QMainToolBar? I ask as GTK+ has a similar widget as can be seen in the Evince document viewer. (Right click and the ability to customise the toolbar in a similar fashion to Mac OS X appears.)

Mehdi says:

> QWidget *window = …;
> QtMacToolBar * macToolBar = new QtMacToolBar(&window);

It’s sort of strange to pass a reference (&window) to a pointer (window).

Morten Johan Sørvig says:

Freddie: No, this is a Mac-only component. A cross-platform one would be a different project.

Morten Johan Sørvig says:

Mehdi: Good catch! Fixed now 🙂

Jim says:

@Morten Johan Sørvig: I think what Freddie is trying to say is if this will be only a lab project that later will become part of the larger cross-platform widget

Jens says:

Freddie: Well we could only use standard GNOME components in such a case and Evince implementing this is no different from Qt Designer implementing the same feature using Qt. If the functionality was provided as a standard GNOME component, (part of Nautilus, control panel etc), then it could be used. We have been speculating on the idea of writing a Qt Quick implementation of the feature that could be used on other platforms though.

Will Stokes says:

Hrmm, this looks interesting. I’m a Qt C++ user and I have implemented to toolbar in my app. I use QToolBar and also make use of the addWidget function. This allows me to so tricky things like include buttons with pull down buddy widgets, as well as roll my own formatting buttons (bold, ital, etc.) that are linked together in one long bar. You get the idea. While I’d love to give my users the ability to customize the tool bar, without the ability to add QWidgets to the QtMacToolBar I can’t adopt it. I suppose there is no way to add a addWidget(QWidget*) type method huh? Another big problem with this is that my Qt app targets both Mac and Windows. Writing two versions of my tool bar class (a class that extends QToolBar to make updating the buttons and menus that can be poped by clicking and holding on some buttons) would be a royal pain. Right now, by using QToolBar directly, I have the code one compile and run in multiple OS’s behavior I love. I only don’t have the ability to allow the user to customize the icons shown and where they are shown. I wish there was a way you guys could combine the nice aspects of both approaches.

serkol says:

This looks good and promising.

However I’ll stick with QWidgets for at least another year, because it took me 6 months to program a Mac/Win app and I’m not going to re-program it using Quick right away. I hope that the QWidget version of the unified Mac toolbar will also be improved, or at least the bugs will be fixed. Right now it’s impossible to show a context menu by right-clicking on a unified Mac toolbar (QWidgets), because it ignores/looses all mouse events.

QTBUG-11271. Submitted 07/Jun/10. Status: Unresolved.

Merinas says:

This look really interesting, does it require something special to build ? Because build failed on my imac (1.6.7) with xcode 4 installed with some strange errors.

@:0: warning: Mac OS X version 10.5 or later is needed for use of the new objc abi
../../../qt-components-desktop/components/macstyle/ error: QtDeclarative/private/qdeclarativepixmapcache_p.h: No such file or directory@

Anyway, that seems great, and I’ve look at the source and there more than the news is talking about like an access to any basic mac component with the right style.

kkoehne says:

@Merinas: It probably needs a Qt with private headers (available e.g. if you configure your qt with -developer-build).

Merinas says:

Thats mean I need to bluid my own version of Qt ?

Morten Johan Sørvig says:

Merinas: Actually, you can remove that header include. I ended up not using QDeclarativepPixmapCache and forgot to remove it.
Will: Good points. How to mix Qt and native components is one of the central issues I’d like to solve. With this approach is important to realize that the component is a native component first, with an API adaption on top to make it more convenient to use form Qt. So if you subclass something you are actually subclassing the native component (NSToolbar in this case).

Commenting closed.

Get started today with Qt Download now