Multi-platform QML: A hacker's guide

I use QML for PhotProc. The app is mostly targeting Symbian, which QML works very well for. But, it would be good if PhotProc worked on other platforms. One user asked for it to be available on Windows, because it processes very very large images quite well. I assumed this would be easy, but it turns out to be surprisingly hard.

The problem is that under Symbian, QML programmers use Symbian-specific classes. If you put the import for those Symbian-specific classes in your QML files, you get an error under Windows. This breaks pretty much everything when doing cross-platform development.

What you can't do in QML is what you would do in C++, which is use a #ifdef for each platform. You're not allowed to do that.

Instead, what I did, was use some features of QML, with some directory hacking, which looks a little ugly, but actually turned out quite well in the end!

The first step is to take all of your platform-specific components and put them in a directory. If you want a button, create your own button class and put that in its own QML file. Then, use that QML class in your app instead of platform-specific buttons. This lets you use Symbian-specific buttons on Symbian, and write your own button QML classes for other platforms using things like MouseArea.

The problem is, how do you get each platform to "see" a different set of QML classes. The solution I chose was to "deploy" a different platform-specific directory for each platform.

Here's what my QML directory structure looks like:
QML
^-PhotProc
^-PlatformSpecific
^-Symbian
^-Windows