Porting QT Desktop app to Mobile

[steveq]

Hey Gurus,
I've done many searches on the internet and on this forum, and with everything I have read, I still can't quite pull this together in my head.
I have written a fairly large desktop app, a client and a server. It is a QtWidgets application and is now in beta test stage. The server is running on my Raspberry Pi (how good it QT!!!) and the client is running on both PC and Mac. As hindsight is a wonderful thing, I have now realised that the client would also be very handy on IOS or Android.
All my dialogs in the app are created in QT Designer and all have their respective .ui files, with the exception of one class where I dynamically create my dialog based on specific conditions.

How do I port my QtWidgets app to a mobile platform?

Clearly I need to create a second (and maybe more) GUI for mobile, but how do I do this, and embed it into my current application?

I've read a fair bit about QtQuick and QML, but I don't know if I need to use these, and if so I don't understand how to use these and embed them into my application.

For example in my code, if I want to do something simple like set the text of a label it would be something like:

ui->label->setText(tr("My Label"));

How does this translate to mobile?

I suspect I may have to do a fair bit of code redesign to get this to work, but I don't know where to start. I intend to write a basic "Hello World" app with a couple of buttons and slots etc, and once I know how, I'll port this to mobile before I attempt to modify my main app.

I've found this: https://wiki.qt.io/How_to_Port_From_Desktop_to_Mobile which has been somewhat helpful, but I still am having trouble grasping what I need to do to my app.

I'd really appreciate it if someone could please point me in the direction on how to do this.

Thanks heaps everyone.

Steve Q. :-)

[sierdzio]

QtWidgets module if fully supported on mobile platforms. You can just compile and run your desktop app on Android and iOS.

... however, it will probably look bad ;-)

If you have done your desktop app the good way - with clear separation of UI and business logic, then adding mobile UI in QML would be just a matter of replacing the call to QMainWindow with instantiation of QML engine in your main.cpp. The two can be separated by means of an #ifdef.

ui->label->setText(tr("My Label"));
How does this translate to mobile?

As said, if you use widgets, they will just work... but in QML it will be this:

Label {
  id: label
  text: qsTr("My Label")
}

// Or in some slot or JS function:
Button {
  onClicked: label.text = "some other text"
}

The key thing to understand about QML is that it is declarative. : is a binding, while = is an assignment (which destroys a binding if there is any). In other words:

text: someObject.value

This code will always and automatically update your text when value changes. But:

// Some JS function
label.text = someObject.value

This assigns the current value only - it won't be updated anymore.

[steveq]

Thanks @sierdzio that's terrific information!

If I were to use Qt Designer to create my GUI, would I use the QtQuick UI File option in the designer options?

[sierdzio]

@steveq said in Porting QT Desktop app to Mobile:

Thanks @sierdzio that's terrific information!

If I were to use Qt Designer to create my GUI, would I use the QtQuick UI File option in the designer options?

You can, yes.

I can't say if it works well, though, I always write QML code manually.

[steveq]

Okay awesome. I'll try using designer first, the QML it generates will give me a good insight as to how it works.

Thanks so much for your help @sierdzio

:-)

[steveq]

Hi @sierdzio ,

I've started playing with this on a simple "Hello World" type app.
I have a couple of questions and I wonder if you wouldn't mind helping me out please?

In my main.cpp:

#if defined (Q_OS_WIN) || defined (Q_OS_OSX) || defined (Q_OS_UNIX)
MainWindow w;
w.show();
#elif defined (Q_OS_IOS)
#endif

I'm not sure what to use inside the IOS define. At first I though it was:

QDeclarativeView window;
window.showFullScreen();
window.setSource(QUrl::fromLocalFile("main.qml"));

But this seems to have been deprecated. What should I do here please?

Also how do you deal with screen resolution differences with iPhones and iPads and how do you handle screen rotation and repositioning widgets etc?

I'd love to find some sort of online tutorial showing you how to build an IOS app that will run using QWidgets, but in all my searches, I haven't found one yet.

Thanks once again for all your help.

Steve Q. :-)

[sierdzio]

@steveq said in Porting QT Desktop app to Mobile:

But this seems to have been deprecated. What should I do here please?

Yes, QDeclarative* is old QtQuick 1 module from Qt 4. Nowadays every QDeclarativeSomething class is named QQuickSomething instead.

There are many ways to set up QML UI, the easiest is to use QQuickView, although nowadays QQmlApplicaitonEngine seems to be the preferred approach.

I'd say this: create a new QtQuick app, using the wizard from Qt Creator - it will contain simple boilerplate code, configs etc. which you can then copy into your app (and anaylse / understand in the simple app).

Also how do you deal with screen resolution differences with iPhones and iPads

The easiest solution is not to deal with it at all. Bigger screen will just stretch the UI and show more stuff (more list items, more buttons etc.). If your app design contains different UI for larger screens, though - you can use dynamic QML (Loader element, or Qt.createQmlComponent()) to load different screens on different screen sizes.

and how do you handle screen rotation and repositioning widgets etc?

Qt handles that automatically. Just use QML Layouts (or anchors) to make sure what UI stays coherent after changing to landscape.

Details - depends on design of your app. Some solutions work great in both landscape and portrait (and it's also the approach used by most apps - UI is the same regardless of screen orientation).

I'd love to find some sort of online tutorial showing you how to build an IOS app that will run using QWidgets, but in all my searches, I haven't found one yet.

I don't know any either.

[steveq]

Thanks so much @sierdzio

Your help is very much appreciated!