Archives For Install Qt

Please read at first my blog HowTo install Qt 5.9.

Here are some issues and workarounds I found out while testing my apps under 5.9

 

Update QML Imports

This is always the first step after moving a project from 5.8 to 5.9: I’m updating the 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.8 to 5.9 I replaced

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

with

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2

You can see the newest imports here.

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.

 

Drawer ignores taps outside the Drawer

Normaly if you opened a Drawer you can tap outside the Drawer to close. This works well up to 5.8.

Under 5.9 there’s a bug:

tapping outside the Drawer not always closes the Drawer.

This would be no big problem because you can drag the Drawer back or click inside the Drawer.

Unfortunately the Drawer ignores the Tap to close but the underlying (dimmed) Page gets touch events so users can by accident do something unwanted.

I opened QTBUG-61581.

I found a workaround to block those unwanted touch events on the Pages below the Drawer by inserting another Popup between Drawer und Pages below. looks ugly but it works in the meantime. The bug is classified as P1 so hopefully will be fixed soon.

Drawer {
    id: myDrawer
    z: 1
    ....
    // workaround:
    onOpened: {
        fakePopup.open()
    }
    onAboutToHide: {
        fakePopup.close()
    }
    Popup {
        id: fakePopup
        z: 0
        width: appWindow.width
        height: appWindow.height
    }
    // end workaround

 

Bug is only on Android and iOS – tested from macOS: MouseClick is working.

MonthGrid onClicked gets no events

I’m using MonthGrid as part of my DatePicker.

Works well up to 5.8 but now under 5.9 I’m getting no clicked events.

I opened QTBUG-61585. and also found an easy workaround: I added a MouseArea:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    id: appWindow

    Page {
        id: myPage

        GridLayout {
            columns: 3
            rows: 5
            width: appWindow.width
            height: appWindow.height

            MonthGrid {
                id: monthGrid
                Layout.fillHeight: true
                Layout.fillWidth: true

                onClicked: {
                    console.log("tapped on a date ")
                }

                delegate: Label {
                    id: dayLabel
                    text: model.day
                    font.bold: model.today? true: false
                    opacity: model.month === monthGrid.month ? 1 : 0
                    color: pressed ? Material.foreground : model.today ? Material.accent : Material.foreground
                    minimumPointSize: 8
                    fontSizeMode: Text.Fit
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    background: Rectangle {
                        anchors.centerIn: parent
                        width: Math.min(parent.width, parent.height) * 1.2
                        height: width
                        radius: width / 2
                        color: Material.primary
                        visible: pressed
                    }
//                    MouseArea {
//                        anchors.fill: parent
//                        onClicked: {
//                            console.log("mouse area click")
//                        }
//                    } // mouse
                } // label in month grid

            } // month grid
        } // grid layout
    } // myPage
} // app window

Bug is only on Android and iOS – tested from macOS: MouseClick is working.

iOS Release Build: getting thousands of Warnings

While testing my APPs under 5.9 I noticed a strange behavior while doing a RELEASE build for iOS.

I’m getting many Warnings:

With some help from Jake Petroules I found a workaround:

ios {
...
 disable_warning.name = GCC_WARN_64_TO_32_BIT_CONVERSION
 disable_warning.value = NO
 QMAKE_MAC_XCODE_SETTINGS += disable_warning
...
}

I opened QTBUG-61587.

iOS: isOnline() not reliable from QNCM

Under Android it’s easy to know if the device is online: QNetworkConfigurationManager is your friend:

    mNetworkConfigManager = new QNetworkConfigurationManager(this);
    qDebug() << "INIT IS   O N L I N E ?" << mNetworkConfigManager->isOnline();

Up to iOS 10.2.1 with a little trick QNCM also could be used by observing active configurations and filter out a config with name “utun0”.

Now with iOS 10.3.2 I had devices also reporting an active configuration ‘en2’ even if iPhone was in airplane mode.

It’s better to rely on Apple’s Reachability Class.

see also QTBUG-56151 and this great article about “CheckingNetwork Status in iOS

here’s my workaround by including Reachability:

Download sources from attachment to bugreport.

Copy Reachability classes to <project>/ios/src

Change your .pro:

LIBS += -framework SystemConfiguration
....
ios {
 OBJECTIVE_SOURCES += ios/src/Reachability.mm \
 ios/src/ReachabilityListener.mm
...
}

add this include

#if defined (Q_OS_IOS)
#include "ios/src/ReachabilityListener.h"
#endif

change class definition:

class YourClass : public QObject
#if defined (Q_OS_IOS)
 , private utility::ReachabilityDelegate
#endif

add a statusChanged method:

#if defined (Q_OS_IOS)
void DataServer::statusChanged(utility::NetworkStatus newStatus)
{
 if (newStatus == utility::NotReachable) {
 // offline
 } else {
 // online
 }
}
#endif

Now you’re getting events if online state is changing on iOS devices.

At startup you can check the current state:

qDebug() << "I O S REACHABILITY: INIT IS O N L I N E ?" << status() != utility::NotReachable;

if you need some more informations you can check for different states:

#if defined (Q_OS_IOS)
    switch (status()) {
    case utility::NotReachable:
        networkInfo.append(tr("Internet not reachable"));
        break;
    case utility::ReachableViaWiFi:
        networkInfo.append(tr("WiFi internet connection"));
        break;
    case utility::ReachableViaWWAN:
        networkInfo.append(tr("mobile data internet connection"));
        break;
    default:
        break;
    }
#endif

This was the first time ever I’m using a ObjectiveC class πŸ˜‰

I got warnings from Reachability.mm about unused parameters.

you can suppress these warnings by adding #pragma unused(theName)

static void PrintReachabilityFlags(SCNetworkReachabilityFlags flags, const char* comment)
{
#pragma unused(flags)
#pragma unused(comment)
#if kShouldPrintReachabilityFlags

Have tested Reachability under different situations at customer site and it’s working great.


Updating from 5.8 to 5.9 was easier and has less issues as my last update from 5.7 to 5.8

I’ll tweet @ekkescorner if finding more issues while working on my apps. Also I have to check all the issues I reported from 5.8 which ones are solved and which are still open.


← Back (Install Qt 5.9)

β†’ Next Article (Qt Creator Intro)

⇐ Home (Overview / Topics)


Install Qt 5.9

June 23, 2017 — 1 Comment

Qt 5.9 Release Blog from Qt

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 (commercial):

Install Qt 5.9

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

01_download_01

 

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

Translations

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

06_qtc_ext_tools_06

Linguist should start:

 

it’s a good idea to use a shortcut:

Refresh .pro

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

  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 (Issues and Workarounds: 5.8–> 5.9)

⇐ Home (Overview / Topics)

Qt 5.8 brings some more support of Text Selection Handles, but there are still also some problems. Text Selection Handles are important to make it easy on touch devices to insert text, copy text, replace text or cut text. With 5.7 single taps to get a handle to move the insert position around already works.

Select words by double tap

Qt 5.8 also supports double tap to select words – but it doesn’t work as expected. This selection mode will only be enabled if you set

selectByMouse: true

on TextField or TextArea. This works fine with TextFields, but having TextArea inside Flickable makes scrolling difficult or impossible. Qt doesn’t know if you want to change the selection or scroll inside the TextField or scroll the Page. Users will be confused and it’s not easy to know where outside the Textfield scrolling works. Hopefully in Qt 5.9 this will befixed and double tap works without setting ‘selectByMouse’.

One of my app contains many TextAreas and users are waiting for word-selection-mode, so I developed some workarounds for 5.8.

To make it easier to distinguish where’s the TextArea I placed the TextArea on top of a Pane. Now you can tell your user to scroll the Page place fingers outside the TextArea:

As soon as TextArea gets active focus, 3 buttons will appear on the right side:

  • clear
  • toggle selection mode
  • done

As soon as the user does a double-tap on a word both text selection handlers become visible and it’s easy to move them around to select more or less.

Also please notice on top a menu to select all, cut, copy and paste.

On iOS this is different: at first do the double tap to select a word – then please do a long press on the selection to get a cut, copy, paste, delete menu just on top of the selection:

Single tap does work with or without setting ‘selectByMouse’:

To insert from clipboard do a long-press: ‘insert’ menu appears on top of cursor position.

Tap on the Toggle Button to set selectByMouse = false to make it easier to scroll also while inside the Textfield.

When you’re ready with text editing tap on the ‘Done’ Button. Done Button gets focus and all Handles disappear. Also Done and Toggle Button disappear.

As long as there’s some text, the clear Button makes it easy to clear the field:

Here’s the workaround. I placed all of this into ‘TextAreaRow.qml’ – then it will be easy to change when 5.9 comes out.

TextAreaRow{
Β Β Β  id: remarksTextRow
Β Β Β  placeholderText: qsTr("Your Remarks (RETURN for new line)")
Β Β Β  text: tourDetail.remark
Β Β Β  onTextChanged: {
Β Β Β Β Β Β Β  tourDetail.remark = text
Β Β Β  }
Β Β Β  onDone: {
Β Β Β Β Β Β Β  // do something: set active focus to another field or so
Β Β Β  }
} // remarksTextRow

And here’s the implementation:

RowLayout {
Β Β Β  id: theTextRow
Β Β Β  signal done()
Β Β Β  property alias text: theTextField.text
Β Β Β  property alias placeholderText: theTextField.placeholderText
Β Β Β  property alias textField: theTextField
Β Β Β  property int minHeightTextPane: 140
Β Β Β  property bool doubleTapIsDefault: true
Β Β Β  Pane {
Β Β Β Β Β Β Β  id: textPane
Β Β Β Β Β Β Β  anchors.top: parent.top
Β Β Β Β Β Β Β  Material.elevation: 6
Β Β Β Β Β Β Β  Layout.fillWidth: true
Β Β Β Β Β Β Β  Layout.minimumHeight: theTextField.activeFocus? minHeightTextPane : 60
Β Β Β Β Β Β Β  TextArea {
Β Β Β Β Β Β Β Β Β Β Β  id: theTextField
Β Β Β Β Β Β Β Β Β Β Β  // Qt 5.8
Β Β Β Β Β Β Β Β Β Β Β  // only if set to true we can mark words by double tap
Β Β Β Β Β Β Β Β Β Β Β  selectByMouse: doubleTapIsDefault
Β Β Β Β Β Β Β Β Β Β Β  // important - otherwise text goes endless without wrapping
Β Β Β Β Β Β Β Β Β Β Β  width: parent.width
Β Β Β Β Β Β Β Β Β Β Β  text: ""
Β Β Β Β Β Β Β Β Β Β Β  wrapMode: TextArea.WordWrap
Β Β Β Β Β Β Β  } // theTextField
Β Β Β  } // text pane
Β Β Β  Column {
Β Β Β Β Β Β Β  spacing: 0
Β Β Β Β Β Β Β  anchors.top: textPane.top
Β Β Β Β Β Β Β  Layout.minimumWidth: textClearButton.visible || textSelectToggleButton.visible || textDoneButton.visible? 48 : 0
Β Β Β Β Β Β Β  ButtonIconActive {
Β Β Β Β Β Β Β Β Β Β Β  id: textClearButton
Β Β Β Β Β Β Β Β Β Β Β  anchors.horizontalCenter: parent.horizontalCenter
Β Β Β Β Β Β Β Β Β Β Β  visible: theTextField.activeFocus || theTextField.text.length
Β Β Β Β Β Β Β Β Β Β Β  focusPolicy: Qt.ClickFocus
Β Β Β Β Β Β Β Β Β Β Β  imageName: "clear.png"
Β Β Β Β Β Β Β Β Β Β Β  onClicked: {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  theTextField.text = ""
Β Β Β Β Β Β Β Β Β Β Β  }
Β Β Β Β Β Β Β  } // textClearButton
Β Β Β Β Β Β Β  ButtonIconActive {
Β Β Β Β Β Β Β Β Β Β Β  id: textSelectToggleButton
Β Β Β Β Β Β Β Β Β Β Β  anchors.horizontalCenter: parent.horizontalCenter
Β Β Β Β Β Β Β Β Β Β Β  visible: theTextField.activeFocus
Β Β Β Β Β Β Β Β Β Β Β  focusPolicy: Qt.ClickFocus
Β Β Β Β Β Β Β Β Β Β Β  imageName: "code.png"
Β Β Β Β Β Β Β Β Β Β Β  onClicked: {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  theTextField.selectByMouse = !theTextField.selectByMouse
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  if(theTextField.selectByMouse) {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  appWindow.showToast(qsTr("Word Selection by Double Tap switched ON"))
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  } else {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  appWindow.showToast(qsTr("Word Selection by Double Tap switched OFF"))
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  }
Β Β Β Β Β Β Β Β Β Β Β  }
Β Β Β Β Β Β Β  } // textSelectButton
Β Β Β Β Β Β Β  ButtonIconActive {
Β Β Β Β Β Β Β Β Β Β Β  id: textDoneButton
Β Β Β Β Β Β Β Β Β Β Β  anchors.horizontalCenter: parent.horizontalCenter
Β Β Β Β Β Β Β Β Β Β Β  visible: theTextField.activeFocus
Β Β Β Β Β Β Β Β Β Β Β  focusPolicy: Qt.ClickFocus
Β Β Β Β Β Β Β Β Β Β Β  imageName: "done.png"
Β Β Β Β Β Β Β Β Β Β Β  onClicked: {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  // we only need the focus
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  // emit signal so users can give another field the activeFocus
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  theTextRow.done()
Β Β Β Β Β Β Β Β Β Β Β  }
Β Β Β Β Β Β Β  } // textDoneButton
Β Β Β  }
} // row w text area

ButtonIconActive is a customized Button showing Icon. You’ll find all of this in my sample apps at Github – I also have updated QtWorldSummit Conference App.

On Android there are two bugs:

Selection handles overlap while scrolling (Android only)

The selection handle(s) can overlap the keyboard or selection menu:

Take a look at BUG 58700

Selection Handle visible when Component invisible

If the Component containing your TextField or TextArea becomes invisible and the TextField still has active focus, the handles will still be visible.

See BUG 58700

Workaround is easy: set focus to another field as soon as TextField becomes invisible.


← Back (Update 5.7 to 5.8)

β†’ Next Article (Qt Creator – Intro)

⇐ 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)

Install Qt 5.7

June 5, 2016 — Leave a comment

UPDATE: 2016-06-16: Qt 5.7 Release is out ! You can still follow my descriptions below from 5.7 RC – process is similar.

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.7 you’ll also get a new Qt Creator 4.0.2.

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.7 RC (commercial):

Install Qt 5.7

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

01_download_01

 

UPDATE: now: 2.0.3-2 for Qt 5.7 release:

01_download_03

UPDATE: now: qt-unified-mac-x64-2.0.3-2-online.dmg

01_download_04

 

Here’s my download on OSX:

01_download_05

 

Double click to install:

02_install_01

 

Log into your Account:

01_download_04

Select the folder where to install:

02_install_03

 

As next select your components:

02_install_04

 

and wait for the installer:

02_install_05

 

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

02_install_06

 

Start Qt Creator with -settingsPath

All Qt Creator instances by default share the settings. Having the new Qt Creator 4.0.2 and old 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 Beta, 5.7 RC and the new Qt 5.7 Release.

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

Search for the Qt Creator.app from Qt 5.7 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:

03_qtc_prepare

 

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:

02_qtc_settings_05

Qt Creator will create the QtProject folder where all the configuration settings are stored.

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

Qt Creator 4.0.2

First thing you’ll notice after starting Qt Creator 4.0.2 is the new default flat design. If you don’t like it you can go back to the old one or a dark theme:

04_qtc_prefs_01

 

I’m also changing the language from german to english.

And here’s the new flat design:

03_qtc_flat_03

Qt Creator Preferences Working Directory

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

04_qtc_prefs_02

 

Qt Creator Preferences Android

Take a look at your Android preferences:

05_qtc_android_01

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

05_qtc_android_02

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.7 –> clang_64 –> bin:

06_qtc_ext_tools_01

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.7 –> 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 change the executable:

06_qtc_ext_tools_04

06_qtc_ext_tools_05

Test if Linguist will start. From External Tools

06_qtc_ext_tools_06

Linguist should start:

06_qtc_ext_tools_07

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 new 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:

05_qtc_test_03

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

Now you can try out all the new Controls.

Congrats – now you have installed Qt 5.7.Β  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)

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

Qt Quick Controls 2 are introduced as a Technical Preview in Qt 5.6 and willbecome Qt Quick Controls 2 in Qt 5.7.

Qt 5.7 Beta was announced 2016-04-21. This Beta is only available as a download – not from Online Installers.

If you only want to do first steps to try out you can go on with the Qt 5.6 – if you want to get the newest features it makes sense to install Qt 5.7 Beta.

Attention: the new UI Controls are still named ‘qt.labs.controls’ – beginning with the Qt 5.7 RC the renaming into Qt Quick Controls 2 will befinished, so be warned: you must change the imports in your QML files as soon as Qt 5.7 RC is out.

Besides Qt 5.7 Beta you’ll also get a new Qt Creator 4.0 RC.

Here are the steps to download and install Qt 5.7 Beta:

Install Qt 5.7 Beta

Go to your Qt Account – Downloads and select Qt – 5.7.0-beta:

01_download_01

Here’s my download on OSX:

01_download_02

Double click to install:

01_download_03

Log into your Account:

01_download_04

Select the folder where to install:

01_download_05

As next select your components:

01_download_06

and wait for the installer:

01_download_07

01_download_08

Start Qt Creator with -settingsPath

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

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

Search for the Qt Creator.app from Qt 5.7 Beta 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:

02_qtc_settings_03

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:

02_qtc_settings_05

Qt Creator will create the QtProject folder where all the configuration settings are stored.

Now you can start Qt Creator 3.6.1 from Qt 5.6.0 together with Qt Creator 4.0 RC from Qt 5.7 Beta without any collision.

Qt Creator 4.0 RC

First thing you’ll notice after starting Qt Creator 4.0 is the new default flat design. If you don’t like it you can go back to the old one or a dark theme:

03_qtc_flat_01

And here’s the new flat design:

03_qtc_flat_03

Qt Creator Preferences Working Directory

Set your working directory for 5.7 Beta:

04_qtc_workdir_01

Qt Creator Preferences Android

Take a look at your Android preferences:

05_qtc_android_01

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

05_qtc_android_02

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.7 –> clang_64 –> bin:

06_qtc_ext_tools_01

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.7 –> 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 change the executable:

06_qtc_ext_tools_04

06_qtc_ext_tools_05

Test if Linguist will start. From External Tools

06_qtc_ext_tools_06

Linguist should start:

06_qtc_ext_tools_07

Verify Installation: New qt.labs.controls Project

As last step verify if all is correct configured. Normaly I do this using the qt.labs.controls Gallery app, but because of work on the renaming from qt.labs.controls into Qt Quick Controls 2 it’s missed as part ofΒ  Qt 5.7 Beta. So let’s try out a brand new qt.labs.controls Project wizard:

07_verify_installation_01

07_verify_installation_02

Select your Kits – I selected Android and iOS devices:

07_verify_installation_03

You’re done. Connect your device via USB and hit ‘Run’:

07_verify_installation_05

The app should run on your devices.


Congrats – now you have installed Qt 5.7 Beta. Please follow my blog series: https://appbus.wordpress.com/category/qt-for-mobile/overview/

As soon as Qt 5.7 RC is out I’ll edit the articles containing 5.6 screenshots.

Patch Qt 5.6.0

April 8, 2016 — Leave a comment

While testing Qt 5.6.0 and qt.labs.controls on Android and iOS I noticed a problem.

Please take a look at this screenshot:

01_textfield

qt.labs.controls provide three styles: Material, Universal, Default. Controls are different but should have similar size.

As you can see the text in Material style is too small. So I reported a bug: https://bugreports.qt.io/browse/QTBUG-50971

Bug was fixed soon by J-P Nurmi πŸ™‚

02_bugfixed

As I reported the bug, branch 5.6.0 was already freezed, so the fix is in current 5.6 branch: 5.6.1

If you installed 5.6 you probably got 5.6.0.

You can verify your version from Qt Creator –> Preferences –> Build & Run –> Qt Versions

03_my_version

If you want to do some real apps from Qt 5.6.0 you should patch your installed Qt Version.

Qt is Open Source – so it’s no problem to get the changed module πŸ™‚

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

04_component_branch

Now it’s easy to patch.

Hint: you must do this for all installed kits – so I have done it for Android and iOS.

Open a Terminal and do this to patch the Android Kit:

export ANDROID_NDK_ROOT=/your_path_to/android-ndk-r10e
cd /your-path-to-store-cloned-repo_android
git clone --branch 5.6 git://code.qt.io/qt/qtquickcontrols2.git
cd qtquickcontrols2
/your-path-where-qt-is-installed/5.6/android_armv7/bin/qmake
make
make install

and similar for iOS:

cd /your-path-to-store-cloned-repo_ios
git clone --branch 5.6 git://code.qt.io/qt/qtquickcontrols2.git
cd qtquickcontrols2
/your-path-where-qt-is-installed/5.6/ios/bin/qmake
make
make install

thanks @jpnurmi helping me to make this work.


← Back (Install Qt 5.6)

β†’ Next Article (Qt Creator – Intro)

⇐ Home (Overview / Topics)