How to do dynamic translation in QML: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Introduction=


<span class="caps">QML</span> relies on the core internationalization capabilities provided by Qt. In the sections below we show how you can load and install the translators on the C++ side and set the needed translation on the <span class="caps">QML</span> side.
==What to do on the C++ side==
The example below illustrates the necessary steps to get the dynamic translation to work. In the TranslationTest class we create a property:
that simply sets an empty string. This empty string is appended to the text in the <span class="caps">QML</span> code. This is a trick to get the whole expression to be reevaluated whenever the property emptyString changes. When not using this trick, QDeclarativeEngine will not know that it should reevaluate the text and do the translation. There is a suggestion in [https://bugreports.qt.nokia.com//browse/QTBUG-15602 Jira] ''[bugreports.qt.nokia.com]'' for for adding a more convenient way to know when the strings should be retranslated.
The selectLanguage() function checks which language is currently being set and loads and installs the corresponding translation file accordingly. It then emits languageChanged(). All <span class="caps">QML</span> Text { } elements that use rootItem.emptyString in their text binding will receive a “NOTIFY” signal causing the qsTr(”….”) to be reevaluated using the new QTranslator. Because rootItem.emptyString is just “” (an empty string), it will alter the text in your <span class="caps">GUI</span>. This trick is based on the one suggested in the Jira report above and in [http://developer.qt.nokia.com/forums/viewthread/3307/P15 this thread] ''[developer.qt.nokia.com]''
TranslationTest::selectLanguage() is callable from <span class="caps">QML</span> as it uses Q_INVOKABLE. To be able to call Qt class methods from <span class="caps">QML</span> code, the methods must be declared as public slots or conventional methods with the Q_INVOKABLE macro. In both cases, Qt methods are available to the Qt Meta-Object system and the methods are callable from <span class="caps">QML</span>.
==<span class="caps">QML</span> implementation==
A convenient way to switch between languages is by using buttons, so we create a Button.qml component as follows:
Button.qml is then used in the main.qml file below to create 3 buttons that allow us to switch between English, French and Spanish. Each time a button is pressed, it causes the selectLanguage() of the C++ class to be called with the appropriate language string. This will then trigger the text to be reevaluated and hence translated.
==The project file==
In the .pro file we need to list the translation files under the [http://doc.qt.nokia.com/latest/qmake-variable-reference.html#translations <span class="caps">TRANSLATIONS</span>] ''[doc.qt.nokia.com]'' variable.
==lupdate and lrelease==
We can now create the translation files by running [http://doc.qt.nokia.com/latest/linguist-manager.html#lupdate lupdate] ''[doc.qt.nokia.com]'' on the .qml file. lupdate will generate the first set of TS translation source files with all the user-visible text but no translations. In our example, we do:
to create the translation files. These files can now be opened in [http://doc.qt.nokia.com/latest/linguist-manual.html Linguist] ''[doc.qt.nokia.com]'' and translated there. Finally, when the application is finished, you need to run [http://doc.qt.nokia.com/latest/linguist-manager.html#lrelease lrelease] ''[doc.qt.nokia.com]'' on the .ts files to read the .ts files and produce the .qm files used by the application at runtime. For example:
When running the example at this point, it should now switch between English, French and Spanish when clicking the respective buttons.
==Further reading==
For further reading, see the [http://doc.qt.nokia.com/latest/qdeclarativei18n.html <span class="caps">QML</span> internationalization] ''[doc.qt.nokia.com]'' documentation, the [http://doc.qt.nokia.com/latest/declarative-i18n.html <span class="caps">QML</span> internationalization example] ''[doc.qt.nokia.com]'', the [http://doc.qt.nokia.com/latest/internationalization.html Qt internationalization documentation] ''[doc.qt.nokia.com]'' and the [http://developer.qt.nokia.com/wiki/QtInternationalization Qt Internationalization wiki] ''[developer.qt.nokia.com]''.
===Categories:===
* [[:Category:Developing with Qt|Developing_with_Qt]]
** [[:Category:Developing with Qt::General|General]]
* [[:Category:HowTo|HowTo]]
* [[:Category:Tutorial|Tutorial]]

Revision as of 15:45, 14 January 2015

Retrieved from "https://wiki.qt.io/index.php?title=How_to_do_dynamic_translation_in_QML&oldid=995"