How to localize a QML application on Ubuntu OS

In this article, we'll show you how to localize an app on Ubuntu os. Localization is important for many applications. We highlight how to localize the application to Chinese.

1) Create a basic application
First open our Ubuntu SDK and select the "App with simple UI and localization" template.



Then Next:




After we finished our project, we found in the project "LOCALIZEQML/PO" directory that there was a production file "CMakeLists.txt". When we first run our app (no matter what the architecture), the SDK will help us produce another file "Com.ubuntu.developer.liu-xiao-guo.localizeqml.pot". This file is the file we need to localize. We copy this file in the current file directory and rename it "Zh_cn.po". Note here that "ZH_CN" is the International language code for Chinese Simplified Chinese. We open the file and translate the file at the same time:

# SOME Descriptive title.# Copyright (C) year the package's Copyright holder# This file is distributed under the same lice NSE as the package package.# first AUTHOR <[email protected]>, year.##, Fuzzymsgid "" Msgstr "" project-id-vers Ion: \ n "" Report-msgid-bugs-to: \ n "" pot-creation-date:2014-11-20 12:05+0800\n "" Po-revision-date:year-mo-da HO:MI+ zone\n "" Last-translator:full NAME <[email protected]>\n "" Language-team:language <[email  Protected]>\n "" Language: \ n "" mime-version:1.0\n "" Content-type:text/plain; charset=utf-8\n "" Content-transfer-encoding:8bit\n "#:. /app/ui/hellotab.qml:6msgid "Hello.." Msgstr "Hello" #:. /app/ui/hellotab.qml:18msgid "Hello World" Msgstr "Hello, Worlds" #:. /app/ui/hellotab.qml:26msgid "You can change the Tab from page title above." Msgstr "You can change the label from the title of the page" #: /app/ui/worldtab.qml:6msgid ". world! " Msgstr ". World! "#: .. /app/ui/worldtab.qml:18msgid "Worldtab" msgstr "World Tag" #:/home/liuxg/release/build-localizedqml-desktop-default/po/ LocalizedqmL.desktop.in.h:1msgid "LOCALIZEQML" msgstr "Localization qml" 

It must be noted here that CharSet must be set to UTF-8 to display Chinese correctly. We can enter a command in the phone or simulator to view the current phone's language:


We re-run our app again. The interface you see on your phone is as follows:


We see that our UI is now displayed in Chinese. Let's review the contents of my qml file:

tab {    title:i18n.tr ("Hello..")    Page:page {        Column {            spacing:units.gu (2)            anchors.centerIn:parent            hellocomponent {                objectName: "Hellotab_hellocomponent"                anchors.horizontalCenter:parent.horizontalCenter                text:i18n.tr ("Hello World")            }            Label {                objectName: "Hellotab_label"                anchors.horizontalCenter:parent.horizontalCenter                text: i18n.tr ("You can change the tab from Page title above.")}}}    

We can see that all the strings are in " i18n.tr"To output. It can help us localize. Of course we can localize our application to any other language.
To illustrate the problem, we have changed our application to:

tab {    title:i18n.tr ("Hello..")    Page:page {        Column {            spacing:units.gu (2)            anchors.centerIn:parent            hellocomponent {                objectName: "Hellotab_hellocomponent"                anchors.horizontalCenter:parent.horizontalCenter                text:i18n.tr ("Hello World")            }            Label {                objectName: "Hellotab_label"                anchors.horizontalCenter:parent.horizontalCenter                text: i18n.tr ("You can change the Tab from Page title above.")            }            button {                text:i18n.tr ("Press Me")}}}    

To re-run our app, we see an English interface. We also look at our "Po" directory under the "Com.ubuntu.developer.liu-xiao-guo.localizeqml.pot", we see our newly added "press Me" in this file. We need to re-add it to our "Zh_cn.po" file.

# SOME Descriptive title.# Copyright (C) year the package's Copyright holder# This file is distributed under the same lice NSE as the package package.# first AUTHOR <[email protected]>, year.##, Fuzzymsgid "" Msgstr "" project-id-vers Ion: \ n "" Report-msgid-bugs-to: \ n "" pot-creation-date:2014-11-20 12:05+0800\n "" Po-revision-date:year-mo-da HO:MI+ zone\n "" Last-translator:full NAME <[email protected]>\n "" Language-team:language <[email  Protected]>\n "" Language: \ n "" mime-version:1.0\n "" Content-type:text/plain; charset=utf-8\n "" Content-transfer-encoding:8bit\n "#:. /app/ui/hellotab.qml:6msgid "Hello.." Msgstr "Hello" #:. /app/ui/hellotab.qml:18msgid "Hello World" Msgstr "Hello, Worlds" #:. /app/ui/hellotab.qml:26msgid "You can change the Tab from page title above." Msgstr "You can change the label from the title of the page" #: /app/ui/worldtab.qml:6msgid ". world! " Msgstr ". World! "#: .. /app/ui/worldtab.qml:18msgid "Worldtab" msgstr "World Tag" #:/home/liuxg/release/build-localizedqml-desktop-default/po/ LocalizedqmL.desktop.in.h:1msgid "LOCALIZEQML" msgstr "Localization qml" #:. /app/ui/hellotab.qml:30msgid "Press Me" MSGSTR "click Me"

Re-run our app:


We see that the new string has been translated. We can enter the following name in our shell:


We can see that a. Mo localization file is entered into the package, and exists in the file directory under "ZH_CN". The source code for the entire application is found at the following address:
BZR BranchLP:~LIU-XIAO-GUO/DEBIANTRIAL/LOCALIZEQML

How to localize a QML application on Ubuntu OS