Lokalisierte Uhr mit ID-basierter Übersetzung

Benutzeroberfläche

Das Beispiel zeigt die aktuelle Uhrzeit und das Datum in dem Gebietsschema und der Sprache Ihres Systems an. Die Übersetzung für diese Sprachen wird unterstützt: Englisch, Deutsch, Französisch, Spanisch, Italienisch, Japanisch, Koreanisch, Portugiesisch, Arabisch und Chinesisch. Wenn Ihr Desktop in einer anderen Sprache ist, wird er auf Englisch zurückgesetzt.

Das Beispiel akzeptiert auch ein Gebietsschema als Befehlszeilenargument, um verschiedene Sprachen und Gebietsschemata zu testen, ohne Ihr System zu verändern: localizedClockIdBased --locale en_GB oder localizedClockIdBased --locale de

Standardmäßig zeigt die Anwendung die Uhrzeit und das Datum im aktuellen Gebietsschema an, aber sie bietet auch eine Schaltfläche, die ein Dialogfeld mit einer Liste von Zeitzonen öffnet. Mit Hilfe dieses Dialogs kann der Benutzer die Zeitzone der Uhr ändern.

ID-basierte Übersetzung

In diesem Beispiel verwenden wir die ID-basierte Übersetzung, bei der übersetzbare Texte durch eine eindeutige ID identifiziert werden und nicht durch die herkömmliche Kombination aus Kontext und Text (siehe Text-ID-basierte Übersetzungen). Dieser Ansatz ermöglicht die Wiederverwendung von Übersetzungen in verschiedenen Kontexten. Wir demonstrieren dies anhand einer gemeinsamen Übersetzung zwischen Main.qml und dem Zeitzonendialog, einem in C++ geschriebenen QWidget-basierten Formular. Ein weiterer Aspekt der ID-basierten Übersetzung ist, dass sie den in der Benutzeroberfläche angezeigten Text von den Entwicklern trennt und den Quellcode unabhängig von den tatsächlichen Worten macht, die dem Benutzer präsentiert werden.

In den folgenden beiden Screenshots aus der englischen Anwendung sind die beiden Instanzen des Textes "Select time zone: " im Hauptfenster (QML) und im Dialogfeld (C++) die gleiche Übersetzung, da sie die gleiche ID verwenden.

Screenshot aus dem Anwendungsfenster in der englischen Version:

Das Dialogfeld mit einer Liste von Zeitzonen (englische Version):

Das Hauptfenster der Anwendung in deutscher Sprache:

Der Dialog mit der Liste der Zeitzonen (deutsche Version):

Umsetzung

Die Anwendung besteht aus fünf Teilen:

• CMakeLists.txt
• main.cpp
• Zeitzonen-Dialog
• Zeitzonen-Manager
• main.qml

CMakeLists.txt

Die CMake-Datei der Anwendung aktiviert die ID-basierte Übersetzungs- und Lokalisierungsunterstützung von Qt. Hier sind die relevanten Teile:

find_package(Qt6 REQUIRED COMPONENTS Core Linguist Qml Quick): Findet und verlinkt die erforderlichen Qt 6 Module, einschließlich Linguist, die für die Internationalisierung notwendig sind. qt_standard_project_setup(): Richtet das Internationalisierungssystem mit Unterstützung für die aufgelisteten Gebietsschemata ein. Obwohl die Ausgangssprache Englisch ist, ist eine englische Übersetzung erforderlich, wenn die ID-basierte Übersetzung verwendet wird. Der Quellcode enthält nur die IDs und sieht die Quelltexte nicht. Daher müssen wir das Projekt mit der englischen Übersetzung einrichten, so dass qt_add_translations eine TS-Datei für Englisch erstellt; andernfalls werden sie zur Laufzeit fehlen.

qt_standard_project_setup(REQUIRES 6.8
    I18N_TRANSLATED_LANGUAGES de ar ko zh ja fr it es pt en)

qt_add_translations(...): Bündelt die Funktionalität von lupdate und lrelease, indem es die Übersetzungsquelldateien (TS-Dateien) im "i18n"-Verzeichnis unter Verwendung von clock als Basisnamen erzeugt und sie zu binären .qm -Dateien kompiliert, wenn sie Übersetzungen enthalten.

• Erzeugt eine TS-Datei pro Sprache, die in I18N_TRANSLATED_LANGUAGES von qt_standard_project_setup aufgeführt ist.
• MERGE_QT_TRANSLATIONS und QT_TRANSLATION_CATALOGS qtbase die Qt-Übersetzungen in das Projekt ein. Dies ist notwendig, um die Schaltflächen des QDialog Widgets im Zeitzonendialog zu übersetzen. Da der Text auf diesen Schaltflächen von QDialog gesteuert wird, werden diese Schaltflächen ohne Einbindung von Qt-Übersetzungen nicht übersetzt (siehe die übersetzten Texte des Dialogs in den deutschen Screenshots unter ID-basierte Übersetzung).

qt_add_translations(localizedClockIdBased
    TS_FILE_BASE i18n/clock
    MERGE_QT_TRANSLATIONS
    QT_TRANSLATION_CATALOGS qtbase
    RESOURCE_PREFIX i18n
)

qt_add_qml_module(...): Fügt ein QML-Modul unter der URI qtexamples.localizedclock hinzu, schließt die Datei Main.qml ein und importiert die Quell- und Headerdateien von Time Zone Manager in das QML-Modul.

qt_add_qml_module(localizedClockIdBased
    URI qtexamples.localizedclock
    VERSION 1.0
    QML_FILES
        Main.qml
    RESOURCES dialog.ui
    SOURCES
        timezonemanager.h timezonemanager.cpp
        dialog.h dialog.cpp
)

main.cpp

Der Startpunkt der Anwendung. Dieser Teil ist für die Einstellung des Gebietsschemas, die Installation der erforderlichen Übersetzungen und das Laden der Benutzeroberfläche verantwortlich. Nachfolgend finden Sie eine Erläuterung der relevanten Codeteile:

Definieren Sie das Gebietsschema-Argument, z. B. --locale en_US oder --locale de_DE:

    QCommandLineParser parser;
    QCommandLineOption localeOption("locale"_L1, "Locale to be used in the user interface"_L1,
                                    "locale"_L1);
    parser.addOption(localeOption);
    parser.addHelpOption();
    parser.process(app);

Analysieren Sie die Argumente, holen Sie das angegebene Gebietsschema und setzen Sie das eingegebene Gebietsschema als Standardgebietsschema der Anwendung:

        QLocale locale(parser.value(localeOption));        qInfo() << "Setting locale to" << locale.name();
        QLocale::setDefault(Gebietsschema);

Installieren Sie die englische Übersetzung unabhängig vom Gebietsschema, um unvollständige Übersetzungen für andere Sprachen zu ermöglichen. QTranslator fragt Übersetzungen für Texte in der umgekehrten Reihenfolge ab, in der die Übersetzungen installiert werden:

    QTranslator enPlurals; const auto enPluralsPath = ":/i18n/clock_en.qm"_L1; if (!enPlurals.load(enPluralsPath))        qFatal("Could not load %s!", qUtf8Printable(enPluralsPath));
    app.installTranslator(&enPlurals);

Installiert eine Übersetzung für das angegebene Gebietsschema:

    QTranslator translation; if (QLocale().language() != QLocale::English) { if (translation.load(QLocale(), "Uhr"_L1, "_"_L1, ":/i18n/"_L1)) {            qInfo("Loading translation %s",
                  qUtf8Printable(QDir::toNativeSeparators(translation.filePath()))); if (!app.installTranslator(&translation))                qWarning("Could not install %s!",
                         qUtf8Printable(QDir::toNativeSeparators(translation.filePath()))); } else {            qInfo("Could not load translation to %s. Using English.",
                  qUtf8Printable(QLocale().name())); } }

Da wir im vorherigen Schritt die englische Übersetzung installiert haben, kann es sein, dass wir am Ende zwei Übersetzungen installiert haben. Qt verwendet die zuletzt installierte Übersetzung für alle sich überschneidenden Schlüssel. Daher hat die lokal-spezifische Übersetzung Vorrang vor der englischen, und im Falle von fehlenden Übersetzungen greift QTranslator auf die englische zurück.

Zeitzonen-Dialog

Bei dieser Klasse handelt es sich um einen C++ QWidget-basierten Dialog (QDialog), der eine QComboBox mit einer Liste von Zeitzonen anzeigt. Nachfolgend finden Sie eine Erklärung des Codes:

Aktivieren Sie die ID-basierte Übersetzung im UI-Formular (dialog.ui):

<ui version="4.0" idbasedtr="true">

Setzen Sie den Titel mit ID-basierter Übersetzung (dialog.ui). Hier ist "title" die eindeutige ID der Übersetzung:

<property name="windowTitle">
    <string id="title">Time Zone</string>
</property>

Fügen Sie ein Label mit ID-basierter Übersetzung hinzu (dialog.ui), mit der ID "timezonelabel":

<widget class="QLabel" name="label">
...
<property name="text">
<string id="timezonelabel">Select time zone</string>
</property>
...
</widget>

Zeitzonen-Manager

Eine QML_SINGLETON Klasse in C++, die für die Handhabung von Zeitzonenänderungen verantwortlich ist.

Nach Auswahl einer Zeitzone durch den Benutzer merkt sich die Instanz von TimeZoneManager die gewählte Zeitzone:

        connect(m_dialog.get(), &Dialog::timeZoneSelected, this, &TimeZoneManager::setTimeZone);

Bei einer Aktualisierung der Zeitzone wird ein TimeZoneManager::timeZoneChanged-Signal ausgegeben:

        connect(m_dialog.get(), &Dialog::timeZoneSelected, this, &TimeZoneManager::setTimeZone);
    }
    m_dialog->show();
}

TimeZoneManager::currentTimeZoneOffsetMs() Die Methode TimeZoneManager::timeZoneChanged ist mit Q_INVOKABLE gekennzeichnet und gibt die Zeitverschiebung der ausgewählten Zeitzone zurück. Da die Klasse TimeZoneManager mit QML_ELEMENT und QML_SINGLETON deklariert ist, kann die Methode direkt von QML aus aufgerufen werden, um die dargestellte Zeit zu aktualisieren; siehe auch Main.qml.

qint64 TimeZoneManager::currentTimeZoneOffsetMs()
{
    const QTimeZone tz(m_timeZone.toLatin1());
    if (!tz.isValid())
        return 0;
    const QDateTime nowUtc = QDateTime::currentDateTimeUtc();

    const int targetOffset = tz.offsetFromUtc(nowUtc);
    const int systemOffset = QTimeZone::systemTimeZone().offsetFromUtc(nowUtc);

    return (targetOffset - systemOffset) * 1000;
}

Main.qml

Die Haupt-QML-Datei definiert die Benutzeroberfläche der Anwendung. Die Benutzeroberfläche zeigt Uhrzeit, Datum, aktuelle Zeitzone und einen Sekundenzähler an. Außerdem enthält sie eine Schaltfläche, die einen Zeitzonendialog öffnet, um die Zeitzone zu ändern. Nachfolgend finden Sie eine Erläuterung der relevanten Codeteile:

Definieren Sie das Fenster und setzen Sie seinen Titel mit qsTrId() für die ID-basierte Übersetzung. Der Text für die Ausgangssprache wird mit der Meta-String-Notation //% angegeben (siehe Text-ID-basierte Übersetzungen). lupdate parst die Meta-Strings und schreibt die definierten Ausgangstexte in die TS-Datei. Da die Quelltexte über Meta-Strings und in Form eines Kommentars angegeben werden, sind sie für die Anwendung zur Laufzeit nicht sichtbar. Wenn die Anwendung also im englischen Gebietsschema geladen wird, muss sie, obwohl die Ausgangssprache Englisch ist, die englische Übersetzung installieren, um die englischen Texte anzuzeigen. Andernfalls wird die Roh-ID "Main-Digital-Clock" angezeigt. Das ist auch der Grund, warum wir "en" in I18N_TRANSLATED_LANGUAGES durch das Setup in CMakeLists.txt angegeben haben.

//% "Digital Clock"
title: qsTrId("Main-Digital-Clock")

Zeigen Sie die Anzahl der Sekunden mit qsTrId() mit Pluralunterstützung an. Auch hier wird der Text in der Ausgangssprache mit dem //% meta string angegeben. Die Pluralform wird durch die Verwendung der speziellen Notation "%n" im Quelltext im Meta-String aktiviert (siehe Umgang mit Pluralformen). Je nach dem Wert von n gibt die Übersetzungsfunktion eine andere Übersetzung mit der richtigen grammatikalischen Zahl für die Zielsprache zurück. Im Englischen beispielsweise wird die Pluralform verwendet, wenn der Wert von root.seconds größer als eins ist, ansonsten wird die Singularform verwendet. Unter Übersetzungsregeln für Pluralformen finden Sie die Pluralregeln für verschiedene Sprachen.

//% "%n second(s)"
text: qsTrId("Main-n-second-s", root.seconds)

Anzeige der aktuell ausgewählten Zeitzone mit ID-basierter Übersetzung, wobei //% "Time zone: " den Text in der Ausgangssprache angibt:

//% "Time zone: "
text: qsTrId("timezone") + TimeZoneManager.timeZone;

Eine Schaltfläche zum Öffnen des Zeitzonendialogs. Der Text auf der Schaltfläche wird mit qsTrId() für ID-basierte Übersetzung angegeben. In diesem Fall wird der Ausgangstext nicht mehr durch Meta-Strings definiert, da es sich um eine Wiederverwendung der ID "timezonelabel" handelt, die zuvor im dialog.ui-Dokument verwendet wurde (siehe Zeitzonendialog). Bei der ID-basierten Übersetzung reicht es aus, den Ausgangstext pro ID nur einmal im Projekt anzugeben:

        Button {
            text: qsTrId("timezonelabel")
            onClicked: TimeZoneManager.openDialog()
            Layout.alignment: Qt.AlignHCenter
        }

Beim Wechsel der Zeitzone und dem Empfang des Signals TimeZoneManager::timeZoneChanged() (siehe Zeitzonenmanager) wird die Variable diff mit dem Zeitoffset der gewählten Zeitzone aktualisiert:

    Connections {
        target: TimeZoneManager
        function onTimeZoneChanged() {
            root.diff = TimeZoneManager.currentTimeZoneOffsetMs();
        }
    }

Deklarieren Sie einen Timer, der jede Sekunde ausgelöst wird und die Eigenschaften Zeit, Datum und Sekunden aktualisiert. Der Timer berechnet die Zeit, indem er die aktuelle Zeit zur Zeitverschiebung der ausgewählten Zeitzone addiert:

    Timer {
        interval: 1000
        running: true
        repeat: true
        triggeredOnStart: true

        onTriggered: {
            const now = new Date(new Date().getTime() + root.diff);
            const locale = Qt.locale();
            root.time = now.toLocaleTimeString(locale, Locale.ShortFormat);
            root.date = now.toLocaleDateString(locale);
            root.seconds = now.getSeconds();
        }
    }

Das Gebietsschema wirkt sich darauf aus, wie Datum und Uhrzeit angezeigt werden. Diese werden entsprechend den Länderkonventionen des aktuellen Gebietsschemas formatiert. Ein deutsches Gebietsschema ergibt beispielsweise eine 24-Stunden-Zeit und das Datumsformat TT.MM.JJJJ, während ein amerikanisches Gebietsschema eine 12-Stunden-Uhr und das Datumsformat MM/TT/JJJJ verwendet.

Beispielprojekt @ code.qt.io