Lokalisierte Uhr mit ID-basierter Übersetzung

Benutzeroberfläche

Das Beispiel zeigt die aktuelle Uhrzeit und das aktuelle Datum in der Ländereinstellung und Sprache Ihres Systems an. Übersetzungen werden für folgende Sprachen unterstützt: Englisch, Deutsch, Französisch, Spanisch, Italienisch, Japanisch, Koreanisch, Portugiesisch, Arabisch und Chinesisch. Wenn Ihr Desktop in einer anderen Sprache eingestellt ist, wird auf Englisch zurückgegriffen.

Das Beispiel akzeptiert außerdem eine Ländereinstellung als Befehlszeilenargument, um verschiedene Sprachen und Ländereinstellungen zu testen, ohne Ihr System zu verändern: localizedClockIdBased --locale en_GB oder localizedClockIdBased --locale de

Standardmäßig zeigt die Anwendung Uhrzeit und Datum in der aktuellen Ländereinstellung an, verfügt jedoch auch über eine Schaltfläche, die einen Dialog mit einer Liste von Zeitzonen öffnet. Über diesen Dialog 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 ID-basierte Textübersetzungen). Dieser Ansatz ermöglicht die Wiederverwendung von Übersetzungen in verschiedenen Kontexten. Wir veranschaulichen dies anhand einer gemeinsamen Übersetzung zwischen „Main.qml“ und dem Zeitzonen-Dialog, einem auf „ QWidget “ basierenden Formular, das in C++ geschrieben ist. Ein weiterer Aspekt der ID-basierten Übersetzung besteht darin, dass sie den in der Benutzeroberfläche angezeigten Text von den Entwicklern trennt und so den Quellcode unabhängig von den tatsächlich dem Benutzer präsentierten Wörtern macht.

In den folgenden beiden Screenshots der Anwendung in englischer Sprache nutzen die beiden Vorkommen des Textes „Select time zone: “ im Hauptfenster (QML) und im Dialog (C++) dieselbe Übersetzung, da sie dieselbe ID verwenden.

Screenshot aus dem Anwendungsfenster der englischen Version:

Der Dialog mit einer Liste von Zeitzonen (englische Version):

Das Hauptfenster der Anwendung in deutscher Sprache:

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

Implementierung

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

find_package(Qt6 REQUIRED COMPONENTS Core Linguist Qml Quick): Findet und verknüpft die erforderlichen Qt-6-Module, darunter „ Linguist “, die für die Internationalisierung unerlässlich sind. „qt_standard_project_setup() “ : Richtet das Internationalisierungssystem mit Unterstützung für die aufgeführten Locales ein. Obwohl die Ausgangssprache Englisch ist, ist bei der Verwendung der ID-basierten Übersetzung dennoch eine englische Übersetzung erforderlich. Der Quellcode enthält nur die IDs und hat keinen Zugriff auf die Quelltexte. Daher müssen wir das Projekt mit der englischen Übersetzung einrichten, damit `qt_add_translations` eine TS-Datei für Englisch erstellt; andernfalls fehlen diese zur Laufzeit.

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 die Übersetzungsquelldateien (TS-Dateien) im Verzeichnis „i18n“ unter Verwendung von clock als Basisnamen generiert und, sofern sie Übersetzungen enthalten, zu binären .qm -Dateien kompiliert werden.

• Es wird eine TS-Datei pro Sprache generiert, die unter I18N_TRANSLATED_LANGUAGES auf qt_standard_project_setup aufgeführt ist.
• MERGE_QT_TRANSLATIONS und QT_TRANSLATION_CATALOGS qtbase fügen die Qt-Übersetzungen in das Projekt ein. Dies ist erforderlich, um die Schaltflächen des Widgets QDialog im Zeitzonen-Dialog zu übersetzen. Da der Text auf diesen Schaltflächen von QDialog gesteuert wird, werden diese Schaltflächen ohne Einbindung der 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, bindet die Datei „Main.qml“ ein und importiert die Quell- und Header-Dateien des Zeitzonen-Managers 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 Einstiegspunkt der Anwendung. Dieser Teil ist für die Einstellung der Ländereinstellung, die Installation der erforderlichen Übersetzungen und das Laden der Benutzeroberfläche zuständig. Nachfolgend finden Sie eine Erläuterung der relevanten Codeabschnitte:

Definieren Sie das Argument „locale“, 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);

Die Argumente analysieren, die angegebene Locale abrufen und die Eingabe-Locale als Standard-Locale der Anwendung festlegen:

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

Installiere die englische Übersetzung unabhängig von der Sprachumgebung, um unvollständige Übersetzungen für andere Sprachen zu ermöglichen. QTranslator fragt Übersetzungen für Texte in umgekehrter Reihenfolge ab, in der die Übersetzungen installiert sind:

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

Eine Übersetzung entsprechend der angegebenen Ländereinstellung installieren:

    QTranslator translation;
    if (QLocale().language() != QLocale::English) {
        if (translation.load(QLocale(),  „clock“_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, sind möglicherweise zwei Übersetzungen installiert. Qt verwendet bei sich überschneidenden Schlüsseln die zuletzt installierte Übersetzung. Daher hat die lokalisierte Übersetzung Vorrang vor der englischen, und falls Übersetzungen fehlen, greift QTranslator auf Englisch zurück.

Zeitzonen-Dialog

Diese Klasse ist ein auf C++ QWidget basierender Dialog (QDialog), der ein „ QComboBox “ mit einer Liste von Zeitzonen anzeigt. Nachfolgend finden Sie eine Erläuterung des Codes:

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

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

Legen Sie den Titel mit ID-basierter Übersetzung fest (dialog.ui). Hier ist „title“ die eindeutige ID der Übersetzung:

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

Fügen Sie eine Beschriftung mit ID-basierter Übersetzung (dialog.ui) mit der ID „timezonelabel“ hinzu:

<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 Abwicklung von Zeitzonenänderungen zuständig ist.

Wenn der Benutzer eine Zeitzone auswählt, speichert die Instanz von „ TimeZoneManager “ die gewählte Zeitzone:

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

Bei einer Aktualisierung der Zeitzone wird ein Signal „TimeZoneManager::timeZoneChanged“ ausgelöst:

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

TimeZoneManager::currentTimeZoneOffsetMs() ist mit „ Q_INVOKABLE “ gekennzeichnet und gibt den Zeitversatz der ausgewählten Zeitzone zurück. Da die Klasse „ TimeZoneManager “ mit „ QML_ELEMENT “ und „QML_SINGLETON“ deklariert ist, kann direkt aus QML auf die Methode zugegriffen werden, um die angezeigte Uhrzeit zu aktualisieren; siehe dazu 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, die 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 Codeabschnitte:

Definieren Sie das Fenster und legen Sie dessen Titel mithilfe von ` qsTrId()` für ID-basierte Übersetzungen fest. Der Text für die Ausgangssprache wird mithilfe der Meta-String-Notation „ //% “ angegeben (siehe ID-basierte Textübersetzungen). „lupdate“ analysiert die Meta-Strings und schreibt die definierten Ausgangstexte in die TS-Datei. Da der Ausgangstext mithilfe von Meta-Strings und in Form eines Kommentars angegeben wird, sind diese für die Anwendung zur Laufzeit nicht sichtbar. Wenn die Anwendung also in der englischen Locale geladen wird, muss sie – obwohl die Ausgangssprache Englisch ist – dennoch die englische Übersetzung installieren, um die englischen Texte anzuzeigen. Andernfalls wird die rohe ID „Main-Digital-Clock“ angezeigt. Dies ist auch der Grund, warum wir in der Konfiguration in CMakeLists.txt unter „ I18N_TRANSLATED_LANGUAGES “ den Wert „en“ festgelegt haben.

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

Zeige die Anzahl der Sekunden mithilfe von ` qsTrId()` mit Unterstützung für Pluralformen an. Auch hier wird der Text in der Quellsprache mithilfe des Metatextes ` //% ` angegeben. Die Pluralform wird durch die Verwendung der speziellen Notation „%n“ im Quelltext des Metatextes aktiviert (siehe „Umgang mit Pluralformen“). Je nach Wert von n gibt die Übersetzungsfunktion eine unterschiedliche Übersetzung zurück, mit der grammatikalisch korrekten Zahl für die Zielsprache. Im Englischen wird beispielsweise die Pluralform verwendet, wenn der Wert von ` root.seconds ` größer als eins ist; andernfalls 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)

Zeigen Sie die aktuell ausgewählte Zeitzone mithilfe einer ID-basierten Übersetzung an, wobei „ //% "Time zone: " “ den Text in der Ausgangssprache angibt:

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

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

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

Nach dem Ändern der Zeitzone und dem Empfang des Signals „ TimeZoneManager::timeZoneChanged() “ (siehe Zeitzonen-Manager) aktualisieren Sie die Variable „ diff “ mit dem Zeitversatz der ausgewählten Zeitzone:

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

Definieren 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 zum Zeitversatz 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();
        }
    }

Die Ländereinstellung beeinflusst die Darstellung von Datum und Uhrzeit. Diese werden gemäß den Landeskonventionen der aktuellen Ländereinstellung formatiert. Beispielsweise führt eine deutsche Ländereinstellung zu einer 24-Stunden-Uhrzeit und dem Datumsformat TT.MM.JJJJ, während eine US-amerikanische Ländereinstellung eine 12-Stunden-Uhrzeit und das Datumsformat MM/TT/JJJJ verwendet.

Beispielprojekt @ code.qt.io