ui5

Cómo formatear fácilmente i18n en UI5

13 febrero 2023 · 1 minuto de lectura

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:

manifest.json
{
  "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:

i18n/i18n.properties
titulo=Demo
saludo=¡Hola {0}!

Desde una vista, podríamos pintar lo siguiente:

view/main.xml
<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:

view/main.xml
<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!.