Jakarta Struts Cookbook

2017-07-07 02:10:07

Recipe 12.7. Displaying Locale-Specific Images

Problem

Your Struts application needs to show a graphic image specific to a user's locale.

Solution

Create a property in the locale's resource bundle specifying the path to the image source file. Here's an example from a Spanish locale properties file (ApplicationResouces_es.properties) file:

# spanish language properties img.source.yes=images/es/yes.gif

Use the html:img tag with the srcKey or pageKey attribute set to the property key:

<html:img border="0" srcKey="img.source.yes"/>

Discussion

Most production web applications use images extensively. Images are frequently used, in place of text, for buttons and links. In many cases, images are used to create "fancy" buttons, as shown in Figure 12-1.

Figure 12-1. Using images for buttons

If the user speaks Spanish, Figure 12-1 must be modified since the text message needs to be translated to Spanish and the "yes" button should be changed to "sì." The text can be localized using the bean:message or fmt:message tag (Recipe 12.6). For the button images, you can use the html:img to retrieve a locale-specific image and generate an appropriate HTML img element. The html:img tag supports two attributes, srcKey and pageKey, which allow you to specify a key, to be looked up from a resource bundle. The bundle's value dictates the path to the file. The path will be retrieved from the default Struts MessageResources bundle for the current locale. If srcKey is specified, the resultant value is used "as is" for the image location; if pageKey is used, the resultant value is treated as a module-relative path to the image.

The JSP page (need_help.jsp) shown in Example 12-6 generates the HTML pop-up window in Figure 12-1.

Example 12-6. Using html:img to display localized images

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> <html:html lang="true"> <head> <title>Ask for Help</title> </head> <body> <p align="center"> <bean:message key="prompt.help"/> </p> <p align="center"> <a href="javascript:close( )"> <html:img border="0" srcKey="img.yes.src" titleKey="img.yes. title"/> </a>   <a href="javascript:close( )"> <html:img border="0" srcKey="img.no.src" titleKey="img.no. title"/> </a> </p> </body> </html:html>

The titleKey specifies the key to the text to be used for the title attribute of the generated img tag. Most modern browsers display the title when the mouse hovers over the image. The html:img tag supports the altKey attribute to retrieve localized text for the img tag's alt attribute (displayed when the image isn't available).

For the JSP of Example 12-6, here are the resource bundle properties from ApplicationResources.properties (default locale):

prompt.help=Do you need help? img.yes.src=images/yes.gif img.yes.title=Yes img.no.src=images/no.gif img.no.title=No

Here are those same properties from ApplicationResources_es.properties (Spanish locale):

prompt.help=Necesita ayuda? img.yes.src=images/es/yes.gif img.yes.title=Si img.no.src=images/es/no.gif img.no.title=No

When the users set their language to Spanish, the JSP of Example 12-6 generates the pop up shown in Figure 12-2.

Figure 12-2. Localized text and images

The text and images are retrieved from the bundle for the current locale. The images are retrieved from a locale-specific directory. You can organize your images however you wish, but if you have many localized images, placing them under a folder that's named using the language code, like images/es, works quite well.