In my previous post, “How to Launch Your App in the International Market,” I showed you a few best practices for localizing your app and launching it in international markets. In this post, I’ll go over how to localize and translate UI strings in your app.
Step 1: Developing Your App
When you create a new BlackBerry project using Cascades in the Momentics IDE, it’s already configured to support multiple languages. As seen in the image below, the translations folder that contains .qm and .ts files is created, and the path of the .qm file is added to the project’s bar-descriptionor.xml file under the Assets tab. A .ts file is an XML file that maps and stores all UI strings in your app for translations and a .qm file is a compiled binary file for translation resources. Once the UI designs are finalized, the .ts files can be sent to professional translators to be localized/translated for your target markets.
If you’re like me, the next thing you may be wondering is how to update the UI strings for different locales. Typically, you need to load a translator to update UI strings and formats according to the new locale. The good news is that Cascades also takes care of this process by loading the translator in the ApplicationUI constructor on start-up, instantiating QTranslator and LocalHandler and calling onSystemLanguageChanged() method. Your app will load the correct translation resources according to the locale settings and update when the locale-related system setting is changed at runtime. This means users don’t need to restart your app to see the localized UI strings and formats according to the new locale.
See my previous post on how a translator gets loaded into your project.
Step 2: Generate Translation Resources for Target Markets
So far, there is nothing extra you are required to do for your app to support multiple languages and regions, as Cascades provides you with a good wireframe to localize your app. The real fun of developing the international savvy app begins here.
Follow the Best Localization Coding Practices
As you design and implement UI elements, identify all strings and messages to be translated and wrap them with the qsTr()/qsTraslate() function in QML or use translate()/tr() functions in C++ following the best localization coding practices posted previously. The strings wrapped with these functions indicate they are to be translated according to locale and are extracted to .ts file once the project is compiled. Needless to say, the strings that are not wrapped with these functions won’t be translated.
Once you have somewhat finalized User Interfaces and UI strings for a default language, the next step is to generate translation resources (.qm and .ts files) for each target language. It is quite simple to add target languages on the Localization tab under the bar-descriptor.xml and build the project. When the build process is completed, you will see that .qm and .ts files are created in the translations folder for each target language you added for localization (see the screen below from the“hellocascades” sample app). Each .ts file contains all UI strings to be translated in xml file format including the target language and location of the filename containing the strings. You can also generate the .ts file by running a command line tool lupdate.
Not translated .ts file example for Spanish
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE TS> <TS version="2.0" language="de_ES"> <context> <name>hellocascades</name> <message> <location filename="../assets/hellocascades.qml" line="52"/> <source>Hello World</source> <translation type="unfinished"></translation> </message> </context> </TS>
Now you are all set for UI translations! You can manually insert the translated strings by editing the line “<translation type=”unfinished”></translation>” to “<translation>Hola Mundo</translation>”. Assuming most developers are not professional translators, you can get professional translation agencies to translate the UI strings; most professional translators understand the .ts file. You can just send them the automatically generated .ts files and get the translated .ts files back. Qt supports Qt Linguist tool for string translations for .ts files and some translation agencies might use Qt Linguist tool among other translation tools. During the translation and testing phase, it’s always good to keep the communication open with translators, providing them with as much information as possible to avoid ambiguity.
When translation process is complete, you can put the translated .ts files back to the project in the translations folder and build the project to regenerate translation resources, including .qm files for the app. The localized .ts file looks like below:
Translated .ts file example for Spanish
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE TS> <TS version="2.0" language="de_ES"> <context> <name>hellocascades</name> <message> <location filename="../assets/hellocascades.qml" line="52"/> <source>Hello World</source> <translation>Hola Mundo</translation> </message> </context> </TS>
You can check out our “Hello Cascades” sample app to learn more about targeting multiple languages in BlackBerry 10.
Step 3: Test the Localization and Launch Your App!
Your app is almost ready for the world! Next step is testing your app against all target languages to make sure the localized UI strings are displayed correctly without truncation. Once testing is done, your hard work is paid off; your awesome app is now internationally awesome!
Any questions about launching your app internationally? Let us know in the comments below.
