Working with Chinese Text in JavaScript

Previous   Contents   Next
References

Google Gadgets

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.

Add to Google

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>

To see how this works add the gadget to iGoogle by following these steps:

  1. From www.google.com/ig click on the add stuff link on the right hand side of the page.
  2. Click on the Add feed or gadget link on the left hand side.
  3. Enter the URL http://chinesenotes.com/chinese_js/js_examples/nihao.xml.

A screen shot is shown below.

Chinese Hello World Google Gadget
Chinese Hello World Google Gadget

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[
<div id="loading">首等...</div>
<script type="text/javascript">
_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.

Chinese Remote Hello World Google Gadget
Chinese Remote Hello World Google Gadget

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>

Here is an example of the message bundle for Simplified Chinese.


File: zh_cn_ALL.xml

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>
<msg name="hello_china"">你好中国!</msg>
</messagebundle>

Here is the message bundle for Traditional Chinese.


File: zh_tw_ALL.xml

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>
<msg name="hello_china"">你好中國!</msg>
</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>
<ModulePrefs title="__MSG_hello_china__" author="chinesenotes.com">
<Locale messages="http://chinesenotes.com/chinese_js/js_examples/ALL_ALL.xml"/>
<Locale lang="zh-cn" messages="http://chinesenotes.com/chinese_js/js_examples/zh_cn_ALL.xml"/>
<Locale lang="zh-tw" messages="http://chinesenotes.com/chinese_js/js_examples/zh_tw_ALL.xml"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
__MSG_hello_china__
]]>
</Content>
</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).

Hello China Google Gadget I18N Example
Hello China Google Gadget I18N Example
Previous   Contents   Next
References

Copyright Alex Amies 2008. Please send comments to alex@chinesenotes.com.