Change GWT locale dynamically

[Mamadou Alimou DIALLO]

Hello group,

I develop big entreprise application using GWT. My application is multilanguage (FR, EN, GB). I would like to change dynamically the application language automaticaly. For example when I lunch application, I would like to detect the client language and automatically load a good propertie file. For example when your browser is in French, I would like to load my application in French. Please do you have an idea about this problem ?

The other think I would like to do is, when I click for example on a button to change language, I would like to change language without reloading all of my application (just the current context). How can I do this please ?

thanks in advance

--
Cordialement,
DIALLO M. Alimou
http://dialloma.blogspot.com/
Cel. 00336 13 39 81 88

[Thomas Broyer]

On 19 mar, 15:34, Mamadou Alimou DIALLO <malim...@gmail.com> wrote:
> Hello group,
>
> I develop big entreprise application using GWT. My application is
> multilanguage (FR, EN, GB). I would like to change dynamically the
> application language automaticaly. For example when I lunch application, I
> would like to detect the client language and automatically load a good
> propertie file. For example when your browser is in French, I would like to
> load my application in French. Please do you have an idea about this problem
> ?

We have the very same need, and the way we're going to do it is to use
content negotiation on the server.
In other words, duplicate the HTML host page in each 4 languages
(index.html.fr, index.html. en, index.html. de, index.html. es) with
the corresponding <meta name="gwt:property" content="locale=XX"> and
let Apache choose the appropriate file.

That's kind of a "poor man"'s approach, but I know I won't get into
tricky things: it is known to work and it "just works".

(the GWT-Incubator includes some server-side Java code to do content-
negotiation from within a servlet/jsp/etc. and allows you to keep a
single HTML host page and generate the appropriate <meta> within it
using conneg against the locales your application do support; we won't
use this approach as a) the app is served straight from Apache and b)
our HTML host page contains some localizable text: "loading",
"JavaScript support is mandatory; enable JavaScript or use a browser
that supports it", you know those kind of things)

> The other think I would like to do is, when I click for example on a button
> to change language, I would like to change language without reloading all of
> my application (just the current context). How can I do this please ?

We won't go this road as I don't think it is compelling enough for the
implied additional work (and performance downgrade). If you do want to
explore this scenario, here are some notes:
- do not use GWT's I18N support (the "locale" property, Constants,
Messages, etc.), you'd have to build your own.
- each and every localizable widget would have to register for a
global "locale changed" event that you'd fire when the user wants to
switch from e.g. French to English. This has serious performance
impacts if you have many such widgets.
- beware of other locale peculiarities: RTL, some changes needed in
styles so your widgets align properly (text don't wrap, etc.) and/or
you don't offense or misguide your users (colors have different
"meanings" depending on countries/cultures). That's true even if you
use GWT's I18N, but it becomes trickier when you change the locale
dynamically as you might have to re-layout your page "on the go")

[Bhavik]

Hello Friends,

I too recently had the same problem as yours. My requirement was a
user can change the language on his wish from the ComboBox.

So the solution I did with is I used JSNI (JavaScript Native
Interface). - Javascript to be written into Java file.

I put a combox. and on its "onSelect()" method in Listener Method of
ComboBox, I get the value like "en_US" or "fr_FR" like this....

Then I created an innerclass and created a JSNI method named
changeLocale like :

class Locale
{
private native void changeLocale(String newLocale)/*-{

//alert("Language changed to : "+newLocale);

var currLocation = $wnd.location.toString();
//alert("currLocation : "+currLocation);

var noHistoryCurrLocArray = currLocation.split("#");
//alert("noHistoryCurrLocArray: "+noHistoryCurrLocArray);

var noHistoryCurrLoc = noHistoryCurrLocArray[0];
//alert("noHistoryCurrLoc : "+noHistoryCurrLoc);

var locArray = noHistoryCurrLoc.split("?");
//alert("locArray : "+locArray);
$wnd.location.href = locArray[0]+"?locale="+newLocale; //$wnd
}-*/;
}

Now in onSelect() method of Combobox create an instance of Locale and
then call the changeLocale() native method.

Good Luck. This will work as I did the same......

[Salvador Diaz]

$wnd.location.href = locArray[0]+"?locale="+newLocale;

Doesn't that reload the whole app ? The OP specifically asked a
solution that didn't reload the whole app.

Cheers,

Salvador

[Ronny Bubke]

There is no way to change the locale without a reload. This is because
GWT-Compiler generates several permutations of js-files. For each
locale and for each browser type one. Reason is to optimize javascript
size because just the code which is needed for browser and locale is
really transfered.

If you have 2 locales and 5 supported browser types you got 2 * 5 = 10
permutations but just one is transfered.

[Raymond Domingo]

Hi Bhavik,

FYI
I have used your script sparely, but successfully for some time now,
thank you for sharing.

I recently discovered it broke my recenlty added history support. That
is when I extended your script to support history tokens. Now it also
supports history tokens.

var currLocation = $wnd.location.toString();

var noHistoryCurrLocArray =
currLocation.split("#");

var noHistoryCurrLoc =
noHistoryCurrLocArray[0];

var historyToken = noHistoryCurrLocArray
[1];
var locArray=noHistoryCurrLoc.split("?");
var newHref = locArray[0]+"?
locale="+newLocale;

// alert('currLocation'+currLocation);
// alert
('noHistoryCurrLocArray'+noHistoryCurrLocArray);
// alert
('noHistoryCurrLoc'+noHistoryCurrLoc);
// alert('historyToken'+historyToken);
// alert('locArray'+locArray);
// alert('newHref'+newHref);

$wnd.location.href=newHref
+'#'+historyToken;

[Josselin B.]

Thanks all for you answers.

Here is an improved version where I keep the other URL parameters (gwt.codeserver, ...)

var currLocation = $wnd.location.toString();

        var noHistoryCurrLocArray = currLocation.split("#");

        var noHistoryCurrLoc = noHistoryCurrLocArray[0];
        var historyToken = noHistoryCurrLocArray[1];
       

        // Replace locale=.. if found
        if (noHistoryCurrLoc.match(/(\?|&)locale=(\w*)/g)) {
            noHistoryCurrLoc = noHistoryCurrLoc.replace(/(\?|&)locale=(\w*)/g, "$1locale=" + newLocale);
        }
       
        // Else, add it to the end of the query
        else {
            var separator = noHistoryCurrLoc.indexOf('?') == -1 ? '?' : '&';
            noHistoryCurrLoc = noHistoryCurrLoc + separator + "locale=" + newLocale;
        }

        $wnd.location.href = noHistoryCurrLoc + '#'+historyToken;  //$wnd