The NWS Tutorial

Internationalization of a Web application



WARNING: This tutorial is being written! Do not hesitate to report any errors or suggestions.

Quick access:
   The files of NWS resources
   Incorporation in a Web page
   Changing the preferred language of your browser
   Impose a location on the server side

The files of NWS resources

While Java already provides mechanisms relating to the internationalization of Java applications. However, NWS provides its own mechanisms and its own format of resources file. This format is fully based on the XML format (NWS framework is not provided to manage the .properties files).

A NWS resources file is introduced by the tag <ResourceBundle>. It is also composed of a set of resources: each one of them is set through the tag <Resources>. A resource can be broken in several languages. The sample of code below shows you the syntax to be used to define a NWS resources file: once again, this sample of code is extracted from the demonstration application of the NWS framework.

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <ResourceBundle supportedLocales="fr,en">
03 
04 	<Resource key="title">
05 		<Value locale="fr">Ecran d'authentification</Value>
06 		<Value locale="en">Logon screen</Value>
07 	</Resource>
08 
09 	<Resource key="errorMessage">
10 		<Value locale="fr">Une valeur est requise</Value>
11 		<Value locale="en">Value is required</Value>
12 	</Resource>
13 	
14 	<Resource key="lblLogin">
15 		<Value locale="fr">Nom d'utilisateur :</Value>
16 		<Value locale="en">Login: </Value>
17 	</Resource>
18 
19 	<Resource key="lblPassword">
20 		<Value locale="fr">Mot de passe :</Value>
21 		<Value locale="en">Password:</Value>
22 	</Resource>
23 
24 	<Resource key="btnConnect">
25 		<Value locale="fr">Se connecter</Value>
26 		<Value locale="en">Connect</Value>
27 	</Resource>
28 	
29 </ResourceBundle>
File LoginI18N.res

Incorporation in a Web page

Once the resources file is created, you will have to link it to the web page considered. In fact, the technique used is once again the mechanism of link to the NWS framework datas (NWS Data Binding) coupled with the use of the tag <web:ResourceBundle>. At the initialization of this Web component (the component_init method), it stores in a user session a request of type corelib.runtime.internationalisation.ResourceBundle. It is this class which is responsible for extracting the data stored in the file of resources. The web component has a property id: the value of this property will serve as a key name for the recording of the request of ResourceBundle in the session. This is the line 06 of the example below that performs the loading of the resources file.

Then, some expressions of link to the data are used to retrieve a value of the resources files, taking into account the location considered (for information, a location is represented by a request of type java.util.Locale). In line 07, we inject the appropriate text in the tag <title>: to do this, the expression #{resBundle.title} is used. The left side (resBundle) is the request of ResourceBundle stored in session and the right side (title) is one of the resources in the resources file.

01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           xmlns:caddy="corelib.services.web.samples.virtualcaddy.webcomponents"
04           codeBehind="corelib.services.web.samples.virtualcaddy.webpages.LoginI18N">
05     <head>
06         <web:ResourceBundle id="resBundle" filename="LoginI18N.res" />
07         <title><web:OutputText text="#{resBundle.title}" undecorated="true" /></title>
08         <link rel="stylesheet" type="text/css" href="CssStyles.css" />
09     </head>
10     <body>
11         <web:Form focus="txtLogin" method="post">
12             <table border="0" width="100%">
13                 <tr>
14                     <td width="25%">
15                     </td>
16                     <td valign="top">
17                         <h1><web:OutputText text="#{resBundle.title}" /></h1>
18                     </td>
19                     <td width="25%" valign="top" align="right">
20                         <caddy:LanguageSelector id="languageSelector" />
21                     </td>
22                 </tr>
23             </table>
24
25             <div align="center">
26                 <web:Label text="#{resBundle.lblLogin}" text="txtLogin" />
27                 <web:TextBox id="txtLogin" value="Malone" />
28                 <web:RequiredValidator componentToValidate="txtLogin"
29                     errorMessage="#{resBundle.errorMessage}" cssClass="Validator" />
30                 <br/>
31                 
32                 <web:Label text="#{resBundle.lblPassword}" text="txtPassword" />
33                 <web:TextBox id="txtPassword" value="P@ssw0rd" type="password" />
34                 <web:RequiredValidator componentToValidate="txtPassword"
35                     errorMessage="#{resBundle.errorMessage}" cssClass="Validator" />
36                 <br /> <br/>
37
38                 <web:Button id="btnConnect" value="#{resBundle.btnConnect}" /> <br />
39                 <web:OutputText id="lblResult" />  <hr />
40             </div>
41         </web:Form>
42     </body>
43 </web:Html>
File LoginI18N.wp

Changing the preferred language of your browser

The HTTP protocol can send in the HTTP request, issued by the navigator, any informations of the prefered languages (there may be several languages specified at this level, each with a value of preference). For example, the Web server, at the receipt of the request could return a HTTP page in the desired language (at least, as long as the website has been developed to support the internationalization). Of course, major browsers support this possibility.

If you use IE, ask the "Tools" menu and click on "Internet Options", a dialog box appears. On his first tab, a "Languages" button will allow you to edit your preferences in terms of languages. The following screenshot shows you an example of definition for IE.

If you use Firefox, click also on "Options" from the "Tools" menu: a dialog should also appear. Starting from his latest "Advanced" tab, click on the choice button of the prefered languages. The following screenshot shows you an example of definition for Firefox.

Change the preferred language getting it up on the top of the list, next close the browser and open it one more time by asking the web page presented above and you should see the HTML page using the right language according to your expectations.

Impose a location on the server side

It is possible to impose, on the server side, a location. To do this we must invoke the method setLocale on a Web page. It should be noted that this changing is stored in session and that for all the future visited pages (and for this session) the new location will be preserved. If you take the webpage studied above, you will notice, in line 20, that it uses the web component of type LanguageSelector: this component changes the localization depending of your selection: here is the code. You can note the presence of the method setCurrentLanguage (from line 16): this is it that force a new request of type java.util.Locale.

01 package corelib.services.web.samples.virtualcaddy.webcomponents;
02 
03 import java.io.PrintWriter;
04 import java.util.Locale;
05 
06 import corelib.services.web.components.VisualComponent;
07 import corelib.services.web.server.events.WebPageEvent;
08 
09 public class LanguageSelector extends VisualComponent {
10 
11     public String getCurrentLanguage() {
12         return this.webPage.getLocale().toString();
13     }
14 
15     public void setCurrentLanguage( String currentLanguage ) {
16         if ( currentLanguage == null ) throw new NullPointerException();
17         String [] localePart = currentLanguage.split( "_" );
18         Locale locale = null;
19         if ( localePart.length == 1 ) locale = new Locale( localePart[0] );
20         if ( localePart.length == 2 ) locale = new Locale( localePart[0], localePart[1] );
21         if ( localePart.length == 3 ) locale = new Locale( localePart[0], localePart[1], localePart[2] );
22         this.webPage.setLocale( locale );
23     }
24 
25 
26     @Override public void component_renderBegin( WebPageEvent webPageEvent ) {
27         PrintWriter out = this.webPage.getOut();
28         String imageStyle = "style='border: 0px; cursor: pointer;'";
29 
30         out.println( "<div>" );
31         out.println( "    <script language='javascript'>" );
32         out.println( "        function changeLanguage( language ) { " );
33         out.println( "            var inputNode = document.getElementById('" + this.getId() + "');" );
34         out.println( "            inputNode.value = language;" );
35         out.println( "            inputNode.form.submit();" );
36         out.println( "        }" );
37         out.println( "    </script>" );
38         out.println( "    <img src='Images/LocaleFR.png' onclick='changeLanguage(\"fr\");'" );
39         out.println( "         title='Changer le language en français' " + imageStyle + "/>   " );
40         out.println( "    <img src='Images/LocaleEN.png' onclick='changeLanguage(\"en\");'" );
41         out.println( "         title='Change language to english' " + imageStyle + "/>" );
42         out.println( "    <input type='hidden' id='" + this.getId() + "'" );
43         out.println( "           name='" + this.getId() + ":currentLanguage'" );
44         out.println( "           value='" + this.getCurrentLanguage() + "' />" );
45         out.println( "</div>" );
46     }
47 
48 }

CAUTION : NWS is proposed to you in BETA version to allow evaluation of this framework. Infini Software is released from any responsibility for the use of framework NWS. In addition, Infini Software can in no way be liable for the use of information contained in these tutorials.

Dominique LIARD - © 2007 SARL Infini Software - All rights reserved
Other brands and product names in these documents are the property of their respective owners.