Back

Here you can read briefly how you can add text that is translated to the chosen language in a widget. Moreover you can find two step by step examples for set-top boxes or multiscreen widgets.

Normally a widget contains a language.json file inside its resources folder. This file need to contain all the languages that the widget has to support. If you have created a widget through the widget creator script the language.json file is automatically created for you.

The structure of the language.json file is the following.

#!json
{
    "da-DK": {
        "firstKey": "Value in Danish",
        "secondKey": "Value in Danish",
        "thirdKey": "Value in Danish"
    },
    "en-GB": {
        "firstKey": "Value in English",
        "secondKey": "Value in English",
        "thirdKey": "Value in English"
    }
}

The file has the basic json format where the top level element is always the language-code and next we have an object that contains key-value pairs. Of course in order to set all the translations correctly it is important to have the same amount of pairs and same names in every language respectively but also have unique names in a language object.

1. Login to ITV administration console.

2. Click on System in the left menu.

3. Click on Custom Properties in the dropdown.

4. Click on the gui.language.

5. Click the Edit button on the top left of the window that opened by clicking the gui.language.

6. Then as can be seen in the picture below you can edit the Core setting. You can choose a default language which in our case is Danish and then which languages you want to support by clicking the checkboxes next to them. Moreover, you can click the arrows next to the checkboxes to change the order of the languages. This will change the order that the languages appear in the settings menu.

When you have chosen the languages you want to support, then the chosen can be viewed by the enduser in the settings widgets. For set-top boxes the widget is called "TvSettingsWidget2" and for multiscreen "SettingsResponsiveWidget".

** Set-top box **

In order to add translatable text in your code for set-top boxes you need to call the this.getProperty method where this is a reference for the widget. The following steps will demonstrate how to use the language.json and the this.getProperty function in a widget. The widget will show the phrase "Hello world" in English and in Danish

1. Create a widget using the widget creator script and choose the revo package. Build and deploy your widget. Or you can modify an existing widget.

2. Edit the language file. We are adding to the language.json file the following code which contains just one simple phrase in english and danish with key named "greeting".

#!json

{	
	"en-GB": {
		"greeting": "Hello World"
	},
	"da-DK": {
		"greeting": "Hej Verden"
	}
}

3. Add a div that will contain our phrase. Add in the html file this line of code <div class='textContainer'></div>.

4. Then the JavaScript file should be changed as follows.

#!javascript

fokusEnv.define('languageExample', ['FokusOn', 'REVO'], function defineWidget(FokusOn, REVO) {
  return REVO.Widget.extend({
    initialize: function initialize(initParams) {
      this.parent(initParams);
      this.loadCSS('languageExample.css');
      this.observe( fokusEnv.profileManager, 'onProfileSettingsChanged.gui.language', function observeLanguageChanged() {
        // remember to only update the widget if the widget is Visible
        if (this.isVisible) {
          this.updateText();
        } else {
          // If the widget is not visible you can call expireRender this will trigger that render on the widget is called next time it is shown.
          this.expireRender();
        }
      }.bind(this));
    },
    render: function render() {
      // This will load HTML from skinPath and if its not there
      // it will load the one from resources
      var elem = $(this.initParams.id);
      if (!$defined(elem)) {
        // loading the html template see ButtonRevoDemoWidget.html
        this.loadSkinnableWidgetHTML({
          onComplete: function onComplete(templateElem) {
            this.setupElems(templateElem);
            this.updateText();
          }.bind(this)
        });
      } else {
        this.updateText();
      }
    },
    setupElems: function setupElems() {
      this.textContainer = document.querySelector('.textContainer');
    },
    updateText: function updateText() {
      // add the text with key "greeting" from language.json
      this.textContainer.setText(this.getProperty('greeting'));
    }

  });
});

The setupElems function is setting up all the elements that will be used from the widget. In our case it defines this.textContainer which is a reference for the div we are going to put our text.

The updateText function is the function that puts the text into the div. It uses the this.getProperty function which takes as argument a key name in string format and returns its value from the language.json file.

In the initialize function we are adding an observe function which is triggered when the language of the menu is changed and calls a callback when that happens. This observeLanguageChanged() callback function checks whether the widget is visible or not. If it is visible it calls the updateText() function (this is for the case that the language is not changed from the settings but as an example is changed programatically while the widget is visible) and if it's not visible it calls the expireRender() which will make the render function to be called again the moment that the widget will be active again.

The render function loads the html from the skinPath the first time that is called while the updateText is called every time that render is called.

** Multiscreen **

For creating a translatable text for multiscreen we need to perform the following steps similarly to the previous section.

1. As before we need to create a widget using the widget creator script and choose the React package. Deploy your widget. Or you can modify an existing widget for multiscreen.

2. Next we are adding the code in the language file which is the same as before plus a second key-value pair that makes the name on the menu button for the widget also translatable.

#!json
{	
	"en-GB": {
		"iconTitle": "Greeting in English",
		"greeting":"Hello World!"
	},
	"da-DK": {
		"iconTitle": "Greeting in Danish",
		"greeting":"Hej Verden"
	}
}

The translatable widget for multiscreen is shown below.

3. Finally we need to change the WidgetNameRoot.jsx file which is inside the components folder. The code is added below.

#!javascript
module.exports = function exportModule(React, ReactDOM, ReactComponents, widget) {
  const { Text } = ReactComponents;
  const { profileManager } = fokusEnv;

  class Root extends React.Component {
    eventsToBeRemoved=[]

    constructor(props) {
      super(props);
      this.state = {};
    }

    componentWillMount() {
      // This is call when historyBack is called on the widget. The state returned is what was popped from the history stack.
      // To added something to the history stack call widget.pushHistory(state).
      widget.historyPopped = (state) => {
        // set the state returned from the history stack on the React component.
        this.state = state;
        this.setState(state);
      };
      // Observe if there is a change in the language
      widget.observe(profileManager, 'onProfileSettingsChanged.gui.language', this.onGuiLanguageChanged.bind(this));
    }

    onGuiLanguageChanged(language) {
      this.setState({ guiLanguage: language });
    }

    render() {
      return (<Text>greeting</Text>);
    }
  }

  return Root;
};

The logic is the same as the one for STB. In the componentWillMount method we are calling the observe function which is triggered when the language is changed.

If that happens, the onGuiLanguageChanged function is called which is responsible for changing the language on the widget.

The main difference is that instead of using the widget.getProperty, here we are using the <Text></Text> React component which similarly returns the text in the chosen language. A argument in the Text component we write the name of the key not in a string form (greeting not "greeting").

Back to Top