4D para móviles: Formateadores de datos personalizados para apariencias claras y oscuras

Durante algún tiempo, usted ha podido crear sus propios formateadores de datos personalizados y convertir cadenas, booleanos o enteros en imágenes en su aplicación generada.

Esta nueva función de 4D v19 R2 le permitirá aprovechar al máximo esos formateadores para iOS y Android, y asegurarse de que las imágenes se vean bien tanto en apariencia clara como oscura.

¡Veamos cómo!

Puede hacerlo de tres maneras diferentes :

• utilizando colores en blanco y negro
• utilizando diferentes imágenes en función del modo activo
• mezclando las dos opciones anteriores

Utilizando colores en blanco y negro

Esta opción le permitirá obtener imágenes con colores optimizados en función del modo configurado en su dispositivo móvil (claro u oscuro).


{"name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54,
"tintable": true
}
}

Para todos sus formateadores clásicos, el archivo manifest.json del formateador ya debería contener la siguiente información :

• una «choiceList » que contenga los valores que van a ser sustituidos por imágenes
• propiedades de las imágenes (o activos) como «size» (tamaño)

La diferencia significativa aquí es que la clave «tintable » se establece en true para que el color de la imagen (blanco o negro) pueda adaptarse dinámicamente según el modo de tema de la UI.

Esto es lo que obtienes en tu teléfono cuando cambias de modo:

Utilizar diferentes imágenes según el modo

Esta opción te permite establecer que se muestren diferentes imágenes optimizadas en función del modo establecido en tu dispositivo móvil.


{"name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54
}
}

Aquí, el formateador es el mismo que el anterior. Lo que cambia es el nombre de la imagen. Si una imagen lleva el sufijo «_dark», se utiliza para el modo oscuro.

Ejemplo: «clear_dark.png» se establece como la versión oscura de «clear.png»

Este es el resultado:

Mezcla de ambas opciones

Esta opción le permitirá aprovechar las dos opciones anteriores. Esto significa que puede establecer la clave «tintable » en verdadero, y al mismo tiempo especificar las imágenes y los colores optimizados que se mostrarán dependiendo del modo establecido en su dispositivo móvil.

Ahora está listo para utilizar sus formateadores tanto si su dispositivo iOS y Android está en modo oscuro como claro.

Sí, ¡esta función también está disponible en Android!

No dude en darnos su opinión en el foro de 4D, y consulte la documentación dedicada para más detalles.