TechHui

Hawaiʻi's Technology Community

I'm currently working on a GWT project for a large international company, so I've been spending some time before I really get too far into it to learn how to make this less painful to translate into multiple languages. I've found that GWT makes this a pretty simple task as long as you start with a little planning. Here I'm going to demonstrate the simplest possible example of localization, but I hope that it will be clear enough to explain how simple this is to accomplish and to maybe spare the reader some of the research that went into my learning how to do this. My demo environment is
Eclipse Galileo and the latest
GWT Plugin from Google. This also assumes that you know how to create a basic GWT project using the Google GWT Plugin. Also, because I've chosen a non-latin based language for this demo, you'll need to change the encoding for .property files in Eclipse. You can do this by clicking "Window-->Preferences" and then filter on "content types" shown here and make this adjustment:

Now for the project. I used the standard options by launching the "Create a Web Application Project" wizard leaving the defaults set and just specifying the name and package. I used i18ndemo as the project name and com.slmcmahon.demos.i18ndemo as the base package. This is what my project looks like:

The quickest and easiest way that I know of to configure an application for localization is by using the i18nCreator tool that comes with the GWT SDK. If you are using the plugin, you will find it under the plugins folder in your eclipse installation folder. On my system, that is plugins\com.google.gwt.eclipse.sdkbundle.win32_1.7.0.v200907291526\gwt-windows-1.7.0. I have my system path configured to include this path in order to make it easier to work with. I changed my working directory to the location of my project and ran i18nCreator as shown below. If all goes well then you should see it create 3 files. The syntax is: i18nCreator -eclipse i18ndemo com.slmcmahon.demos.i18ndemo.client.i18ndemoConstants

After you do this, you'll need to refresh your project in Eclipse. Just select the project and hit F5. You'll see that you now have a .properties file included in your project as well as two more utility files. Any time you change the properties file, you will run the i18ndemoConstants-i18n.cmd file. We'll see the effects of that in a later step.

The contents of the new .properties file file will be simply: ClassName: i18ndemoConstants In this demo, I want to make the "Send" button display in multiple languages, so lets add a new entry to the properties file so that it looks like this: ClassName: i18ndemoConstants sendButtonText: Send After you've done that, save the file and then copy the file and paste it back into the same package as the original file and change the contents of the dialog to look like this:

Save that and then open the newly created file and make it look like this: ClassName: i18ndemoConstants sendButtonText: Отправлять I used Google Translate to get that value so it may not be correct, but it does a good job of showing a different character set. It is *supposed* to be Russian for "Send" Now we can generate the constants file by double clicking the "i18ndemoConstants-i18n.cmd file near the bottom of the project structure. Depending on your platform, you may see a console window pop up briefly and go away. Afterward, click your project root and hit F5 again to include the newly created files. You should now see your new i18ndemoConstants.java file in the project:

In order to make use of the newly created constants file, you'll need to edit the main entry-point for your application. In this project, that is I18ndemo.java. Open that file and make the following edits:

We have one final edit to make before we are done. You'll need to open the I18ndemo.gwt.xml file in the top package of your project and add an entry to it so that GWT will know about this translation. It should look similar to this:

Now you can run your project and you should see pretty much what you might expect for English regional settings:

But if you were using Russian regional settings, the button would be displayed in Russian. You can test this by appending "?locale=ru as shown below:

Hopefully this is enough info to demonstrate how easy it is to make your project very easy to translate. Ideally the entire page would be translated, but I leave that to you! Also, if you are more familiar with this process and you see that I've done something in an inefficient or otherwise incorrect manner then please let me know!

Views: 4288

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Konstantin A Lukin on September 17, 2009 at 12:46am
Cool article, thanks for posting! Localization is surely a very useful feature when it comes to web development, will keep a link to this one for future reference :)

Sponsors

web design, web development, localization

© 2019   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service