4D pour mobile : Formateurs de données personnalisés pour les apparences claires et sombres

Depuis quelque temps, vous pouvez créer vos propres formateurs de données personnalisés et convertir des chaînes, des booléens ou des entiers en images dans votre application générée.

Cette nouvelle fonctionnalité de 4D v19 R2 vous permettra de tirer pleinement parti de ces formateurs pour iOS et Android, et de vous assurer que les images ont une bonne apparence, qu’elles soient claires ou sombres.

Voyons comment !

Vous pouvez le faire de trois manières différentes :

• en utilisant des couleurs en noir et blanc
• en utilisant des images différentes en fonction du mode actif
• en mélangeant les deux options ci-dessus

Utiliser des couleurs en noir et blanc

Cette option vous permettra d’obtenir des images aux couleurs optimisées en fonction du mode défini sur votre appareil mobile (clair ou foncé).


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

Pour tous vos formateurs classiques, le fichier manifest.json du formateur devrait déjà contenir les informations suivantes :

• une « choiceList » qui contient les valeurs qui vont être remplacées par des images.
• les propriétés des images (ou des actifs) telles que « size » (taille)

La différence significative ici est que la clé « tintable » est mise à true afin que la couleur de l’image (noire ou blanche) puisse être adaptée dynamiquement en fonction du mode de thème de l’IU.

Voici ce que vous obtenez sur votre téléphone lorsque vous changez de mode :

Utiliser des images différentes selon le mode

Cette option vous permet de définir différentes images optimisées à afficher en fonction du mode défini sur votre appareil mobile.


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

Ici, le formateur est le même que le précédent. Ce qui change, c’est le nom de l’image. Si une image est suffixée par « _dark », elle est utilisée pour le mode sombre.

Exemple : « clear_dark.png » est défini comme la version sombre de « clear.png ».

Voici le résultat :

Mélange des deux options

Cette option vous permettra de tirer parti des deux options précédentes. Cela signifie que vous pouvez définir la clé « tintable » sur true, et en même temps spécifier des images et des couleurs optimisées à afficher en fonction du mode défini sur votre appareil mobile.

Vous êtes maintenant prêt à utiliser vos formateurs, que votre appareil iOS et Android soit en mode sombre ou clair.

Oui, cette fonctionnalité est également disponible sur Android !

N’hésitez pas à nous faire part de vos commentaires sur le forum 4D, et consultez la documentation dédiée pour plus de détails.