Adding Multi-language Support to Your Project

The Multi-language Support tutorial illustrates how you can add support for multiple languages to your project. In this tutorial you prepare a simple log in UI for multi-language support and import translations from a JSON file.

You need to download the starting project for this tutorial from here before you start.

This project consists of a login page with a couple of text elements.

Additionally, you will use a JSON translation file in this tutorial. Download it from here.

Running the Tutorial Project

To open the tutorial project in Qt Design Studio, open the .qmlproject file located in the root folder of the downloaded project.

JSON Translation File

The JSON translation file you are using in this project has the following structure:

    {
    "translatables": [
        {
            "trId": "translation_password",
            "translations": [
                {
                    "language": "en",
                    "translation": "Password"
                },
                {
                    "language": "sv",
                    "translation": "Lösenord"
                }
            ]
        },
        {
            "trId": "translation_account",
            "translations": [
                {
                    "language": "en",
                    "translation": "Qt Account"
                },
                {
                    "language": "sv",
                    "translation": "Qt Konto"
                }
            ]
        },
        {
            "trId": "translation_createaccount",
            "translations": [
                {
                    "language": "en",
                    "translation": "Create Account"
                },
                {
                    "language": "sv",
                    "translation": "Skapa Konto"
                }
            ]
        },
        {
            "trId": "translation_login",
            "translations": [
                {
                    "language": "en",
                    "translation": "Log In"
                },
                {
                    "language": "sv",
                    "translation": "Logga In"
                }
            ]
        },
        {
            "trId": "translation_username",
            "translations": [
                {
                    "language": "en",
                    "translation": "Username"
                },
                {
                    "language": "sv",
                    "translation": "Användarnamn"
                }
            ]
        }
    ]
}

Preparing Your Project

First, you need to prepare your project for translation:

1. In Projects, double-click Screen01.ui.qml to open it.
2. All text strings that you want to translate need to be of qsTrId type. In this project the text strings are of qsTr type so you need to change them. Open the Code view, find all five occurrences of qsTr and replace them with qsTrId. For example, replace:

   text: qsTr("Qt Account")

   with:

   text: qsTrId("Qt Account")

3. Next, you need to replace the text value with the text string variable from the translation file for the five text strings you want to translate. For example, replace:

   text: qsTrId("Qt Account")

   with:

   text: qsTrId("translation_account")

Importing Translations

Next, you need to import your JSON translation file:

1. Go to View > Views and select Translations to open the Translations view. You can drag it to a workspace to dock it.
2. In Translations, select .
3. Select the languages that you want to support in your project, in this case English - American English and Swedish - Svenska.
4. Set English - American English as primary language and select Ok.
5. Select and open the ml_translations.json file. Now you can see all your imported translations in the Translations view.

   

You can select language from the dropdown list on the left side of the Translations view. Translations for the selected languages will show in the Translations view as well as in the 2D view.

You can run translation tests, import, and export translations as described in Translations.

Finally, before you can see your translations in the application or in Live Preview, you must generate Qt translation source files. To do this, select in the Translations view.