Localizing The HMI

By default the code generator for the web view (HMI) is built for a US (English) locale. In this locale, number decimal separator is a “.” and thousands separator is a “,”. However, you may want your HMI to be viewed in a country in which the normal decimal separator is a “,” and the thousands separator is not the same as that used in the United States. So you can set the “locale” for which your HMI before you build your deployment.

Note:these localizations will not be apparent unless the system running the web browser is set to the designated language.

There are two files in your project (once you save your project in MIStudio) which need to be edited for your locale. These are copied into the lib/templates directory of your project.

Edit GWTTemplate.html

The first file is the GWTTemplate.html. Open this file in a pure text editor such as Notepad++ or WordPad on Windows, or Pluma or Jedit on Linux.

On (or about) line 6 you will see:

  <meta name='gwt:property' content='locale=en_UK'>

The locale on this line is set to UK (English), “en_UK”. The first set of characters, “en” indicates the language, and the second set, “UK” is the country. You will need to find the language and country for your HMI setting.

Language codes can be found here: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

Country codes can be found here: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes

Some simple examples: *fr_FR (French, France) *de_DE (German, Germany) *en_US (English, US)

As an example, to localize to French (France), change line 6 of the GWTTemplate.html to:

  <meta name='gwt:property' content='locale=fr_FR'>

Save this file after making changes and continue to the next step.

Edit GWTTemplate.gwt.xml

The second file to change is the GWTTemplate.gwt.xml. On (or about) line 27 are these lines, commented out with the <!– and –> markers:

<!-- add locale specific compilation     
<extend-property name="locale" values="fr_FR"/>  
 -->  

The line “ <extend-property name=“locale” values=“fr_FR”/> ” will instruct the gwt compiler to specifically add French (France) locale instructions to the graphics build. Remove the comments around this extend-property directive and complete the comment of the first line so it reads:

<!-- add locale specific compilation   -->  
<extend-property name="locale" values="fr_FR"/>  

Save this file. It will be used every time the project is built. You may add additional <extend-property name=“locale” ..> directives for different locales, but each of these directives will increase the build time and size of the resulting graphics code file.

Load this project into MIStudio and deploy to MIX. Browse to the user interface web page and you should see the localized result if your system is set for this country/language.

Always Building for a Locale

If you will always be building your projects for a specific locale, you can change the master GWTTemplate.gwt.xml and GWTTemplate.html files so that these are used for every project. These master files are located in the MIStudio/ant directory. These files, with any changes you make, will be copied into the lib/templates directory of all new projects.