Chinese Notes: Working with Chinese Text in JavaScript

Google Gadgets are mini-applications that can be embedded in web pages. They are a feature of iGoogle, Google's personalized homepage, but actually can be hosted anywhere. The consist of an XML document containing HTML content, including JavaScript. Google Gadgets open up a number of possibilities for developers, especially those wanting to provide generic language tools that users can save as mini applications on thier iGoogle start page. See [GOO1] for full details.

There is a Google Gagdet for the chinesenotes.com Chinese-English dictionary. To put it on your iGoogle home page click the button below.

Getting Started

To get started here is an example of a very simple Gadget that displays the text 你好.

<?xml version="1.0" encoding="UTF-8"?>
<Module>

<ModulePrefs title="你好" author="chinesenotes.com"/>
<Content type="html"><![CDATA[

你好

]]></Content>

</Module>

Creating Your Own Gadgets

To create your own gadgets add the Google Gadget Editor to your Google page. You can add HTML and JavaScript to the CDATA section within the editor. It is nice to stay within the gadget as far as possible but, eventually, you may want to link out back to your web site. You can test the gadget in the Google Gadget Editor using the preview tab. When it looks ok in preview mode you can add it to your Google home page with the My Gadgets gadget. The URL is found in the upper right corner of the Editor.

The Google Gadget Editor allows you to quickly develop gadgets without having to worry about hosting and related problems. It also kicks off the publishing wizard from the file menu, which will publish it in the Google Gadget directory. There is also a wizard for generating a button to make it easy for your users to add your gadget to their personalized iGoogle page.

Working with Remote Content

Developers of language tools might want to fetch remote content from a location, such as a dictionary. Google Gadgets can fetch content from a remote site using the Google JavaScript API's. There are three API's for this purpose: _IG_FetchContent, _IG_FetchXmlContent(), and _IG_FetchFeedAsJSON(). Here is an example of fetching Chinese data encoded in UTF-8 to display in a Gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>

<ModulePrefs title="你好" author="chinesenotes.com"/>
<Content type="html"><![CDATA[

_IG_FetchContent('http://chinesenotes.com/chinese_js/js_examples/nihao_utf8.txt',

function(responseText) {

alert(responseText);

}

);

</script>

]]></Content>

</Module>

You can load it yourself by adding it to iGoogle from the URL http://chinesenotes.com/chinese_js/js_examples/nihao_remote.xml. The gadget retrieves the text file nihao_utf8.txt and displays the contents in an alert dialog box. The _IG_FetchContent function is asynchronous and when it brings the data back it calls the anonymous callback function supplied that displays the data in the alert dialog. This is shown in the following screen shot.

Internationalization

Google Gadgets have a framework for internationalization. Any user visible text should be externalized into a message bundle. Google Gadgets API support UTF-8 encoding only. Here is an example of message bundles for English for the string with id hello_china.

File: ALL_ALL.xml

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>

<msg name="hello_china"">Hello China!</msg>

</messagebundle>

File: zh_cn_ALL.xml

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>

</messagebundle>

File: zh_tw_ALL.xml

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>

</messagebundle>

By convention message bundles are named as <language>_<country>.xml where ALL is used to represent a default. Here is a simple example that uses these message bundles. The Locale elements within the Module element specify the message bundles and the __MSG_hello_china__ specifies the string id to use from the bundle.

<?xml version="1.0" encoding="UTF-8"?>
<Module>

</Module>

To try this out load the Gadget at URL http://chinesenotes.com/chinese_js/js_examples/hello_china.xml. Here is a screen shot with the locale set to Traditional Chinese (zh_tw).