# 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

1. Create STEW, as described in the section Introducing STEW.

2. Create a string table in the `localizedTextStrings.js` file.

3. Translate the display text in the `localizedTextStrings.js` file into Chinese.

4. Create a folder called `zh.lproj` in the widget root folder.

5. 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.