I am using Dart to build a Polymer app. Since I am using Dart's internationalization capabilities within Polymer elements, I want to initialize internationalization messages before a Polymer element is created and display the appropriate messages for a given locale within the Polymer element.
How can this be done? Has anyone successfully used Polymer with Internationalization?
ps. I have followed this example to set up internationalization
The following is the default generated Polymer app by Dart Editor plus the code that I've added.
messages_en.dart
library messages_en;
import 'package:intl/intl.dart';
import 'package:intl/message_lookup_by_library.dart';
final messages = new MessageLookup();
class MessageLookup extends MessageLookupByLibrary {
get localeName => 'en';
final messages = {
"myMsg" : () => Intl.message("MY MESSAGE")
};
}
messages_all.dart
library messages_all;
import'dart:async';
import 'package:intl/message_lookup_by_library.dart';
import 'package:intl/src/intl_helpers.dart';
import 'package:intl/intl.dart';
import 'messages_en.dart' as en;
MessageLookupByLibrary _findExact(localeName) {
switch (localeName) {
case 'en': return en.messages;
default: return null;
}
}
initializeMessages(localeName) {
initializeInternalMessageLookup(() => new CompositeMessageLookup());
messageLookup.addLocale(localeName, _findGeneratedMessagesFor);
return new Future.value();
}
MessageLookupByLibrary _findGeneratedMessagesFor(locale) {
var actualLocale = Intl.verifiedLocale(locale, (x) => _findExact(x) != null);
if (actualLocale == null) return null;
return _findExact(actualLocale);
}
clickcounter.dart
import 'package:polymer/polymer.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import 'messages_all.dart';
import 'messages_en.dart' as en;
/**
* A Polymer click counter element.
*/
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
@published int count = 0;
@observable var messagesLoaded = false;
ClickCounter.created() : super.created() {
var enMessagesFuture = initializeMessages('en');
Future.wait([enMessagesFuture]).then((_) => messagesLoaded = true);
}
void increment() {
count++;
}
}
clickcounter.html
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
<br>
<br>
<span>current locale: {{Intl.getCurrentLocale()}}</span>
<br>
<br>
<template if="{{messagesLoaded}}">
<span>intl message: {{How can I extract myMsg here?}}</span>
</template>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
I got somthing working:
add a getter to ClickCounter
String get locale => Intl.getCurrentLocale();
and change the HTML to
current locale: {{locale}}
create a transformer
library i18n_transformer;
import 'package:polymer_expressions/filter.dart' show Transformer;
import 'package:intl/intl.dart' show Intl;
class I18nTransformer extends Transformer<dynamic,String> {
Map<String,dynamic> _labels;
String language;
String missingIndicator;
I18nTransformer(this._labels, {this.language: 'en', this.missingIndicator: '#'});
String forward(params) {
String id;
if(params is String) {
id = params;
} else if(params is Map) {
if(!(params['0'] is String)) {
throw 'Error: The first list element must contain the label id as string.';
}
id = params['0'];
} else {
throw 'Error: The I18nTransformer expects either a label id as string or a list containing a label id and parameters.';
}
var msg = Intl.message('', name: id);
if(msg == null || msg.isEmpty) {
return '${missingIndicator}(${language}-${params})';
}
}
dynamic reverse(String label) {
return 'reverse not supported';
}
}
and add the following to your ClickCounter
final I18nTransformer i18n = new I18nTransformer(null, language: 'en');
and in HTML
<p>{{ 'myMsg' | i18n }}</p>
<p>{{ 'myMsg2' | i18n }}</p> <!-- sample output for a not existing message -->
Comment:
You could make a simpler Transformer<String,String> but I choose to use Transformer <dynamic, String>
to be able to provide additional parameters (not yet implemented in the transformer) in the form
{{ {0: 'myMsg', 1:'x'} | i18n }}
List literals are not yet supported in PolymerExpressions and so you have to add some dummy keys like 0, 1, ...
In my implementation the first key has to be 0 to work, as you can see in the code.
I wrote a sample for this, which you can find at https://github.com/dart-lang/sample-polymer-intl/blob/master/README.md or see https://www.dartlang.org/samples/ under "Polymer and Internationalization"
The essential bit looks like this
// Polymer should call this method automatically if the value of
// [selectedLocale] changes.
void selectedLocaleChanged() {
// We didn't provide en_US translations. We expect it to use the default
// text in the messages for en_US. But then we have to not try and
// initialize messages for the en_US locale. dartbug.com/15444
if (selectedLocale == 'en_US') {
updateLocale('en_US');
return;
}
// For the normal case we initialize the messages, wait for initialization
// to complete, then update all (all 1 of) our messages.
initializeMessages(selectedLocale).then(
(succeeded) => updateLocale(selectedLocale));
}
// When the user chooses a new locale, set the default locale for the
// whole program to that and update our messages. In a large program this
// could get to be a large method. Also, other components might want to
// observe the default locale and update accordingly.
void updateLocale(localeName) {
Intl.defaultLocale = selectedLocale;
helloWorld = helloFromDart();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With