Saturday, December 21, 2013

Silly Polymer i18n


I haven't the foggiest idea what internationalization and localization should look like in Polymer. Heck, I'm not sure formal i18n / l10n is necessary in Polymer—a combination of distributed nodes and attributes might be sufficient for most cases. But to explore the topic, I start modifying a toy Polymer to support different text.

At lease some of this will be based on the example in the Dart code repository. Not tonight's work, which takes a more simplistic approach. But I will eventually get to that other sample.

I am starting exploration of this topic in Dart rather than JavaScript because Dart includes an internationalization library (which is admittedly still early stages). To start using, I add the intl package to the list of dependencies for my code:
name: i18n
dependencies:
  polymer: any
  intl: any
dev_dependencies:
  unittest: any
transformers:
- polymer:
    entry_points: web/index.html
After a pub get, I have Dart's internationalization library at my disposal:
➜  dart git:(master) ✗ pub get
Resolving dependencies...........................................
Downloading intl 0.9.1 from hosted...
Got dependencies!
My play Polymer looks something like:



The thing about localizing this particular Polymer is that I can do so without the formalization of the intl package. The help text at the bottom is actually distributed into the Polymer via <content> tag:
      <hello-you>
        <p>Introduce yourself for an amazing personalized experience!</p>
      </hello-you>
I can localize that to French with:
      <hello-you>
        <p>Présentez-vous une expérience personnalisée incroyable!</p>
      </hello-you>
And that works just fine, leaving only the initial title and button to be localized to French:



Before moving on, I feel that I must admit that I am a typical American. I took 6 years of French in school and would struggle to ask for directions to the library in French today. I am fully at the mercy of Google translate in this matter. Actually, that is not entirely true—I know that “incroyable” means “incredible” because Bomb Voyage calls Mr Incredible “Monsieur Incroyable” in The Incredibles. Anyhow...

The remainder of my play Polymer can be localized through attributes:
      <hello-you hello="Bonjour" done="Fin">
        <p>Présentez-vous une expérience personnalisée incroyable!</p>
      </hello-you>
To support that, I next need to bind the hello and done attributes in the Polymer template:
<polymer-element name="hello-you">
  <template>
    <div>
      <h2>{{hello}} {{your_name}}</h2>
      <p>
        <input value="{{your_name}}">
        <input type=submit value="{{done}}!" on-click="{{feelingLucky}}">
      </p>
      <p class=instructions>
        <content></content>
      </p>
    </div>
  </template>
  <script type="application/dart" src="hello_you.dart"></script>
</polymer-element>
And I need some dumb American defaults in the backing class:
import 'package:polymer/polymer.dart';

@CustomTag('hello-you')
class HelloYou extends PolymerElement {
  @published String your_name;
  @published String hello = 'Hello';
  @published String done = 'Done';
  HelloYou.created(): super.created();
  // ...
}
With that, I have my play Polymer localized in French:



I fully admit that this is not a complete and robust solution. If my Polymer contained dates, for instance, I will still be using the stupid American date format where the month comes first. Regardless of an application-wide intl locale setting, most of the world would still be subjected to the month first. But… for this very simple case, this simple approach works fairly well. I am still going to pursue a more robust solution that actually uses the intl package. Tomorrow.


Day #972

7 comments:

  1. I wrote a sample for localization with polymer a couple of weeks ago which should be in the samples directory in bleeding edge and probably dev.

    ReplyDelete
    Replies
    1. Yup, I mentioned that in the second paragraph above. I tend to implement things the stupid way first before circling in on a good solution. It's certainly nice that you've already provided a good solution in this case. Thanks :)

      Delete
  2. I'm an admitted dummy when it comes to localization, so please forgive the simplicity of this question. How are you handling the accent marks and other characters in the French translations? I am using a similar approach to yours, except that I'm reading my localized strings from an XML file instead of embedding them in the class itself.

    In a unit test, I declare the XML markup as a String. The accented characters are correct in the editor:

    'Où suis-je?'

    But when I reference the markup variable in my code, the accented characters are gone and have been replaced with other characters:

    'Où suis-je?'

    Again, I'm a dummy on this :)

    Thanks!

    ReplyDelete
    Replies
    1. Chris, is this the same issue that you posted a bug for, and that you detail here: http://japhr.blogspot.com/2013/11/unicode-dart-code.html ?

      Delete
    2. Yah, it looks to be the same issue. To get around this, I have been explicitly setting my web page encodings to UTF-8:

      https://github.com/eee-c/hello-you/blob/master/smoke.html#L5

      It's a bit of a hassle, but it does the trick.

      Delete
    3. Perfect! That worked like a charm!

      Delete
  3. This comment has been removed by the author.

    ReplyDelete