Archives For Qt for Mobile

Qt mobile APP development (Android, iOS, Windows 10)

Publish to Google Play Store for Work

Your BlackBerry UEM Admin must publish your APP to Google Play Store for Work.

The APP must not be uploaded to Google Play but will be registered.

The workflow is similar to publishing a ‘normal’ APP to Google Play, so you need screenshots, artwork, description, …

Here’s a guide what the Admin has to do:

This guide is from 2016 – but the workflow still is the same. All described for BES12 will work using UEM 12.6

As soon as Google has approved the APP the Admin can configure on which devices / users / user-groups the APP should be installed.

Developer Policies

The Admin typically will create Policy profiles matching the rights a user-group should have for work APPs.

Attention: To be able to deploy debug builds from QtCreator to your device the Admin must add these extra policies to developers:

  • Apps
    • Allow installation of non Google Play apps
    • Allow developer options

If you cannot deploy and run work apps from QtCreator ask your Admin if these policies are set for your device.


← Back (Activate Android Device for Work)

→ Next Article (Debug and Run managed Qt Android App | QtCreator)

⇐ Home (Overview / Topics)


There are different ways to activate a Device:

  • Managed Accounts
  • Google Domains

My example and sceenshots are based on ‘Managed Accounts’, which is the easiest way. If you’re using Google Domains then it’s much more complex and for each User you need a dedicated Work Google Play Account. The newest BlackBerry UEM 12.6 supports ‘Managed Accounts’.

To activate a Android device for work (‘Managed Account’), you’ll receive an eMail from the Admin (email address, password)

BlackBerry UEM Client

Please download the BlackBerry UEM Client APP from Google Play

Open the UEM Client and enter email address and password.

Configure your profile.

Device will be activated:

Play Store for Work

Automatically some work apps will be added. Here you see the Play Store for Work (left) and the usual private Play Store:

Please open the Play Store for Work. If you don’t have used a Google Mail address (different from your personal Goofle Mail address) for activation, it can happen that you get an error:

try to switch off / on the airplane-mode or restart the device to see your work apps.

Your Work APPs

in this case there’s one app available – the app you sent to the admin:

Two APPs (Work, Private)

Install the APP as usual and you’ll get 2 APPs: one as private, one as work app:

we only need this app as work APP, so you can delete the private one.

Now as your APP exists as a work APP you can deploy updates from Qt Creator and use the work profile.

Android for Work Statusbar

Open your work APP and take a look at Android statusbar:

you’ll always see if the current APP is a work app and you’ll also see if currently there’s a secure connection to server (VPN)

Secure Connection

All your Work APPs will use the secure connection. There’s also a second Browser: Chrome for Work. Opening sites from Chrome for Work or accessing URLs from your Work APP always goes thru the secure connection – this means those URLs will be opened behind the firewall same way as if you’re sitting in your office using the Intranet. Data used by Work APPs is encrypted and secure out of the box on transport and also on your device.

Secure Boot

Using BlackBerry Android Devices there’s some extra security built into the hardware. Those devices cannot be rooted.

Read more here and here.

BlackBerry and Android Devices ? You have read that there will be no more Devices built by BlackBerry ?

Yes – BlackBerry finished transition from hardware to software. BlackBerry licensed Devices to partners, but verifies security. First new device was presented by TCL at Mobile World Congress in Barcelona: keyONE with Android Nougat 7.1 – three more new devices will follow. BlackBerry Android Devices always get the monthly security updates for Android – per ex. Security Patches from march 2017.

It’s up to you or your customers how many levels of security they need. Android for Work is the first step, using devices with secure boot the next one.

Samsung does something similar with Samsung KNOX and Samsung devices, but fails with monthly security updates.


← Back (Overview managed Android Devices)

→ Next Article (Deploy Android Work App to Google Play)

⇐ Home (Overview / Topics)


If you’re developing mobile business apps sooner or later customers will request to debug, build and run on managed devices. This blog post is focused on Google for Work | Android Enterprise (aka Android for Work).

Google for Work | Android Enterprise

There are different ways to run work applications: devices may only contain work apps or private and work apps are installed together. From my experiences in most cases there are private and work apps together on devices. Read more about EMM (Enterprise Mobile Management) and different scenarios here.

There are some EMM solution providers:

  • BlackBerry
  • Mobileiron
  • VMware AirWatch

BlackBerry UEM 12.6

My examples are based on BlackBerry UEM 12.6 (formely known as BES 12)

You can try out UEM for 30 days (Cloud version) or 60 days (on-premises) for free.

Using a managed device is like working behind the firewall via VPN, but all is transparently managed by the EMM solution provider.

EMM Admin manages users, user groups, devices, policies and apps. Here you can download the policies for BlackBerry UEM. Get an overview of BlackBerry UEM here.

Development Stages (Dev, Test, Production)

Developing a new app there are typically 3 stages:

  1. develop UI with MockUp data (no access to servers needed)
  2. test against test environment
  3. release for production environment

Stage 1 I’m using GooglePlay Closed Beta Test to deploy the apps to beta testers from customer. Adding testers only gMail address is needed.

For stages 2 and 3 your device must be activated as Android for Work device or you should request a device to test on from your customer. This is the only way to get access to data servers behind the firewall – in most cases there will be no URL you can use from outside. One device can only be activated as work device for one server (BlackBerry UEM).

It’s highly recommended to test your APP as Work APP – the admin can forbid features (Bluetooth, NFC, Camera, …)

To manage apps your customer has to use a Google developer account to be able to publish apps through Google Play for Work.

Multi Android Package Names in Manifest

Attention: you must change the Android package name to enable your customer publishing the app to Google Play for work because the package name from stage 1 is already connected to your own Google developer account from Beta testing.

Also your Enterprise Customers can have different environemts for dev, test, production with different Google Developer Accounts to get a specific Play Store for Work for each environment. This means you must build releases for up to three or more different package names. Changing the package name manually in Android Manifest is not so comfortable. You can have a dynamic way following this blog article.

Best would be Qt Creator supports this directly using variables in .pro. see QTCREATORBUG-17863

Develop – Test – Release Workflow for Work APPs

Here’s an example workflow:

  • add your APP to Google Play Closed Beta Test (Android package name: my.example.beta)
  • deploy updates to beta testers until stage 1 finished
  • build release (Android package name: my.example.test) and send APK to your customer
  • your customer publishes APP to GooglePlay for Work
  • your customer creates user and profile for you and adds the APP to your user or user group
  • your customer sends an email to activate a device
  • you activate your device and install the APP from Google Play for Work on your device
  • now you can develop, build and run your APP from Qt Creator
  • build update releases and send to your customer
  • your customer publishes update to Google Play for Work so others can test your update

Hint: you can only build and run your app as work app if customer has published your app once to Google Play for Work and you installed it once !

Following pages will explain the steps in more detail:


← Back (EclipseCON Europe)

→ Next Article (Activate Android Device for Work)

⇐ Home (Overview / Topics)


you should already have installed the patch for QTBUG-59026 (RadioButtons Type) if you’re developing Android Apps.

While updating my projects from Qt 5.7 to 5.8 I was running into another show-stopper-bug:

Using the Drawer or Bottom Navigation Bar some color from pressing the buttons down remains after fingers are released. This happens on Android and iOS and the amount of color is different from case to case – sometimes not easy to detect.

Here are some screenshots so you can verify if this happens also in your apps:

drawer_presses

drawer_itemdelegate

Running example Apps like QtQuickControls2 Gallery all works well.

It took me some time to have a small reproducable test case and I opened QTBUG-59293

Again @jpnurmi could help and provides a patch.

Material: force ripple background when hidden

force_reset_ripple_bg

Now it’s easy to patch.

Hint: this time we must do this for the Android kit and also for the iOS kit.

Open a Terminal and do this to patch your Android Kit.

Attention: I’m using the Android repo I already cloned for the first patch.

export ANDROID_NDK_ROOT=/your_path_to/android-ndk-r10e
cd /your-path-to-store-cloned-repo_android
cd qtquickcontrols2
git fetch https://codereview.qt-project.org/qt/qtquickcontrols2 refs/changes/64/187564/1 && git cherry-pick FETCH_HEAD
/your-path-where-qt-is-installed/5.8/android_armv7/bin/qmake
make
make install

Now we’re doing the same for iOS. Create a folder where you want to store the repo. Then:

cd /your-path-to-store-cloned-repo_ios
git clone --branch 5.8 git://code.qt.io/qt/qtquickcontrols2.git
cd qtquickcontrols2
git fetch https://codereview.qt-project.org/qt/qtquickcontrols2 refs/changes/64/187564/1 && git cherry-pick FETCH_HEAD
/your-path-where-qt-is-installed/5.8/ios/bin/qmake
make
make install

Hint: ‘make’ can take some time

There are some other ways you only have one repo for Android and iOS – see comments from @jpnurmi at QTBUG-59293.

Now the Ripple Effect is working again inside a Drawer with Qt 5.8 and QtQuickControls2 🙂

One use-case is left where some color remains, but there’s a workaround, so I can go on moving my projects from 5.7 to 5.8

 

thanks @jpnurmi helping me to make this work.


← Back (Patch Qt 5.8 (BUG 59026))

→ Next Article (Update 5.7-5.8 – mostly harmless)

⇐ Home (Overview / Topics)


Update 2017-03-24: Added info about problems with Popups and Android BACK key

Update 2017-03-13: updated my openssl – repo to fix crash with QNAM

Update 2017-03-09: Added info Adding OpenSSL, added reference to comment from Tobias Hunger on ‘…choose a mkspec…’

Update 2017-03-07: Added a) very first iOS build signing issues and b) iOS Build Issues (patch bitcode.prf)

Update 2017-03-06: Critical QTBUG-59293 fixed – see patch

I’m not using the Maintenance Tool – I’m always installing a new Qt Release at a different location and also start Qt Creator with -settingsPath as blogged here

Then it’s easier to work with old and new release side-by-side and compare.

Update QML Imports

From a technical point you can use the ‘old’ imports. I’m always doing search/replace to update the imports. Then I’m sure all my QML files are accessing the newest Controls and Properties. Updating from  5.7 to 5.8 I replaced

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0

with

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

Using a source control system like Git it’s a good idea to do this in an extra Branch – then it’s easier to go back if something went wrong.

First Test with Demo and Conference Apps

While writing this blog series on Qt for Mobile I developed some Demo Apps, where each Demo App has a specific Focus. This makes it easy to do the tests step-by-step.

I’m replacing the Imports, then compile and run the App on Android and iOS devices and take a look at Compile- and Application Output and Issues and go through the apps to see if all works as before.

My Demo Apps:

As next I’m testing my Conference Apps. These Apps are something more complex and I also test building release and upload to Google Play Beta Test and Apple TestFlight to see if Release also is working.

The good thing with the Demo and Qt Conference Apps: I published them Open Source to Github. So it’s easy for others to see what I changed or to verify problems.

When all my Demo and Conference Apps are working well, then the next step will be to do the same with my private customer repos.

Finally I can test and add new Controls / Features from QtQuickControls2 as J-P Nurmi blogged about here.

Let’s see what happened while doing the Update.

Mostly Harmless

I got many Warnings and Errors, but don’t panic, they’re mostly harmless.

Some Errors / Warnings / Issues are new – some exist a longer time. I’m listing them also here for devs new to ‘Qt for Mobile’

Very first build for iOS – signing issue

I moved my projects into a new 580 working dir and running the very first time an iOS Build (Debug or Release – doesn’t matter) the code compiles and then logs an error:

Provisioning profile "iOS Team Provisioning Profile: org.ekkescorner.xyz" doesn't include signing certificate "iPhone Developer: Ekkehard Gentz (4A4....VV3)".
Code signing is required for product type 'Application' in SDK 'iOS 10.2'
** BUILD FAILED **

Opening the generated Xcode project and then doing the build again all is working as expected. Even deleting the build dir and building again it works.

This is caused by Xcode automatic provisioning and out of scope from Qt. (see QTBUG-59350)

So don’t panic if the iOS build fails – simply open the Xcode project one time.

QML import could not be resolved

Building Android Apps you’ll see some warnings like

Warning: QML import could not be resolved in any of the import paths: org.ekkescorner.data
Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.impl
Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.Material.impl
Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.Universal.impl

There’s nothing wrong with this. Here’s an old Bug: QTBUG-47389

You can ignore this. Hopefully one day this will be fixed.

QQmlComponent: Component is not ready

While configuring my projects for Android, OSX, iOS I found under General Messages:

QML module does not contain information about components contained in plugins.

Module path: /daten/_qt_sdks/sdk_580/5.8/android_armv7/qml/QtGraphicalEffects
See "Using QML Modules with Plugins" in the documentation.

Automatic type dump of QML module failed.
Errors:
"/daten/_qt_sdks/sdk_580/5.8/clang_64/bin/qmlplugindump" returned exit code 3.
Arguments: -nonrelocatable QtGraphicalEffects 1.0 .
Error parsing dependencies file <outputOfQmlimportscanner>:illegal value at 0
failed to proecess output of qmlimportscanner
QQmlComponent: Component is not ready
file:///daten/_qt_sdks/sdk_580/5.8/android_armv7/qml/typelist.qml:2:1: plugin cannot be loaded for module "QtGraphicalEffects": '/daten/_qt_sdks/sdk_580/5.8/android_armv7/qml/QtGraphicalEffects/libqtgraphicaleffectsplugin.so' is not a valid Mach-O binary (invalid magic 7f454c46)

same happens with “QtQuick.Controls.Styles.Android”. From J-P Nurmi I got confirmation that I can ignore this.

For the first one on “QtGraphicalEffects” I wrote a Bug Report: QTCREATORBUG-17819.

You can ignore these errors.

Qt Quick Controls 2 ‘Binding Loops’

Some of my Apps are reporting Binding Loops.

On Android:

W libtab_pages_x.so: file:///data/data/org.qtproject.example.tab_pages_x/qt-reserved-files/qml/QtQuick/Controls.2/Material/TabBar.qml:52 ((null)): file:///data/data/org.qtproject.example.tab_pages_x/qt-reserved-files/qml/QtQuick/Controls.2/Material/TabBar.qml:52:18: QML ListView: Binding loop detected for property "implicitWidth"

On iOS:

qrc:/qt-project.org/imports/QtQuick/Controls.2/Material/TabBar.qml:52:18: QML ListView: Binding loop detected for property "implicitWidth"

same happens for “preferredHighlightEnd”.

Unfortunately I wasn’t able to create a small test scenario yet, but will try again and open an Issue later.

Most important: You can ignore this Warning.

Please update your kit or choose a mkspec for qmake

Configuring a project for iOS I got

"/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang++" is used by qmake, but "/usr/bin/clang++" is configured in the kit.
Please update your kit or choose a mkspec for qmake that matches your target environment better.

issue_01

I created a bugreport: QTCREATORBUG-17794

From qt-creator List I got confirmation: This message is wrong and you can ignore this.

see here a comment from Tobias Hunger why this happens.

-headerpad_max_install_names is ignored

Building project for iOS I got this Issue:

:-1: warning: -headerpad_max_install_names is ignored when used with -bitcode_bundle (Xcode setting ENABLE_BITCODE=YES)

issue_02

From qt-creator List I got confirmation that this can be ignored. See also codereview 185929

codereview_headerpad

so next Qt releases will have this fixed.

member of multiple groups (“Supporting Files” and “Resources”)

Compiling a project for iOS it may happen that you get some warnings like this:

xcodebuild[5107:303392] warning:  The file reference for "/daten/_qt_workspaces/work_580/c2gQtCon_x/images.qrc" is a member of multiple groups ("Supporting Files" and "Resources"); this indicates a malformed project.  Only the membership in one of the groups will be preserved (but membership in targets will be unaffected).  If you want a reference to the same file in more than one group, please add another reference to the same path.

from QTCREATORBUG-14926: You can ignore this.

iOS Release Build Issues (Patch bitcode.prf)

So far all debug builds worked well. As next tested release builds and upload to GooglePlay BetaTest and Apple Testflight. Android Builds are running without any problems, but iOS Release Build filled my Issues Pane with 192 Issues – logging always:

:-1: warning: argument unused during compilation: '-fembed-bitcode-marker'

I created QTBUG-59352 – got info that similar bug was already reported (QTBUG-58754) and fixed: codereview

Fortunately this Warning again can be ignored. But it’s annoying building releases with hundreds of warnings. Thx to @jakepetroules I got  infos HowTo patch bitcode.prf. You’ll find this file here:

...sdk_580/5.8/ios/mkspecs/features/uikit/bitcode.prf

Open this file and replace the content by:

lessThan(QMAKE_XCODE_VERSION, "7.0") {
    warning("You need to update Xcode to version 7 or newer to support bitcode")
} else: !macx-xcode {
        # Simulator builds and all debug builds SHOULD use -fembed-bitcode-marker,
        # but unfortunately the -fembed-bitcode and -fembed-bitcode-marker driver
        # flags do not work in conjunction with -Xarch, so we'll have to let it use
        # the "wrong" flags for now (note that this issue affects only the Makefile
        # generator). We also don't want the flags to be passed in Xcode builds, as
        # the Xcode ENABLE_BITCODE setting will take care of that for us.
        release {
        QMAKE_CFLAGS           += -fembed-bitcode
        QMAKE_CXXFLAGS         += -fembed-bitcode
        QMAKE_OBJECTIVE_CFLAGS += -fembed-bitcode
        QMAKE_LFLAGS           += -fembed-bitcode
    } else {
        QMAKE_CFLAGS           += -fembed-bitcode-marker
        QMAKE_CXXFLAGS         += -fembed-bitcode-marker
        QMAKE_OBJECTIVE_CFLAGS += -fembed-bitcode-marker
        QMAKE_LFLAGS           += -fembed-bitcode-marker
    }
}

Now all -fembed-bitcode-marker issues are gone 🙂

Now we’re leaving the comfort zone.

Buttons remain some color of ripple effect

Suddenly I noticed a strange behavior in my more complex apps: Using the Drawer or Bottom Navigation Bar some color from pressing the buttons down remains after fingers are released. Fortunately this was fixed soon and the Drawer is working again (see patch)

Only one use-case left, where the Menu ToolButton remains some color:

toolbutton_clicked

Seems the ripple effect wasn’t reset completely while the Drawer is opening on top. At the moment I didn’t found a way to create a small test-case, but will try later agein.

Fortunately I found a workaround using a Loader toggling between two different Components of same ToolButton.

// ToolButton...
onClicked: {
        navigationBar.open()
        favMenuBugfix = !favMenuBugfix
    }

--------

Loader {
    id: favMenuLoader
    sourceComponent: favMenuBugfix? favMenuComponent1 : favMenuComponent2
}
Component {
    id: favMenuComponent1
    DrawerFavoritesMenuButton {
    }
}
Component {
    id: favMenuComponent2
    DrawerFavoritesMenuButton {
    }
}

Adding OpenSSL

As you probably know, Google removed openssl from Android7, so you have to add openssl libraries built by yourself.

My first projects with Qt 5.7 have used http only (they’re running behind firewalls on managed devices so this is secure)

All worked well without the need to add openssl – but it was on my ToDo list.

Qt 5.8 did some things different and now my Qt 5.8 apps are crashing from QNetworkAccessManager. From discussions in Qt Forums I’ve seen I’m not the only one seeing these differences between 5.7 and 5.8

There’s a documentation HowTo add OpenSSL support: http://doc.qt.io/qt-5/opensslsupport.html

unfortunately this fails on MacOS with error

unknown argument: '-mandroid'

long discussion in Qt Forum and on the Lists, but didn’t get it run – tried many hours. So I opened QTBUG-59375

finally from Android List I got a hint from Marco Piccolino and I found two .sh scripts doing the job.

More infos and HowTo use it in your own projects you’ll find at my github repo: https://github.com/ekke/android-openssl-qt

There are also some github projects providing prebuilt .so libraries, but I don’t want to include .so libs not built by myself from origin sources.

Hint: I got crash reports from users where openssl could crash if doing multi requests using QNetworkAccessManager. I had to add -DOPENSSL_THREADS. updated my github repo with the correct script: https://github.com/ekke/android-openssl-qt/commit/39d3d4122a132f1f73f7e7ed079de3f067775dde

Popup && Android Back Key problems

There was much work on Popups and (new with 5.8) Dialogs. Popups now also support ESC keys. But I run into two problems – see also QTBUG-59670

Popup without closePolicy: Android BACK quits the APP

There’s a new default closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

But this doesn’t work on Android. Using Android BACK Key closes the APP without a chance to catch the key.

Workaround: set the policy explicitely – per ex. Popup.CloseOnPressOutside

Don’t use Popup.CloseOnEscape

Now this is working:

Keys.onBackPressed: {
 event.accepted = true
 // do something
}

Modal Popup doesn’t block Android BACK Key

Using a modal Popup this should block all Shortcuts and Back key.

But this doesn’t work using Android BACK Key. This time the key goes thru to Keys.onBackPressed.

Workaround: manage this blocking behavior by yourself.

Here’s the Popup:

Popup {
    id: popup
    modal: true
    closePolicy: Popup.NoAutoClose

    // your content

    onOpened: {
        appWindow.modalPopupActive = true

    }
    onClosed: {
        appWindow.modalPopupActive = false
    }
}

and in your main.qml:

ApplicationWindow {
    id: appWindow
    width: 410
    height: 680
    visible: true
    ...
    property bool modalPopupActive: false
    ...
    Keys.onBackPressed: {
        event.accepted = true
        if(appWindow.modalPopupActive) {
            showToast(qsTr("Back key not allowed"))
            return
        }
        ...
    }
}

QTBUG-59670 is classified as critical so I’m sure will be fixed for Qt 5.9

Text Selection Handles

There are some problems with Text Selection Handles – see next Page.


As I promised: updating your APP from 5.7 to 5.8 is mostly harmless 😉

I’ll tweet @ekkescorner if finding more issues while working on my apps and I’ll blog about new features like Dialogs and more.


← Back (Patch Qt 5.8)

→ Next Article (Text Selection Handles)

⇐ Home (Overview / Topics)


First thing I’m doing to test if a new Qt Version is installed correct and to see the new controls from QtQuickControls2 is to start the Gallery Example.

Tested on OSX and iOS without any problems, but on Android 6.0.1 Device trying to open the Delegates or RadioButton Pages this doesn’t work with an error:

QQmlApplicationEngine failed to load component ... Type RadioButton unavailable

Looking at JIRA I found this reprted bug: https://bugreports.qt.io/browse/QTBUG-59026

Bug was already fixed by J-P Nurmi 🙂

patch_radio

 

Unfortunately the fix is done for 5.8.1 and 5.9.0 Beta. From Qt Blog I was aware that there will be no 5.8.1 this time to focus work on 5.9.

So this was a show-stopper for me.

Qt is Open Source – so it’s no problem to get the changes.

From the bug you can get the info of the affected component (qt/qtquickcontrols2) and the branch (5.8.1) where it was fixed.

Scrolling down the page you’ll also find the commit e91c9feab8a0cf4cff71cc68ab0f001b1531504f

patch_radio2

 

Now it’s easy to patch.

Hint: we only must do this for the Android kit

Open a Terminal and do this to patch for your Android Kit.

Create a directory you want to clone the repo to.

export ANDROID_NDK_ROOT=/your_path_to/android-ndk-r10e
cd /your-path-to-store-cloned-repo_android
git clone --branch 5.8 git://code.qt.io/qt/qtquickcontrols2.git
cd qtquickcontrols2
git checkout -b radiobutton v5.8.0
git cherry-pick e91c9feab8a0cf4cff71cc68ab0f001b1531504f
/your-path-where-qt-is-installed/5.8/android_armv7/bin/qmake
make
make install

the cherry-pick will print some infos so you’re sure that it’s the right commit:

[radiobutton 46a936f] Add missing QML type registrations
 Author: J-P Nurmi <jpnurmi@qt.io>
 Date: Mon Feb 20 15:34:26 2017 +0100
 2 files changed, 2 insertions(+)

Now the RadioButtons are working again on Android 6 and Qt 5.8 🙂

screenshot_20170228-172253

thanks @jpnurmi helping me to make this work.


← Back (Install Qt 5.8)

→ Next Article (Patch BUG 59293)

⇐ Home (Overview / Topics)


Install Qt 5.8

February 28, 2017 — Leave a comment

Qt 5.8 Release Blog from Qt

This blog series is about the new Qt Quick Controls 2 to develop mobile apps for Android and iOS.

Before going on you should have read my blog – esp. on ‘Prepare for Android / iOS‘ and ‘Prepare Devices

Besides Qt 5.8 you’ll also get a new Qt Creator 4.2.1

Perhaps you already have an older version of Qt already installed, you can use the Maintenance Tool to update. I’m always doing a fresh install for each Beta, RC or Release.

Before downloading and installing you should know if you want to install the Open Source or Commercial version of Qt for Application Development.

Please take a look at Qt FAQ‘s and also my blog post about licensing and the new license for small Startups and Independent Developers.

I’m using the Commercial version for Startups – see Qt’s offer here: https://www.qt.io/start-up-plan/

Read more about Open Source vs Commercial also in my blog about ‘Install Qt 5.6


Here are my steps to download and install Qt 5.8 (commercial):

Install Qt 5.8

Go to your Qt Account – Downloads and select the Qt Online Installer:

01_download_01

 

See available downloads:

qt58_download

 

I selected the macOS online installer:

qt58_download2

Here’s my download on OSX:

qt58_download3

Double click to install:

qt58_download4

Log into your Account:

01_download_04

Select the folder where to install:

qt58_download5

It’s a good idea to use installation pathes without spaces. see also here.

As next select your components:

qt58_download6a

please notice: some components from commercial are now included into the open source part.

qt58_download6b

and wait for the installer:

qt58_download7

If Installer finished, I’m not launching Qt Creator yet.

qt58_download8

 

 

Start Qt Creator with -settingsPath

All Qt Creator instances by default share the settings. Having the new Qt Creator 4.2.1 and old 4.0.2, 3.6.2 using the same settings is no good idea. Also I want to use different working directories for my Qt 5.6, 5.7 and the new Qt 5.8 Release.

You can start Qt Creator with parameter -settingsPath – here’s HowTo do this from OSX:

Search for the Qt Creator.app from Qt 5.8 and do a right-click on the app. Here’s the content:

02_qtc_settings_01

rename Qt Creator to something like Qt Creator-bin:

02_qtc_settings_02

From a Text Editor create a Script to execute the Qt Creator-bin with a parameter.

something like this:

#!/bin/sh
exec "/daten/_qt_sdks/sdk_580/Qt Creator.app/Contents/MacOS/Qt Creator-bin" -settingspath /daten/_qt_sdks/sdk_580/qtc_settings "$@"

Save this file named “Qt Creator” besides the Qt Creator-bin:_

02_qtc_settings_04

Now you can start Qt Creator, which will execute the script:

qt58_creator-prefs

 

Qt Creator will create the QtProject folder to sthore all the configuration settings.

Now you can start multiple Qt Creator versions without any collision.

Qt Creator 4.2.1

At first I’m changing QtCreator’s language on my german MacBookPro to english and restart

04_qtc_prefs_01

Select your Theme. I’m using the Flat Theme:

03_qtc_flat_03

Qt Creator Preferences Working Directory

Set your working directory for 5.8, if you are using different directories as I’m doing:

qt58_creator-workspace

Qt Creator Preferences Android

Take a look at your Devcies -> Android preferences:

qt58_creator-android_prefs1

 

Select your SDK and NDK locations and check ‘Gradle’:

qt58_creator-android_prefs2

Important: Don’t use a newer NDK ! Please always use r10e because of some trouble with the newer ones.

 

Qt Creator External Tools

I’m developing business apps and business apps always need support of languages (i18n). Configuring the External Tools for Linguist (Qt’s Tool to translate text from your QML and C++ sources) will make it more comfortable.

As first step we’ll add the Linguist App.You’ll find the Linguist at 5.8 –> clang_64 –> bin:

06_qtc_ext_tools_01

(similar screenshots from 5.-7)

I like to use Tools in english, but the language cannot be changed yet for Linguist, so the trick is to rename the translations file, which in my case is 5.8 –> clang_64 –> translations –> linguist_de.qm:

06_qtc_ext_tools_02

Under Preferences –> Environment –> External Tools there already exist access to commands for lupdate and lrelease. (lupdate is looking for the strings you marked as translatable and to create or update the translation files <app>.ts. Using Linguist or external tools you can then translate the strings. lrelease compiles these translations from *.ts into *.qm. Only *.qml files will be deployed to your device)

I found out that the default configuration doesn’t work on Android and iOS – please use the executable from …/5.8/clang_64/bin:

06_qtc_ext_tools_04

06_qtc_ext_tools_05

(similar screenshots from 5.7)

Test if Linguist will start. From External Tools

06_qtc_ext_tools_06

Linguist should start:

qt58_creator-ext-linguist

it’s a good idea to use a shortcut:

qt58_creator-shortcut-linguist

 

Verify Installation: Gallery Qt Quick Controls 2

As last step verify if all is correct configured.

Best way to do this and to get a first impression of new QtQuick Controls 2 is to run the Quick Controls 2 Gallery App.

From Overview – Examples search for “Gallery” and select the right one:

05_qtc_test_01

Configure your project for Android / iOS. Even if you only develop mobile apps it’s a good idea also to check the ‘Desktop’. Most mobile apps also run on OSX and the build-run-cycle is much faster- (Thx @jpnurmi for this tip – saved me much time)

qt58_creator-configure-gallery

 

Now run on your device(s).

05_qtc_test_04

Select your Device – here’s my BlackBerry PRIV (Android 6.0.1):

05_qtc_test_05

… and the Gallery App is running:

05_qtc_test_06

Congrats –  you have installed Qt 5.8.  Now you can try out all the new Controls.

Patches / Bugs

ATTENTION: There’s a critical bug using some controls on Android 6 or Android 7: QTBUG-59026

Also there’s a bug with Ripple Effect in Drawer on Android and iOS: QTBUG-59293

Fortunately Qt is Open Source 🙂 With some help by @jpnurmi here are some patches to make it run:

If you already have projects using Qt 5.7 – take a look what’s good to know if moving projects from 5.7 to 5.8

New to Qt for mobile ? Here are some more appetizers:

Clone my Examples from Github and Run

  1. First app with One Page
  2. StackView
  3. SwipeView
  4. TabBar
  5. Bottom Navigation
  6. Drawer Navigation

Please follow my blog series: https://appbus.wordpress.com/category/qt-for-mobile/overview/


← Back (Qt Community (Wiki, Forum, Lists))

→ Next Article (Qt Creator Intro)

⇐ Home (Overview / Topics)

eclipsecon Europe 2016, Ludwigsburg, Germany

Soon available at the stores:

(can take up to 24 hours)

Android 4.3 or greater for Phones and Tablets from Google Play Store:

google-play-badge

or download the APK from here if you prefer sideloading:

itunesartwork-512x512

iOS 8.2 or greater for iPhone or iPads from Apple App Store:

just approved 2016-10-25 16:27 – can take a moment to be visible in App Store

app_Store_Badge

Amazon Fire OS or BlackBerry10 on Amazon App Store:

amazonappsbadge

Sorry – not enough time yet to also develop a native BlackBerry 10 App – hopefully for the next conference. Native BlackBerry 10 Cascades App loads faster and runs smoother on BlackBerry 10.

Also working on Windows 10 Mobile – runs in development mode on Lumia and others – haven’t finished the work to upload release to windows store yet.

You probably know that last years I always developed the BlackBerry 10 App for Eclipse Conferences. This year first I did it for Android and iOS using Qt 5.7 and brandnew Qt Quick Controls 2. Used Qt Quick Controls 2 and Google Material Style. To make my work easier, Entities (Session, Speaker, Track, Room, Conference, …) are generated using a Xtext / Xtend DSL. Started this DSL 2 years ago for BlackBerry 10 Cascades / Qt 4.8 and now I’m able also to generate code for Qt 5.7 / Qt Quick Controls 2. Hopefully at the end of year mobaDSL will be available Open Source.

Want to know more about HowTo develop Apps using Qt 5.7 for Android, iOS and Windows 10 ? The Sourcecode of my Qt World Summit Conference App is available at Github: https://github.com/ekke/c2gQtWS_x

Here some screenshots of eclipsecon Europe Conference App.

01_home

Schedule

02_schedule

Speakers

03_speaker

Session Detail

04_session_detail

Drawer

o5_drawer

xxx

Qt World Summit App at the App Stores

Android 4.3 or greater for Phones and Tablets from Google Play Store:

google-play-badge

iOS 8.2 or greater for iPhone or iPads from Apple App Store:

app_Store_Badge

Amazon Fire OS or BlackBerry10 on Amazon App Store:

amazonappsbadge

Windows Store:

english_get_it_win_10_864x312

Sourcecode at Github: https://github.com/ekke/c2gQtWS_x

Some Screenshots

01_home

Schedule:

02_schedule

Speakers:

03_speaker

Session Detail

04_session_detail

Floorplan on PixelC Tablet:

screenshot_20161014-124231

xxx

this article is work-in-progress

QtConAppIcon-180x180

Overview

This is part 8 of a series of  apps helping you to understand Qt 5.7 for x-platform development on Android and iOS. This app is not a Demo App – it’s a real life APP I developed for QtCon 2016 in Berlin. Please read the blogs about my other Examples to understand the concepts and patterns I’m using:

  1. First app with One Page
  2. StackView
  3. SwipeView
  4. TabBar
  5. Bottom Navigation
  6. Drawer Navigation
  7. Business Data APP

Download QtCon 2016 Conference App

The App is available at Google Play Store for Android Devices and from Apple Apptore for iPhones. Also work has started to provide a Windows 10 Mobile App.

google-play-badge

You don’t have a Google Account and want to side-load the App ? Here’s the APK – Download – Link.

 

app_Store_Badge

Out of the Developer Trenches

This blog will give you some insights and explain some parts of the code.

I’ll also speak at Qt World Summit about my experiences while developing this app and show what happens behind the scenes.

Here’s a short overview what I’m using to create the UI of my Qt 5.7 – QtQuickControls2 Business Apps:

qt-app

There are also StackViews on top of a single Page from SwipeView:

Conference Schedule is a SwipeView, each Day is a Page with ListView for all Sessions of the Day. From the List you can open SessionDetailPage (pushing on Stack) and so on.

Drawer and Bottom Bar Navigation

Main Navigation is done by a Drawer.

qtcon_android_02_drawer

Now Google Material Style also supports Bottom Navigation I added a Bottom Navigation Bar to make it easier to navigate. To get the Drawer opened you must swipe from the left site or tap on the Menu Button on Top Left. The Menu Button on Top Left isn’t always visible: if pushing Pages on a Stack, the Button is replaced by a Back Arrow to navigate back – so in this case you must use the gesture from left side. Not so easy if you have a large display size or like to use your phone with one hand. The Bottom Navigation Bar enables you to go through the Pages faster without moving fingers a long distance.

qtcon_android_01_home__

There are buttons for Home, Schedule, Speaker and Tracks inside the Bottom Navigation Bar. You can reach these Buttons easy. There’s also a Menu Button (Hamburger) at Bottom Left position. This Button is always visible, which means you can easy switch between different parts of the App even if there are some Pages on the Stack.

The Bottom Navigation Bar is only visible in Portrait Mode – in Landscape it would eat too much space from available height.

Now there are two Hamburger Menus in Portrait and perhaps you don’t like to have the Menu Button at the bottom ?

No problem – you can customize this. GoTo Settings and select the way you like to navigate.

  • Classic Material Navigation Style ( only the Drawer is used to navigate)
  • Bottom Navigation (Bottom Navigation Bar without Menu Button in Portrait)
  • Comfort (One Hand Use) Navigation (Menu Button in Bottom Navigation Bar)
  • Use only One Menu Button (In Portrait there’s no Menu Button in Title Bar, only in Bottom Navigation

I implemented these options to demonstrate how easy it is to customize your QuickControls2 Apps.

BTW: Coming from BlackBerry 10 Cascades ? Then you already know about the Menu Button at Bottom left. So using Bottom Navigation with Menu Button there could also help to get same Navigation Workflow on different platforms. Will help you if developing Enterprise Business Apps as I’m doing.

Speed Stack Navigation

Sometimes you pushed some Pages on top of a StackView. per ex. Schedule -> Session Detail -> Speaker Detail -> Room Info.

To push Pages on stack you tapped on Buttons to navigate “forward” to the next detail you’r interested in.

To go back to the Schedule – Sessions List you must tap on the Back Button multiple times. On Android you can also use the OS Back Button at Bottom Left, but on iOS you always have to move your finger to Top Left Back Button.

To speed up this kind of Navigation I implemented “Speed Stack Navigation”: the FAB (Floating Action Button) is used to navigate back: with one Tap you jump back to the last used List below. The FAB is always at Bottom Right position so always reachable even with one-hand-use.

Here’s an example from Session Details Page:

qtcon_android_05_session_detail_b

Themes and Colors

From Settings page you can also customize the Colors and dark / light theme:

qtcon_android_10_settings_

here are screenshots using a dark theme:

qtcon_android_10_settings_dark_

qtcon_android_10_settings_dark_schedule

Dynamic Loading

There are many StackViews, SwipeViews, Pages, ListViews …

To provide a performant App it’s a good think to think about dynamic creation of Components. QtCon Conference App uses many Loaders. A Loader is only a placeholder and you must set the ‘active’ property to start Object creation.

Inspired by BlackBerry 10 Cascades TabbedPane delegateActivationPolicy I have implemented different Activation Policies:

  • Immediately
  • Lazy
  • When Active

Immediately means that the Loader is active from beginning and will remain until the end. This is used for HomePage – the first page a user will see.

Lazy means the first time a user wants to see this Page, the Loader will become active and then wil remain.

When Active means the Loader will only be active as long as the Page is in use. Closing the page will set the Loader to inactive and the Controls will be destroyed.

But that’s not the complete story – to speed up the Startup Time I’m doing it this way:

C++ classes like DataManager, DataServer, DataUtil are only created at startup – no init() is done – so it’s really fast.

In QML no Drawer and Bottom Navigation is created, because I don’t set a model. The initial Item of the root StackView (used by Drawer) is a special Page only containing a Busy Indicator:

qtcon_android_00_startup_progress

As soon as this initial Page is created I start a Timer with 300 ms delay and from the Timer I’m calling all the C++ init() methods, all the data was read from cache and if all is done I’m setting the Drawer model. Now the Pages with Immediate – Activation – Policy are created and I’m swapping the initial Page and the Home Page is visible to the user.

In most cases the Busy Indicator will only be visible for some ms.

Caching and Data Binding

For this App I’m using a JSON File Cache.

A Conference App displays Sessions, Speaker, Rooms and this kind of data was read from Cache and QObject* are created – so the complete data was in-memory for fast access.

This data wasn’t changed from normal app – use. The only data a user enters is setting favorite Sessions to create the Personal Schedule. To avoid saving all the Sessions, I’m using an extra Class to store the ID’s of Sessions marked as Favorite. Caching this as JSON will only write a File with some Bytes.

At startup I’m looping through the Favorites and set a Property for these Sessions, so in Lists and Pages I’m getting the Favorite info directly from Session Class. This Property is a transient Property for Sessions.

Closing the App or sending to background I’m looping through the Sessions and create the Favorites. Then this small file was written to cache.

Using QObject* DataBinding to QML UI is easy – most difficult part is creating all the code for Q_PROPERTY. This is done by a Code Generator – all these C++ Classes you’ll find under src/gen. This Code Generator is based on Eclipse Xtext and I’m generating different Code for BlackBerry10 / Qt 4.8 and Qt 5.7 Android/iOS. The CodeGenerator will be Open Source – expect this by the end of 2016.

Caching and Data Binding is a complex story – will blog in an extra article about this.

Screenshots

Find some more Screenshots from the Conference App below.

Some Screenshots are outdated – per ex. the Icons to swap between Personal Schedule and Conference Schedule were changed because of Beta testers Feedback.

Stay tuned for more blog articles and videos explaining patterns and concepts.

There’s an Option Menu available at Startpage. All these Options are also part of the Drawer, but to help users first time using a Drawer I placed this Options Menu to get easy access to Help and Settings.

qtcon_android_01_home__options

QtCon Conference App works in Portrait and Landscape. There are some situations where rotating back from Landscape to Portrait doesn’t work as expected. Will report this and more via Bugreports.

qtcon_android_01_home_landscape

Conference Schedule is a SwipeView with pages for each Conference Day. The List of Sessions of a Day can be long, so there’s a ‘GoTo’ Button to jump to a specific Time Slot.

qtcon_android_03_schedule_

TimePicker is a customized UI Control I created with some help from Mitch Curtis.

Use this TimePicker to jump to Sessions starting at a specific time:

qtcon_android_03_schedule_timepicker

Personal Schedule (lists only marked Sessions). Easy toggling between Personal and Conference Schedule

qtcon_android_04_my_schedule

Session Details:

qtcon_android_05_session_detail_a

Room Floorplan – you can Zoom-In / Zoom-Out or Fit-To-Window:

qtcon_android_05_session_room_

List of Speakers:

qtcon_android_06_speaker_list

GoTo Speaker where Name starts with a specific Letter:

qtcon_android_06_speaker_picker

Speaker details

qtcon_android_07_speaker_detail

List of Tracks – in the meantime Tracks are colored to match UI from Web Browser.

qtcon_android_08_tracks_list

Sessions per Track

qtcon_android_08_tracks_sessions

Venue Info

qtcon_android_09_venue_

Venue Rooms List. Tap on a Room to see all Sessions or on the Thumbnail to see the Floorplan.

qtcon_android_09_venue_room_list

Sessions per Room

qtcon_android_09_venue_room_sessions

Help Page

qtcon_android_11_help

About Page

qtcon_android_12_about

 

Sources

This Application is Open Source and available at Github: https://github.com/ekke/c2gQtCon

Bugreports

As a good Open Source Project Citizen I always report Bugs and Requests.

Here are some of the Bugs I ran into while developing this APP:

TBD

Summary

I’m waiting for Feedback from QtCon in Berlin to see what could be done better.

Next Conference App will be for Qt World Summit 2016 in San Francisco.

My personal wishlist for upcoming Qt Conference Apps:

  • Integration with Twitter, Browser, Map
  • Having Bookmarks and Favorites
  • Personal Schedule Collision Detection
  • From Session –> what’s running at Same Time
  • Fulltext Search for Sessions and Speakers
  • Update from Conference Schedule via Push
  • Update Info (what’s new, removed, timeslots-rooms changed …
  • Better Highlighting of List rows
  • List of Sponsors
  • Shortcuts for BlackBerry PRIV
  • Jump to NOW while Conference running
  • Remove short Flicker at Android Startup
  • Pinch && Zoom Overview as I did for Cascades
  • TimePicker with AM PM support
  • TimePicker better resizing small screens
  • Translate into more languages
  • Support of Android Tablets and iPads

Stay tuned for more Apps – next one will be for Qt World Summit 2016 in San Francisco.

qtws16


← Back (Business Data APP)

→ Next Article (Qt World Summit Conference APP-TBD-)

⇐ Home (Overview / Topics)