Ajax in Action IV

Im vorherigen Post in der Serie Ajax in Action habe ich beschrieben, wie man mit AJAX in GUI Komponenten nachladen kann.

In diesem Beitrag geht es darum, locale spezifische Messages im Client auszugeben. In vielen Büchern, z.B. Ajax in Action, findet man immer wieder ein Kapitel Exception Handling, was aber nur das Handling ansich aufzeigt, nicht aber, wie man lokalisierte Messages realisert.

Beispiel: Ajax in Action, Seite 464, Listing 1:

handleError: function(request) {
 if (this.options.messageSpanId) {
  document.getElementById(this.options.messageSpanId).innerHTML=
   "Opps! Server error. Please try again later.";

Soweit - so gut. Aber wie realisert man jetzt, dass die Message in DE/FR/IT/EN lokalisiert wird?

Ich persönlich schau immer gern was Microsoft so macht, denn die Lösungen sind meistens sehr gut durchdacht und funktionieren auch!

Gesagt - getan - gegoogled: Adding Localized Resources to a JavaScript File.

Ich hab die Idee ein bischen verändert und komme zu folgendem Lösungsansatz:

Die Seiten, die eine JavaScript Message lokalisieren müssen bekommen einen script include, z.B:

<script type='text/javascript' src='/myapp/js/resources.js'></script>

Im JavaScript wird folgendes definiert:

Error={
"InputNotValid":"Sie haben ein ungültigen Wert eingegeben.",
"ServerError": "Der Service ist momentan nicht verfügbar."
};
Message={
"Loading":"Bitte warten…"
};

Dieses resources.js steht die Default Locale bereit. Zusätzlich wird im HMTL Code weiter unten noch das sprachspezifische resource.js geladen. Da JavaScript überladen unterstützt, können im sprachspezifischen File die Werte neu definiert werden. Werden sie nicht definiert, greift die Default Language:

<script type='text/javascript' src='/myapp/js/resources.en-GB.js'></script>

Das JavaScript sieht dann so aus:

Error={
"InputNotValid":"Your entered value is not valid."
};

Message={
"Loading":"Loading…"
};

In diesem Fall würde das englische Resource File den Error.ServerError nicht definieren und somit den Default aus resources.js verwendet.

Wie wird das nun verwendet? Am Beispiel vom "Loading" wird die Message.Loading im div loadingMsg so verwendet:

<script type="text/javascript">
function addItemToCart() {
 document.getElementById('loadingMsg').style.display = 'block';
 document.getElementById('loadingMsg').innerHTML = Message.Loading;
 var id = dwr.util.getValue("id");
 var q = dwr.util.getValue("quantity");
 cartManager.addItemToCart(id,q);
 return;
}
</script>


Lokalisierte Messages im JavaScript - gelöst!