Localizing STEW

This example illustrates how to localize a widget into several languages. To be able to localize a widget, you must place all text that is visible on the display into separate JavaScript files.

In this example, STEW is localized into Simplified Chinese. For more information about the localization process, see Supporting multiple languages.

To localize STEW

Create STEW, as described in the section Introducing STEW.
Create a string table in the localizedTextStrings.js file.
Translate the display text in the localizedTextStrings.js file into Chinese.
Create a folder called zh.lproj in the widget root folder.
Store the translated localizedTextStrings.js file in the zh.lproj folder.

The users who select Chinese as the language on their devices automatically see all STEW display text in Chinese.

Creating the string table

The localizedTextStrings.js file contains a StringTable object that has two properties: HTML and Code.

var StringTable = {
+	
+	HTML: {
+		...
+	},
+
+	Code: {
+		...
+	}
+}
+

The HTML property is a placeholder array of all strings in the main.html file that are visible to users. Each line contains an ID and a text string.

For example, the following code is difficult to localize, because the text is located within the HTML:

<th >Login</th>

To make the code easy to localize, use an ID to refer to the string in the HTML:

 <th id="loginLabel"></th>

Then add the ID to the HTML section of the StringTable object:

HTML: {
+	loginLabel:				"Login"
+}
+

All strings are stored in the StringTable object and mapped to DOM element IDs as the key and text as values. Add a loadStringTable function call to the init function to load the strings to the HTML:

function loadStringTable() {
+	for ( var name in StringTable.HTML ) {
+		var element = document.getElementById( name );
+		element.innerHTML = StringTable.HTML[name];
+	}
+}
+

The function iterates through all the properties it finds in StringTable.HTML, searches for the name from the DOM, and sets the value to innerHTML. The same procedure applies to all strings in the code. The sample below illustrates how the code changes:

statusTd.innerHTML = "<span class='latest'>Latest: </span>" + ...

statusTd.innerHTML = "<span class='latest'>" + StringTable.Code.updateScreenLatest + ": </span>" + ...

Similarly, all display text in the JavaScript files is added to the Code property of the StringTable object.