How can I internationalize a GWT UIBinder page with Messages?

Question

I am trying to internationalize a UIBinder application with property files. Since we have already a lot of translations exposed by the com.google.gwt.i18n.client.Messages in

Answer 1

Update:

Since Igor wrote his answer, there has been a new method of using messages in ui binder.

<span>This <ui:text from="{msgRes.message}" /> has been internationalized</span>

This method uses GWT's text resource UiBinder integration

Answer 2

There is a known issue with the UiBinder in combination with internationalization, see also this recent thread on the gwt bugtracker: http://code.google.com/p/google-web-toolkit/issues/detail?id=4355.

In comment 4 a solution is given:

If your UiBinder file is called, say, 'LoginView.ui.xml' then call the properties file LoginViewLoginViewUiBinderImplGenMessages.properties (yes 'LoginView' appears twice) and put it next to the view's java file in the source package, so altogether you'll have 3 files:

LoginView.ui.xml
LoginView.java
LoginViewLoginViewUiBinderImplGenMessages.properties

Answer 3

Update:
please check logan's answer below for a solution available in recent versions of GWT.

---

I had (actually, have) the same problem as you do - after migrating to GWT 2.0 I had a properties file I wanted to use in my UiBinder files. Unfortunately, I couldn't get it to work like I wanted to - it seems the GWT devs want people to use the syntax described in the i18n guide for UiBinder - where a Message interface is created during compile for every UiBinder template, etc.

Anyway, you can still use external Messages interfaces like this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field='cc' type='path.to.i18n.SomeMessages'/>
    <ui:with field='res' type='path.to.resource.ResourceBundle'/>
    <ui:style>
        .required {
      color: red;
      font-weight: bold;
    }
    .right {
      text-align: right;    
    }
    .textBox {
      margin-right: 7px;
    }
    </ui:style>
    <g:HTMLPanel styleName='{res.style.form} {res.style.mbox}' ui:field='mainPanel'>
        <h2 ui:field='loginHeader' />
      <h3 ui:field='loginLabel' />
      <div class='{style.textBox}'><g:TextBox ui:field="loginBox" /></div>
      <h3 ui:field='passwordLabel' />
    <div class='{style.textBox}'><g:PasswordTextBox ui:field="passwordBox" /></div>
    <div><g:CheckBox ui:field='rememberMeCheckBox' text='{cc.rememberMeCheckboxText}' /></div>
    <div class='{style.right}'><g:Button ui:field='submitButton' text='{cc.loginSubmitButtonText}' /></div>
    </g:HTMLPanel>
</ui:UiBinder> 

Though, that only works for stuff like Button's title, etc, not content of divs :/ You can fill those in the class behind the UiBinder template, but there should be a better way.

I was hoping that you could set the inner HTML via innerHTML (since UiBinder should recognize that method and allow to set it's value via XML/UiBinder template) but alas, last time I checked it didn't work :/