UI localization and translation

Created by Webnodes

With release 4.8 of Webnodes, UI localization was (re)introduced. Webnodes now ships with a system for handling translations of the UI.

Background

The Webnodes UI has been English-only for many years now. The first version used resource files, and a Norwegian version existed for some time, but we never grew fond of the resource system, so we dropped support years ago. We have created our own resource system that we think is eaiser to use and more flexible than the built-in resource system.

Overview

All the strings in Webnodes are stored in separate text files. There is one(*) text file per supported language. The textfiles contain two tab separated columns: the translation key, and the translated value. The text files are stored in the WAF/Resources/UI folder. 

* If you override or create your own custom translation, there can be more than one text file per language. The custom translation files are stored in the WAF/Resources/UI/Custom folder. 

The filename before the .txt ending specifies the LCID of the language the file contains. The english language file is 1033.txt. The custom translation files use the same naming convention as the standard translation files. 

At startup, Webnodes reads all the files in WAF/Resources/UI with a valid name, and loads the keys and values into a dictionary. There is one dictionary per language. After loading the standard files, it loads the files in WAF/Resources/UI/Custom. If the files in the custom folder contains the same keys as the standard files, the custom files will overwrite the values in the dictionaries. This allows you to customize the out-of-the-box translations. 

As of April 2014, Webnodes ships with UI translations for Norwegian and English.

Setting the UI language for a user

All system users in Webnodes now have a "Preferred UI Language" property. The property lists all the languages that has a translation.

 preferred_UI_lang

This setting can be used in templates as well as in edit. Note that users that login to edit can override this setting by choosing an UI language on login. The language chosen when logging in to edit will update the Preferred UI Language property of the user. 

Usage in templates

While the UI translation system in most cases will be invisible, the translation system can easily be used for the website templates in sites with multiple languages. 

The first step is to add the custom language files you intend to use for your project to the WAF/Resources/UI/Custom folder. Remember to use the naming convention described above. Then add translation keys and the values in the respective languages.

If you are using Webforms, you have two methods to use the language system: 

  1. API Access
    You can get the translated text for a given key using this API method: Local.Text(string key).
  2. Custom Expression Builder
    Webnodes ships with a custom resource expression builder. This allows you to get a a language string in the ASPX markup: <waf:MainButton runat="server" ID="btnBlogSave" OnClick="btnBlogSave_Click" Confirm="false" Text="<%$WAF:Web.WAF.Edit.Blog.Save%>"></waf:MainButton>. See the bold segment. The expression builder is registered in web.config, with the WAF prefix.

 

Adding additional language translations

If you want to translate the edit interface to another language, create a new file in the WAF/Resources/UI/Custom folder using the naming convention described above. Copy the contents from the standard language file that you want to use as a starting point for the translation, to the file you created. Translate the various strings.