Getting all i18n messages in Javascript

Intro

When building a Single Page Application it’s interesting to have available in JavaScript all your i18n messages.

So, where we start?

Plugins

Grails have the concept of Plugins. If you’re learning how the framework work it’s really interesting to spend some time understanding this topic. The framework itself has a set o plugins that’s already available for you.

If you’re using GGTS / STS, you can use ctrl + shift + T and type *GrailsPlugin*. Sometimes when I want to know how some aspect of Grails works, I try to find the plugin responsible for that.

Finding the Plugin

In this specific case, we have I18NGrailsPlugin. If you look at the source you can see the declaration of the messageSource bean.

So we can extend PluginAwareResourceBundleMessageSource and declare this as our messageSource and declare the Spring Bean:

But doing that we have a problem: all attributes that I18NGrailsPlugin had setup aren’t configured in our class! Without basenames properly set our class don’t know the existence of the properties files.

There are two options to solve our issue:

#1 – Duplicate code

We can duplicate the I18NGrailsPlugin code, setting up the properties of the ExposedKeysMessageSource class. But this is bad, what if the configuration code changes? We need to always check Grails updates to be up-to-date.

#2 – Hook the messageSource configuration

What if I tell you that we can use the configuration made by the i18n plugin, but using our customized class? Certainly better.

And already exists an example, the Tomcat JDBC Pool Plugin. The aim of this plugin is to change the pool implementation used by Grails to the Tomcat JDBC (ships with Tomcat 7), and all this is made in the doWithSpring closure. So, adapting to us:

Note that we don’t need to re-declare messageSource anymore, since we already changed the original Spring Bean configuration.

What’s next?

So now we know all possible i18n keys, that’s great, but how can we transform this in JavaScript? A common pattern of transformation in server data to the client side is the JSON. If you already saw Grails converters you remember that it’s already there! This conversion to JSON and XML is also made by a core Grails plugin, the ConvertersGrailsPlugin. To organize our code, we can do that inside a service:

But note also that I used a new method called getAllProperties. Here’s the updated code of our MessageSource:

Now, all we need is to parse this String in a JavaScript variable. The script can be attached through TagLib, or <r:script> tag or event a controller that returns the content type text/javascript. I will go with the last one to show you what we can do with Grails controllers:

And with that we are ready to use our internationalization in JavaScript :-)

 

About these ads

Java, Groovy & Grails developer https://docs.google.com/document/d/1AGesDYQaIEASyEasEELVeQbgZzQM1BBgkpkMNQxE2-A

Tagged with: , ,
Posted in Grails, Internacionalization
4 comments on “Getting all i18n messages in Javascript
  1. haisi says:

    What is “MyGrailsPlugin” and where is it stored in the project?

    • sergiomichels says:

      MyGrailsPlugin is the plugin descriptor to my fictional plugin. Check “Creating And Installing Plugins“:

      I used this example to show how you can declare a resource inside one plugin, but you can also declare it in your application, though conf/resources.groovy file.

      • haisi says:

        Thanks for your quick reply. So I put the “def doWithSpring…” into “conf/spring/resources.groovy”, but where exactly? I just put it into the “beans” closure. Now I get an ‘MissingMethodException: No signature of …. PluginAwareResourceBUndleMessageSource.getAllProperties() ….’ and Intellij compains that the “Access to PropertyHolder exceeds its access rights” in I18NService

      • sergiomichels says:

        resources.groovy declare beans in another way: http://grails.org/doc/latest/guide/spring.html#springdslAdditional. The closure mentioned (doWithSpring) is needed only in plugins.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: