[BlueT - Matthew Lien - 練喆明]

I’m developing a cross-platform app with Qt 5.9 (+ Felgo) for our coworking space in Taiwan.
All of users are Traditional Chinese native, so I’m using UTF-8 Chinese strings in my app.

Most of the parts seems ok, but the QML Button with UTF-8 Chinese only show me empty spaces.

On Desktop it works fine, but on Android (both in emulator and on phone) the problem occured.
And, if I set the button.text = “中文 UTF-8 Chinese” again later in Component.onComplete, it display correctly.

Can I use Chinese (UTF-8) strings in the Button.text field?
If yes, what should I do to make it work?

Codes:

    // imports
    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Layouts 1.1
    
    import QtQuick.Controls 2.1
    //import QtQuick.Controls.Material 2.1
    import QtPositioning 5.2

 

QML part

 

    // QML Button parts

    Rectangle {
		id: containerBtn
		height: dp(60)
		radius: 5
		anchors.right: parent.right
		anchors.left: parent.left
		anchors.bottom: parent.bottom
		border.color: "blue"


		Button {
			id: btn_reload_pic
			text: "截圖.reload()"
			//dropShadow: true
			//icon: IconType.recycle
			anchors.right: parent.horizontalCenter
			//width: parent.width / 4
			//radius: 5

			onClicked: {
				var currentTime = new Date();
				currentSnapshot.snapshotURL = currentSnapshot.snapshotURL + "?t=" + currentTime
			}
		}

		AppButton {
			id: btnLock
			text: "芝麻開門（或關門）"
			dropShadow: true
			icon: IconType.question
			anchors.left: parent.horizontalCenter
			width: parent.width / 4
			radius: 5

			onClicked: lockSwitch()
		}
	}

 

 

 

javascript set works

    // Component.onComplete
    btnLock.text = '芝麻關門';

 

Screenshots:

Button shows empty utf-8 chinese string [1]

after setting button.text later in onComplete [2]

Environments:

Qt 5.9
QtCreator 4.3.0
Felgo 2.12.1-1
Ubuntu 16.04 LTS 64bit
Android 7.0 API 24, x86 emulator / HTC 10

Test App: MOLiApp on Google Play (I cannot post link here)

[1]: https://i.stack.imgur.com/4JLlr.png
[2]: https://i.stack.imgur.com/bFSf4.png

[BlueT - Matthew Lien - 練喆明]

Update:
This only happens at the first tab (the tab shown when App start)
POC here: https://github.com/BlueT/qt-testing-utf8

I create a Felgo Tabbed application, and add buttons on it. Nothing more.

You can see that at the first page some words become empty space, but in the second page all words shows correctly.

But the two pages are identical.

 

 

[GüntherFelgo Team]

Hi BlueT!

I just tested the POC project and also downloaded the MOLIApp beta from PlayStore. I was able to reproduce the issue with our Android 7 test device. The problem does not occur on another device running on Android 5, so I assume this is related to Android 7.

Without digging a little deeper, it’s hard to say why the font is broken for UTF-8 characters on Android 7 when used at the initially visible page. I’ve added the issue to our bugtracking system.

As a workaround, I was able to get it working by using a QML Loader to load the first page at runtime after app-start and then only display it after it was loaded:

import QtQuick 2.6
import Felgo 3.0

App {
  id: app

  // loads the given QML item dynamically after app-start
  Loader {
    id: loader
    source: "FirstPage.qml"
    asynchronous: true
    anchors.fill: parent
    visible: false

    // after loading is finished, add the item to the main QML
    onLoaded: loader.item.parent = content
  }

  // container item for dynamically loaded page
  Rectangle {
    id: content
    anchors.fill: parent
  }
}

 

Hope this helps!

 

[BlueT - Matthew Lien - 練喆明]

Hello Günther,

Thanks for your reply and all the works on helping me/us.

This is a serious bug to all non-latin / utf-8 developers/users.  Kinda depressed especially when it’s found after I’ve spent a lot (compare to other solutions) to purchased Felgo license without enough survey, and expecting Felgo can help me on stepping into the next level of my technical education career… Hahaha
I had already started my project, so you’re my only hope!

 

I’ve tested the workaround you suggested, but no luck to be able to apply it into the tabbed navigation item. Maybe there’s something I missed?
This code gives me an empty page.

import Felgo 3.0
import QtQuick 2.6

App {

	Navigation {

		// Comment to use a navigation drawer instead of tabs on Android
		navigationMode: navigationModeTabs

		NavigationItem {
			title: qsTr("First Page")
			icon: IconType.square

			Loader {
				id: loader
				source: "FirstPage.qml"
				asynchronous: true
				anchors.fill: parent
				visible: false

				// after loading is finished, add the item to the main QML
				onLoaded: loader.item.parent = content
			}

			//FirstPage {}
			// container item for dynamically loaded page
			Rectangle {
				id: content
				anchors.fill: parent
			}
		}

		NavigationItem {
			title: qsTr("Second Page")
			icon: IconType.circle

			SecondPage {}
		}

	}
}

 

BTW, two further questions:

1. Should I use QtQuick 2.5 or 2.6?  In Felgo’s version of QtCreator, there’s no 2.6 in it’s auto completion list. (I know there’s a version 2.6 exists in the world, just not sure if it’s included and supported by Felgo 2.12.1-1).
2. Does import sequence matters?  If yes, what rules should I follow?

 

Thanks again.  Really hoping to have a working prototype.

 

Best wishes,
BlueT

 

[GüntherFelgo Team]

Hi!

For the navigation component to work correctly, the NavigationItems require to be a direct child of the Navigation.

With the above example, I simply wanted to show that using a Loader, which creates the QML at runtime after the app-start, solves the issue of having a wrong font for the first visible page, which was created during app-start before.

This means, you can e.g. use a Loader to completely load your whole first app screen dynamically this way. Using a Loader is recommended anyways, as otherwise the initial startup-time of the app might become quite long if your statically created pages are quite complex.

You can have a look at the qt documentation to learn more about Loader and Dynamic Object Creation (loader is simply a convenience type to dynamically create QML objects).

The following example wraps the main navigation in a Component, which allows to create it dynamically at runtime then:

import Felgo 3.0
import QtQuick 2.5

App {
  id: app

  // loads the given item dynamically after app-start
  Loader {
    id: loader
    sourceComponent: navigationComponent
    asynchronous: true
    anchors.fill: parent
    visible: false

    // after loading is finished, add the item to the main app content item
    onLoaded: loader.item.parent = app.contentItem
  }

  // component for main navigation
  Component {
    id: navigationComponent
    Navigation {

      // Comment to use a navigation drawer instead of tabs on Android
      navigationMode: navigationModeTabs

      NavigationItem {
        title: qsTr("First Page")
        icon: IconType.square

        FirstPage {}
      }

      NavigationItem {
        title: qsTr("Second Page")
        icon: IconType.circle

        SecondPage {}
      }

    }
  }
}

 

Does this solution work for you?

[GüntherFelgo Team]

Regarding imports:

The ordering of the import statements does not matter. Qt Quick 2.5 is the main version at the moment, using 2.6 in the example above was a typo on my end, but it doesn’t cause any issues. QML is really relaxed in terms of versions.

You will see an error in the log as soon as you use a feature which would require an import of the newer version, and this is solved simply by increasing the number for the QML file with the affected import.

Cheers,
Günther

[BlueT - Matthew Lien - 練喆明]

Hello Günther,

This workaround works, thanks a lot! 🙂

Still hope this bug can be resolved in the nearly future. 🙂

 

Best,

BlueT