Qt Quick Controls 2 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.9 you’ll also get a new Qt Creator 4.3
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.9
Install Qt 5.9
Go to your Qt Account – Downloads and select the Qt Online Installer:
See available downloads:
I selected the macOS online installer:
Here’s my download on OSX:
Double click to install:
Log into your Account:
Select the folder where to install:
It’s a good idea to use installation pathes without spaces. see also here.
As next select your components:
accept the license:
and wait for the installer:
If Installer finished, I’m not launching Qt Creator yet.
Start Qt Creator with -settingsPath
All Qt Creator instances by default share the settings. Having the new Qt Creator 4.3 and old 4.2.1, 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, 5.8 and the new Qt 5.9 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.9 and do a right-click on the app. Here’s the content:
rename Qt Creator to something like Qt Creator-bin:
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_590/Qt Creator.app/Contents/MacOS/Qt Creator-bin" -settingspath /daten/_qt_sdks/sdk_590/qtc_settings "$@"
Save this file named “Qt Creator” besides the Qt Creator-bin:
Now you can start Qt Creator, which will execute the script:
Qt Creator will create the QtProject folder to store all the configuration settings.
Now you can start multiple Qt Creator versions without any collision.
Qt Creator 4.3
At first I’m changing QtCreator’s language on my german MacBookPro to english and restart
Qt Creator Preferences Working Directory
Set your working directory for 5.9, if you are using different directories as I’m doing:
Qt Creator Preferences Android
Take a look at your Devcies -> Android preferences:
Select your SDK and NDK locations and check ‘Gradle’:
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:
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.9 –> clang_64 –> translations –> linguist_de.qm:
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 – so I’m using the executable from …/5.9/clang_64/bin:
Test if Linguist will start. From External Tools
Linguist should start:
it’s a good idea to use a shortcut:
Adding new QML files to a project doesn’t refresh the project view automatically. Open the .pro change something, close .pro updates project folders.
I wanted to do this by a shortcut. The trick is to execute a script to “touch” the .pro file.
for OSX the script looks like this:
#!/bin/sh # ***************** # External Tool for QT Creator. # Touches the projects PRO file to trigger an IDE refresh after adding new files # ***************** echo "" echo "*** Touches the projects PRO file to trigger an IDE refresh after adding new files ***" echo "" proFilePath=$1 if [ -f "$proFilePath" ] then now=$(date "+%Y%m%d%H%M") echo "Touching file on path: '$proFilePath' now... Setting the current time to '$now'" touch -mt $now $proFilePath echo "FINISHED!" else echo "ERROR File under give path '$proFilePath' not found!!!" fi
and here’s the shortcut:
Run Android for Work APPs
Some of my mobile business apps are installed on customers mobile management systems (BlackBerry UEM 12.6 or so) and deployed as ‘AndroidForWork’ APPs. see also my blog here. Unfortunately Qt Creator doesn’t support setting the user id, so after debug/run on device I have to stop the deployed App using the default user and start the same app for another (AndroidForWork) user.
I created external commands for those projects and execute from External tools.
Here’s an example script on OSX:
#!/bin/sh # ***************** # External Tool for QT Creator. # Runs the APP as work APP # ***************** cd /daten/_android/android-sdk-macosx/platform-tools ./adb shell pm clear --user 0 org.ekkescorner.enbw.pegelmeter.dev # doesn't close the app ./adb shell am force-stop --user 0 org.ekkescorner.enbw.pegelmeter.dev ./adb shell am start --user 10 -n org.ekkescorner.enbw.pegelmeter.dev/org.qtproject.qt5.android.bindings.QtActivity
and here’s the external tool i created:
Manage Qt Creator Plugins
Qt Creator has many Plugins installed as default.
It’s a good idea to disable Plugins you’re not using.
per ex. I manage all my Git repos using GitTower and I don’t want always to be asked about my source repo:
Open the list of Qt Creator Plugins:
then uncheck all unwanted Version Controls:
you can do the same with the unused Devices:
Restart Qt Creator.
Create a new QtQuickControls2 Project
Now verify if all is correct configured. easiest way is to create a new QtQuickControls2 APP and let it run on your devices.
From Welcome Tab click on “New Project” and select Application –> QtQuickControls2 Application:
give it a name and create in your workspace:
Select the build system: qmake
Select the QQC2 style. I’m using the Material style. This will create a config file. (There are other ways to set styles and colors)
Select the Kits you need. I’m developing mobile apps for Android and iOS and always testing on real devices.
Also for testing without deploying on devices I always add the Desktop Kit.
Qt 5.9 brings a cool new feature for iOS.
You can select the Development Team directly from Project Settings for iOS:
Now try the different Kits. Select the Kit, the Debug Build and hit “Run”:
Running on a connected Android Device the devices should be listed:
same is for iOS: you should see your connected devices:
I not only updated from Qt 5.8 to Qt 5.9, but also OSX 10.11.6 to macOS 10.12.5, Xcode from 8.2 to 8.3.3, iOS from 10.2.1 to 10.3.2 and my first try to run on an iOS device brings this error:
You can easy fix this. Go to Xcode 8.3.3, right-click to see the content:
duplicate the 10.3.1 folder and rename to 10.3 or create a symbolic link.
see more details at QTCREATORBUG-18380
Gallery Qt Quick Controls 2
Best way to get a first impression of all the new QtQuick Controls 2 is to run the Quick Controls 2 Gallery App.
From Overview – Examples search for “Gallery” and select the right one:
… and run the Gallery App:
Congrats – you have installed Qt 5.9. Now you can try out all the new Controls.
If you already have projects using Qt 5.8 – take a look what’s good to know if moving projects from 5.8 to 5.9
New to Qt for mobile ? Here are some more appetizers:
Clone my Examples from Github and Run
Please follow my blog series: https://appbus.wordpress.com/category/qt-for-mobile/overview/
Thanks for the detailed guide. Looking forward to more tutorials.