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.
This page exists due to the efforts of the following people:
 | Timur
|
Tips and tricks series
- Tips and tricks #1: How to set output value
- Tips and tricks #2: How to make calculator translatable into different languages
- 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
- Tips and tricks #9: Big numbers
- Tips and tricks #10: Files, long calculation mode
- Tips and tricks #11: Dynamic table columns
- Tips and tricks #12: Long (infinite) calculations
- Tips and tricks #13: Bitmaps and Pixel manipulation
- Tips and tricks #14: How to use a masked input
This article may rely on knowledge you should get from previous articles, so you may want to check them 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:
| Field name | Value | Meaning |
|---|---|---|
| Name | Resources | In the case of resources, the name is not displayed on the form, so you can enter just anything |
| Variable | resources | Name of Javascript variable, which is used to hold resource values |
| Description | Optional. If set, it is used to provide a help message when the mouse is over the field label. Leave it blank | |
| Type | Resources | The type of the input (in broad sense). The 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 the 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 an object with named fields. To use it in the calculator, replace the current code with the following:
message.SetValue(resources.hello + username + "!");Click on the 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 the "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:
message.SetValue(resources.hello.replace('%username%', username));This way message is independent of the word's order. Click on the Preview button. Inspect calculator in the Preview mode - again, it should behave just like before. Click on the Publish button to republish it. Now it is localizable and is ready for translation.
Translating calculator
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 the translation editor. It lists all translatable resources for the calculator, including inputs and outputs, and lets you translate them. Fill it like this:
| Field name | Value | Meaning |
|---|---|---|
| Nombre | ¡Hola Mundo! Ahora con soporte de idiomas | Name of the calculator in Spanish. I hope Google translator gets it right) |
| Entradas | Inputs part | |
| Nombre | Recursos | Name for resources input. Note that original English value listed directly under control |
| Valor predeterminado | 0 | If the 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 |
| Salidas | Outputs part | |
| 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.
Comments