How To Initialize Internationalization For A Polymer Element Before It Loads On Page

dart, dart-polymer, polymer

Solution

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();
}

Problem

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> ```

Original source