I18Nized Buttons with AccessKeys in Struts applications

Some time ago I wrote a post on HTML Buttons which are accessable using keyboard shortcuts. (alt-s for a save button for example). In the solution I proposed I used CSS to put background images on the buttons.

One of the commenters noted that this approach gets quite tedious when you have a lot of buttons or an internationalized application.

In this post I describe how you could use CSS and a custom Tag to implement a more elegant solution.

The first important step is not to use an HTML button or input, but a link which you style to look like a button. This is what the HTML should look like.

<a onfocus='this.click();'
     href='javascript:document.forms[ 0 ].submit();'
     class='up' accesskey = 's'  onclick='return allowSubmit();'>
    <span class='accessKey'> S</span>ave
</a>

The stylesheet should have classes for the syle of the link (up) and the layout of the Accesskey (accesskey )

for example

.up {
  background:silver;
  color:black;
  border-top:2px solid white;
  border-left:2px solid white;
  border-bottom:2px solid black;
  border-right:2px solid black;
  padding:8px;
  text-decoration:none;
}

.accessKey {
  text-decoration:underline;
  color:red;
  font-variant:small-caps;
}

Note the following: Internet Explorer only puts the focus on the link when the accesskey is used. Firefox correctly executes the link. For IE I had to put the onfocus=”this.click();”. Another thing to take in account is that when a form is submitted using Javascript the onSubmit event is not fired.

To use this approach in a struts application I created a custom tag. This tag reads the text for the link (in this case :save) from a ResourceBundle using a key.
In the English ResourceBundle I specify the text and the key to be used as AccessKey in the following manner

submitbutton=#S#ave

Likewise in the Dutch ResourceBundle I add

submitbutton=Opslaa#n#

The tag renders the correct HTML based on the retrieved text. In an English browser the “button” is accessible using alt-s, in a Dutch browser with alt-n.

Browser with English language settings

Browser with Dutch language settings

The Tag exposes several usefull attributes as can be seen in the following code snippet

<amis :accessbutton onSubmitHandler="allowSubmit()"  tabindex="2"  key="submitbutton" upClassName="up" accessKeyClassName="accesskey" />

The onSubmitHandler attribute points to a javascript method on the page. Only if this function returns true the form is submitted. Note that the actual layout is determined by a StyleSheet and not the Tag. Any changes to the layout can be made quite easily.
The accesskey does not have be the first letter, it can be any letter you want .

The Tag itself is pretty straightforward. It uses the Struts framework to obatin resources and write its output. Here are some snippets

Obtaining the text from the resource bundle

e = RequestUtils.message(pageContext, this.bundle,Globals.LOCALE_KEY,key,null);

Getting the accesskey and Hihlighting it using commons StringUtils

accessKey = StringUtils.getNestedString(message,SEPARATOR,SEPARATOR);
message = StringUtils.replaceOnce(message,SEPARATOR,"<span class='" + accessKeyClassName + "'>");
message = StringUtils.replaceOnce(message,SEPARATOR,"</span'>");

It is easy. Also take a look at the Struts taglibraries for inspiration!

There is one bug remaing …. The link is followed every time it receives the focus. So tabbing also submits the form. I’ll have to correct that behaviour.