Translations

One of WinnetouJs' most powerful tools is translate. With this method it is possible to have all the phrases, titles, texts and labels in an json file separate from the code and with just one method we can change which language file the application will feed on. For that we have two methods, the updateTranslations and the changeLang.

To begin you must define the defaultLang in win.config.json. The defaultLang name is the name of the default json file for your application's text. Remember that the WinnetouJs translations only work in applications that have a backend.

All translations files must be inside folder ./translations at Public folder of project.

Settings

Set the default language file in win.config.json: defaultLang: "en-us",. In folder ./translations you need to have a file called en-us.json.

Creating a json translation file

Inside en-us.json, create keys and values that will be your keys.

        
{
    "welcome": "Welcome to new Winnetou Translations.",
    "title": "This is your title"
}
       
      

Create a new file for each translation.

        
{
    "welcome": "Bienvenido a las nuevas Traducciones de WinnetouJs.",
    "title": "Este es tu titulo"
}
       
      

          
{
    "welcome": "欢迎来到新的 Winnetou 翻译。",
    "title": "这是你的标题"
}
         
        

When you run node wbr --bundleRelease, the translations will be transpiled to an js file _strings.js which allow you to import strings in your native code.

How to use

You need to import strings to your code, call updateTranslations and then start your app. See code below.

                
import { Winnetou } from "winnetoujs";
import _strings from "./_strings.js";
import {simpleDiv} from './constructos/components.html'

Winnetou.updateTranslations(_strings).then(() => startMyApp());

async function startMyApp(){
    simpleDiv({
        text: _strings.title
    }).create('#app')
}
               
              

Switching languages

In order to switch languages, call changeLang method.

                  
...

const changeToChinese = () =>{
    Winnetou.changeLang('chinese')
}
                 
                

The param of changeLang needs to be the name of translation file without .json.