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 interface (GWT 1.7.1), we would like to reuse these messages.

I have tried the following:

<!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" 
 xmlns:res="ui:with:be.credoc.iov.webapp.client.MessageConstants">

 <g:HTMLPanel>
  <div>
   <res:msg key="email">Emaileke</res:msg>:
   <g:TextBox ui:field="email" />
  </div>
 </g:HTMLPanel>
</ui:UiBinder>

The MessageConstants class looks like this:

@DefaultLocale("nl")
public interface MessageConstants extends Messages {
 String email();
}

However, this does not work. How can I do this?

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

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 :/