Target an international audience through multilingual Apps! keep it simple with Storyboard

Benefits of Multilingual App

Gaining global presence is vital for businesses to be successful. Targeting an international audience through multilingual apps not only creates a long-lasting relationship with the end-users but also improves brand visibility around the globe.

Guideline to create a Translation Database

There is an out-of-the-box Sample delivered with Storyboard that you can run to see how a multilingual application looks. When you test that Demo, you will notice that all you need is CSV Database and a simple Script to achieve the purpose. But instead of reverse-engineering that Demo, let’s create a Multilingual application almost from scratch. To minimize the effort, we can take advantage of the existing scripts to handle the CSV file. Let’s start!

First, import the Translation Sample by clicking:

File>>Import>>Storyboard Development>>Storyboard Sample>>TranslationUsingID

Once the Sample has been successfully imported you can hit Simulate and see how the different languages are being display when clicking the different flag icons.

Let’s close that simulation for now and let’s make our own application multilingual as well. All we need from this application are the scripts that can be found in the projects’ directory Scripts.

We are going to copy those 3 Scripts into our project.

Now we are ready to start. The first step is to create a database that contains all the text that is going to be translated. To create it we need the Storyboard Translation Tool. To display the translations window, go to:

Window>>Show View>>Other>>Storyboard Development>>Text Translation

And hit Open.

On the Text Translation window hit Create Translation Database

Choose Create New Translation Database and use Default format for now. Hit Finish.

Choose the source Language’s name, in this case English, and hit Ok. Now you will see that a couple of things have happened. A couple of CSV files have been created in a directory called translations and all the Controls have been listed on a table in the Text Translation window. The CSV files are our Database, but they are currently empty, and we need to populate them from the mentioned table. To do so, we are going to hit the Extract Text button.

A new window will be displayed with a similar table where we can create a new ID for each Control that we desire to display translated. For this Example, we are going to do it only for the 5 words on the menu layer.

Now, on the Text Translation window, we can see the new ID assigned and the translation CSV has been also populated.

It is time to populate the date base with the targeted language! On the Text Translation window select Create New Language and hit ok.

Name the new language and chose if you wish copy values. Copying the values is optional.

Open the translation CSV file and translate the text.

Almost there. It is time to set up the scripts. Open the callbacks.lua script and be sure that the paths are right and be also aware of that the arguments are case sensitive.

You may have notice that there are two functions on this script. One is for initializations purposes and the other one to perform the translation itself. A good practice would be to do the initializations when starting the application. To do so, add an action on the application level. Go to the Application Model and right-click on the application to add an action.

Choose the Event Start Application, the Action Lua Script to call the function CBInit. Arguments are not needed here.

We are all set, last step is to call the function CBLoadLanguage to perform the translation. In this example we will just add a Press action to the Spanish flag on the top similarly to the previous step. This function does need an argument, be aware again that the values are case sensitive. The variable as well as the argument must match the Script, in this case language and Spanish respectively.

And that’s it! Now we can simulate and hit the Spanish flag to switch to Spanish.