Translate "Hello, world!" automatically via the Web browser

Sometimes, it may seem like coding in Java makes simple tasks unnecessarily difficult. However, there are times when the extra sophistication of the Java language comes in handy. For example, writing a hello world application in Java seems silly when the same application will just write the code for hello world in HTML. However, Java makes the task of translating your hello world Web application into various languages much easier. In this lesson, Cameron McKenzie will demonstrate how to build a Web application that automatically translates itself for various audiences based on the default language of the end user's Web browser. For your convenience, a written transcription of the video follows.

Hi, I’m Cameron McKenzie. I’m the author of “Hibernate Made Easy” “JSF Made Easy” and a few other SCJ Java certification guides. What I want to do right now is talk about this JSF application that I’ve written. I made a little JSF app, it spits out “hello world,” and has a little HTML link on the Web pages. If you view the page source, just a little HTML that gets sent back to the client, a little bit of a link in there. That’s just the HTML. And the actual Java code that was used to create this monstrosity, what does that look like? It just looks like this. I’ve got a couple of JSF taglibs in there for the core and HTML files. I’ve got an <f:view> tag. I’ve got an outputLink and an outputText tag.

To be totally honest with you, when you look at it you think, “For just a little bit of HTML this is a lot of work.” It kind of makes you wonder if all of this worth it just to spit out some HTML?  You might be right. It might not be worth it. One of the things about JSF is sometimes it makes easy things hard. But the nice thing about JSF is it makes very hard things a lot easier. One of the things we can do with our applications in JSF is take all of these places where we’ve got English text in there and really easily internationalize it. Of course, English is great if you’ve got a Canadian audience in Ontario but you want French of French Canadians. And if any Americans are going to be viewing it you’re going to want to make sure that it’s also in Spanish. You can’t just have applications solely in English.

How do you internationalize your applications? I’ve kind of gone one step ahead here. One of the things I’ve done is I’ve taken a look at all of the places in my application where there is English. There is English in the title. There is a “hello world” blurb there. There’s a link there and there is also a little blurb describing the link. For all of those places I have created a property file that contains key value pairs. So there is a key there, hello world title, hw.helloworld, hw.link, hw.link description and all these keys mapped to a translated file. 

This is I18n.properties file. That is the base translation. There is also an _en file with English translation, and _es with Spanish translations. Very poor Spanish translations, but you see all these keys that give it different values. Even the link, notice here I’m using Google as the link instead of SCJA.com and that’s because Google actually has French and Spanish and English versions of their website. I’ve put all of these different property files in the classes folder making sure that at runtime these particular files will be able to be resolved by the JVM.

That’s the first thing you do, if you want to internationalize your applications. What you do is you simply take a look at all of the places where you have English and create a sort of a key for each of those locations. Then translate it in internationalized resource bundle files. That’s what we call each of these property files, resource bundle files. What do we do from there? One of the things we do is we actually go to our JSP page and take all of the places where we have English and say to the JSF framework "Hey, go look at a resource bundle and find the key named—" the name of the key name here is hw.link. "And replace the key value in this JSF tag with the actual value from the language appropriate resource bundle." So, put the French link in here for French people. Put the English link in here for English people and put the Spanish link in here for Spanish people. In each text file there is the key file here, so hw.link and it maps to the appropriate website. That would be for English.

For my little JSP file that’s in the _easyJSF application root folder, I’ve actually gone through each of these little elements and I’ve used this thing called “expression language” to replace each of the places that I have English text with a reference to the resource bundle. There is the title. There is the “hello world” blurb, there is the link and there are the link descriptions. The values are no longer hard coded with actual English values. Instead we’re using this special reference to the resource bundle to point out the values associated with these keys.

In order for JSF to be able to recognize these various resource bundles and know about the various languages that you want to support, you actually have to make a little change to the facesconfig.xml file and you need to add this application entry. You can see the application entry starts here. It ends here and it says “We’re going to support these three locales—English, French and Spanish” and inside the application you’ll see a reference to a bundle, which is going to be English, French, and Spanish resources bundles. All of those bundles are going to be in files named I18n and _thelanguagecode.properties so when we look at the file system we see resource bundles named "I18_en.properties", "I18_es.properties", "I18_fr.properties". That’s all because we specified that the base name of the resource bundles is "I18n".

I need to take that little application entry, go to the facesconfig.xml file and add it in. That’s what the facesconfig.xml file looks like before the addition. That’s what it looks like after the application entry being added in. I’ll click “file” and “save” and save that. Now, I should have the updated application with my hello world file using resource bundles, internationalized translated properties files in the classes directory (now on your system you may actually have it in your source directory but when you build the application the build will place them in the classes directory), and also the facesconfig.xml file is specifying which locales it’s going to support and the name of the resource bundle.

With all of that done all I need to do is package up my war file and redeploy to the server. I’m going to quickly shut down my Tomcat server first. Then I’m going to move into my _easyJSF folder. I’m going to use the jar utility to create a war file called easyJSF.war which will include all of the files out of the _easyJSF directory. I will then take that war file that gets created, cut it out of there because it really shouldn’t be in there. Go to my webapps directory. I’m just going to delete the easyJSF.war and the _easyJSF folder that was created the last time I deployed. And of course, it’s not being too friendly about doing that. I did think that I shut down the server but anyways, what will I do here. I’ll paste that in anyways. There it is, easyJSF pasted in.

I’m going to make sure that my server is shutdown. I’d like to delete that just to make sure that it goes away. But we’ll see what happens when I start up my Tomcat server.  When I look in to my webapps in the Tomcat server, it looks like this file has been deployed. This is in the server; it looks like my property files are there. Now, when I actually go into Chrome and I look for the helloworld.faces file, it says “hello world, check out the link below.” It’s Google.com and what does it say now when I actually go into Firefox [which was previously set to use Spanish as the default language]. You’ll notice in Firefox it actually provides the Spanish translation. I’m not sure if I actually set Internet Explorer to French but let’s take a look. When we go into Internet Explorer, we’ll pull up the helloworld.faces file on Port 8080 and you’ll notice that this provides a French translation of the application.

Now, you can see just how easy it is to use JSF to create JSP pages, replace actual hard coded English values with references to these resource bundle tags and easy internationalize your applications. So yeah, sometimes doing some very basic things, like just printing out HTML, it can get complicated with JSF. When you want to start doing some really complicated tasks, and internationalization is really just the tip of the iceberg, JSF can really help out. It can make some of the most difficult things fairly easy to do.