Porting Qt apps from desktop to mobile: look and feel: developer responsibilities

Porting a cross-platform app from desktop to mobile is non-trivial!  Especially porting cross mobile platforms (Android and iOS.)

About

A brief overview of look and feel differences when porting a Qt app from desktops to mobile platforms. Emphasizing the divide of responsibilities between developer and Qt .  In other words, a to-do list for app developers, with some how-to for Qt.

For each topic:

  • nature of the problem
  • what Qt solves
  • what a developer must solve
  • references to relevant Qt documentation

This is:

  • time sensitive: Qt and others may solve some problems.
  • preliminary draft: not definitive, as I am just starting to explore this topic

Topics /Contents

A different word/widget for everything

Mobile platform islanding

Small screen

Gestures and touch

Look (platform style)

Single window

Dynamic orientation

Quitless

File system / document-centered

Printing

Screen resolution

Virtual keyboards

Version lag

Sensor gestures and undo

Share / Drag and drop

Settings

Examples and references

An example app from Qt that crosses desktop and mobile: QuickForecast including source weather-app

A similar post about native look-and-feel with Qt.

A different word/widget for everything

Mobile platforms use different widgets (feel?) For example iOS uses ActionSheets (now deprecated in iOS8 in favor of AlertControllers.) Some of these widgets may have no corresponding widget in Qt.  (Although an iOS ActionSheet is just a pop-up QMenu?)

Qt Widgets doesn’t seem to have specialized their widget behaviour for mobile platforms. Qt QML seems to be more targeted for mobile platforms, including the widget classes that only the mobile platforms have, and using native widgets so that their style (look) is correct for the platform.

Developer might need to implement widgets unique to each platform (to achieve native feel.)  For example, here is a QtWidgets implementation of a mobile widget (Toolbar or ActionBar) that largely achieves the Android platform’s look and feel.  (I’m not sure it achieves iOS look and feel.)

Mobile platform islanding

The mobile platforms attempt to differentiate themselves.  Usually they claim user interface reasons (this is the best way to do UI) but possibly just for business marketing reasons.  See Pure Android. (Whenever you see the word ‘pure’ you know that marketing and politics are involved.  99.99% pure. )  For example, toolbars are on the bottom in iOS, and at the top in Android.

Qt solved some of this on the desktop, for example, adapting differences in the menubar among desktop platforms.  Has Qt solved if for mobile platforms?

This is related to gestures, there is not a universal set across mobile platforms.

Small screen

This is the major hurdle.  Unless your app was designed from the start for mobile platforms.  Related to feel.

Smart phones have less GUI real estate.

Qt doesn’t fully solve this? Some widgets may automagically adjust to a smaller size, for example by scrolling?

A developer may need to:

  • redesign many dialogs, menus, and toolbars to take less space.
  • use different interaction techniques and widgets

Gestures and touch

Mobile platforms use multi-touch instead of pointers (mice, etc.)

Qt supports gestures and touch.

Developer:

  • learn and implement gestures/touch.  There is a significant learning curve, since it involves elements of multi-processing/concurrent programming: gestures may happen concurrently and be canceled.
  • may need to implement gesture recognizers for gestures not built into Qt (e.g. TapTapSlide on WinRT)
  • may need platform specific code to adapt the semantics of gestures where the semantics are not the same across platform (for example, TapAndHold is similar to RMB on desktops, but WinRT says it ‘shows option’ while iOS seems to limit it to text items?)

Look (platform style)

Mobile platforms have their own style.

Qt provides stylesheets/themes for the platforms.

!!! Except not for QtWidgets on iOS !!! (Just using QML.  Since iOS does not expose enough to Qt.  See this long discussion on the Qt dev mailing list. )

Developer may need to use QML, or avoid iOS, or implement and style their own widgets.

Single window

Mobile platforms do not have a window manager.  Each of an app’s top-level windows (called a view on mobile platforms?)

Qt:  ???? I don’t know whether for example QToolBar is specialized for mobile platforms.

Developer: add a navigation toolbar so user can navigate between screens (‘navigate an information hierarchy or manage screen content’ .)  Called a ‘Navigation Bar’ on iOS

Dynamic orientation

A user expects to be able to rotate a mobile device from landscape to portrait orientation, and for the app to adjust in real time.  On a desktop, a user can rotate their screens, but they must restart the OS and apps.

Qt provides needed signals and methods.

Developer:

  • react to orientation changes, especially if an orientation change requires a change to the app’s feel (widgets).
  • mobile platforms support restriction of an app to certain orientations (say to landscape) but an app may still need to recognize physical ‘command’ button on right or left.

Quitless

On mobile platforms, a user hardly ever quits an app, instead just putting it in the background.  There is usually no File>Quit and no Close icon in a window title bar.  However, this is not unlike Sleep on desktops, which requires apps to be able to resume where they left off.

Qt supports state changes for applications.

Developer may need to save more context in settings?

File system / document-centered

Mobile platforms do not emphasize files and filesystems, or provide file browsers.  Mobile platforms sandbox (limit access) to the filesystem.  New is iOS8 is a feature called ‘Document Provider’, which seems to treat each application as a repository of document types (MimeTypes.)

QtWidgets QFileDialog seems to work on mobile platforms, but it is inappropriate for most users.  QML FileChooser???

Developer must provide their own dialogs for managing saved content.

Printing

Users don’t often print from mobile devices.  Note that simplified print support is new to iOS8.  Android?

Qt currently does not support the printing architectures of mobile platforms (the module QtPrintSupport is not compiled.)

A developer should wait for Qt to adapt QtPrintSupport to the mobile platforms?

Screen resolution

Mobile platforms often have higher resolution (pixels per inch) since a user holds the device closer.  (However, desktops are also trending to higher resolution just because it looks better.)  But I think this is orthogonal to screen size.  A mobile device may have a high resolution yet still have a small screen in terms of Point (Device Independent Pixels.)  Qt supporting high resolution does not magically solve the problem of a small screen.

Qt provides support for higher resolution using the concept of Device Independent Pixel (or Point.)

Developer may still have work to do?  See Qt’s Weather App, where the use a ratio?

See Retina Support in Qt

Virtual keyboards

A user on mobile platforms may not have a physical keyboard, but a virtual keyboard.  Also known as Software Input Panel or SIP (in Qt.)

Qt supports virtual keyboards transparently for TextEdit widgets.  However, they don’t expose the underlying classes, so it might be difficult to use if your app doesn’t use stock TextEdit widgets?

A developer must learn how to control a virtual keyboard via Qt’s methods on TextEdit.

QApplication.autoSipEnabled

WA_InputMethodEnabled

Version lag

The platforms roll out new versions more often than on the desktop.  Qt lags behind.  For example, iOS8 is out but Qt will not have bug free support until Qt 5.4?

Qt is committed to supporting new versions (and hopefully they will reduce the lag.)

Developer: suffer the delay, or contribute to Qt.

Sensor gestures and undo

Users on mobile platforms use sensors as input methods.  Desktops don’t (a desktop computer doesn’t move, i.e. change location.)  But mobile users expect to request undo using a shake.  Undo is common to both desktops and mobile.

Qt provides a plugin for gestures from sensor.  Qt does not seem to automatically convert a shake gesture to an undo event.

Developer must implement avail sensor gestures and call app undostack methods.  In other words, add mobile specific code to subscribe to sensor gestures, and connect the shake gesture to undo.

Share / Drag and drop

Since mobile platforms are single window, a user can’t drag and drop between windows.  Sending data between apps (typically social websites, but also including copy to clipboard, and printing) is known as ‘sharing.’  On mobile platforms, a user presses a ‘Share’ button and expects a view of targets that accept the current content.

Qt doesn’t yet seem to support this notion (UIActivityViewController on iOS, Intent.createChooser() on Android.)

Developer:

  • disable drag and drop.
  • implement this themselves, or contribute a solution to Qt?

Settings

On a desktop, an app usually provides a dialog for settings.  On a mobile platform, a user accesses the settiings for an app by choosing the system settings button, then finding your app in a list.

Qt doesn’t make this change automagically?

Developer: ??

Advertisements