Tips and tricks #2: How to make calculator translatable into different languages
This article describes the process of adding translation support to the calculator, so it can be translated into different languages.
Este contenido se encuentra disponible en EnglishAquí puede editar una traducción de English a Español
Tips and tricks series
- Tips and tricks #1: How to set output value
- Tips and tricks #3: How to make calculator with custom errors
- Tips and tricks #4: How to make calculator with table output
- Tips and tricks #5: How to show/hide input and output controls in a calculator
- Tips and tricks #6: How to make calculator with virtual keyboard
- Tips and tricks #7: How to make calculator with SVG image map
- Tips and tricks #8: How to reuse existing calculator
This article continues development of calculator started in Tips and tricks #1: How to set output value, so you may want to check it first.
Hello, world! Now with languages support
Let's look again at the code of our "Hello, world" calculator.
message.SetValue("Hello, " + username + "!");
You can notice that string "Hello, " is hardcoded, which will pose the problem when this calculator will be translated into different languages (at the moment, there are Spanish and Russian versions of the site). In order to support translation, all hardcoded strings should be moved into translatable resources, making calculator localizable.
Go to calculator editor, then hover Input button and click on Add input parameter menu item. This will bring up the input editor dialog. Fill it like this:
|Name||Resources||In case of resources, name is not displayed on the form, so you can enter just anything|
|Description||Optional. If set, it is used to provide help message when mouse is over the field label. Leave it blank|
|Type||Resources||The type of the input (in broad sense). Type also determines the lower part of the input editor form. Here set it to Resources|
When you change the input type to resources, the lower part of dialog will change to list items editor. Fill list items editor Value field with hello, Display name field with Hello, and press Add button. Note that this item is now added to the list below.
Leave all other fields with their default values and press OK.
Note how Calculate function signature was updated. Now it has resources variable, and by clicking on it, you can open input editor dialog again, if you need to. resources variable is just object with named fields. To use it in calculator, replace current code with the following:
message.SetValue(resources.hello + username + "!");
Click on Preview button. Inspect calculator in the Preview mode - it should behave just like before.
Is it good? Not quite. What if in the future site will have another language, which is read from right to left? Current version assumes that username is always on the right from "hello", which could be wrong. Let's quickly enhance it.
Open input editor for resources by clicking resources in Calculate function signature above the code. Click on "Hello, " item and edit it to be "Hello, %username%!", then press Save and Ok to close the editor.
Replace code once again with the following:
This way message is independent from word's order. Click on Preview button. Inspect calculator in the Preview mode - again, it should behave just like before. Click on Publish button to republish it. Now it is localizable and is ready for translation.
Let's translate the calculator into Spanish. Go to calculator editor and change language of the site to Spanish. You will receive the following message with the link: Este contenido se encuentra disponible en English. Aquí puede editar una traducción de English a Español
Clicking the link will bring you to translation editor. It lists all translatable resources for the calculator, including inputs and outputs and let you translate them. Fill it like this:
|Nombre||¡Hola Mundo! Ahora con soporte de idiomas||Name of the calculator in Spanish. I hope Google translator gets it right)|
|Nombre||Recursos||Name for resources input. Note that original English value listed directly under control|
|Valor predeterminado||0||If original English value is not empty, you have to fill it with something|
|Visualizar Nombre hello||Hola, %username%!||We should keep our identifier which is used for username replacement|
|Nombre||Introduzca su nombre||Other inputs should be translated as well|
|Valor predeterminado||Juan||Possibly with their default values|
|Nombre||Mensaje||Outputs, of course, also should be translated|
Leave all other fields blank and press Guardar. If all non-empty resources were translated, you will see Publicar button. Press it to publish your calculator in Spanish.
I embed it in this article below, but note that until this article itself is translated into Spanish, calculator will be presented in English.
If you want to see it in Spanish now, go to calculator page Hello, world! Now with languages support, and then change site language to Spanish.