Sunday, September 4, 2011

Support for translation in CouchApps

I released two jQuery plugins I made for a CouchApp: jquery.tr ans jquery.couch.tr. These plugins allow to easily provide translation for your CouchApps. I was disappointed that until now CouchApps could only display text in one language (mostly English).

jquery.tr is a generic plugin, that is its use is not restricted to CouchApp and you may use it with other applications (although other more convenient plugins exist in that case). jquery.couch.tr is just a binding with CouchApp API. I have split the project in two plugins to keep a generic part.

A fixed dictionary is used, so you can be sure of the relevance of your translation. By default, dictionaries shall be files inside the evently/widget directory, with language as name. The files contain either a JSON associative map, or a function which returns such a structure. With that function, you can choose different sentences according to parameters, e.g. to make them agree with numbers.

This is not a full support for internationalization though, it can't change interface or css direction attribute. It's still your job to handle these application-specific cases.

Integrating those plugins with your existing CouchApps is straightforward. Add <script> references to the plugin files (you may use jquery.cookie as well, if you want to keep the last language used). Then, call $.tr.language(language); to set the language which is use for further translations. Therefore, you may want to reload displayed widgets (for instance, $('#account').trigger('_init'); will reload the account widget)

To illustrate the abilities of those plugins, I changed the default account and profile widgets (they should be included in any CouchApp) and translated the sentences into French. I can't say more than: it works!

Note that I use jQote2 as template engine rather than Mustache, which is so far not in the official repository, you should pull changes from this fork to import the feature. jQote2 allows to translate sentences directly in the template (view), whereas Mustache forces to translate them in the data function (controller), and I found the first case better.

Follow the development on GitHub.

No comments:

Post a Comment