Cómo formatear fácilmente i18n en UI5

UI5 dispone un sistema de internacionalización de las aplicaciones. Una parte de ese sistema, son los textos i18n. Asumiremos que tenemos declarado en el manifest el ResourceBundle:

{
  "sap.ui5": {
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "dev.carlosorozco.demo.i18n.i18n"
        }
      }
    }
  }
}

Y los ficheros de idioma en la carpeta i18n. En la segunda línea, tenemos un texto con un valor dinámico:

titulo=Demo
saludo=¡Hola {0}!

Desde una vista, podríamos pintar lo siguiente:

<Page title="{i18n>titulo}">
  <Text text="{i18n>saludo}">
</Page>

El texto del saludo no se pintará correctamente, ya que veremos literalmente lo que tenemos puesto en el fichero ¡Hola {0}!.

Formateando dinámicamente el texto

Podríamos utilizar una función formateadora en un fichero específico Formatter.js o bien poner esa función directamente en nuestro controller. Pero como queremos tener el mínimo código necesario, utilizaremos una utilidad que nos ofrece UI5: sap/base/strings/formatMessage. Lo podemos utilizar de la siguiente manera:

<mvc:View
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	core:require="{ formatMessage: 'sap/base/strings/formatMessage' }"
	controllerName="dev.carlosorozco.demo.controller.main">
  <Page title="{i18n>titulo}">
    <Input value="{/input}" valueLiveUpdate="true" />
    <Text text="{parts:['i18n>saludo','/input'],formatter:'formatMessage'}" />
  </Page>
</mvc:View>

Esta vez, si en el Input introducimos nuestro nombre, el texto mostrará ¡Hola Carlos!.